Calling OAuth2 protected APIs from a SAPUI5 application on SCP CF using the Destination service

[ssimsekler]

Hello

We have APIs exposed in i) SAP API Management and ii) in another API Gateway. The APIs need authentication via OAuth2 and/or API Key. From an SAPUI5 application, we would like to consume these APIs.

I have defined three destinations:

Northwind Destination

External API destination with OAuth2ClientCredentials

OAuth2 Token retrieval destination

The app router config, i.e. xs-app.json. Here, I have two routes per destination trying to see if keeping UAA instance make any difference. One variant, i.e. ending with "uaa", has "authenticationType": "xsuaa", the other variant has "authenticationType": "none".

{
 "welcomeFile": "/index.html",
 "authenticationMethod": "route",
 "logout": {
 "logoutEndpoint": "/do/logout"
 },
 "routes": [
 {
 "authenticationType": "xsuaa",
 "csrfProtection": false,
 "source": "^/northwinduaa/(.*)$",
 "destination": "northwindodatav2",
 "target": "$1"
 },
 {
 "authenticationType": "none",
 "csrfProtection": false,
 "source": "^/northwindnone/(.*)$",
 "destination": "northwindodatav2",
 "target": "$1"
 },
 {
 "authenticationType": "xsuaa",
 "csrfProtection": false,
 "source": "^/externalapiuaa/(.*)$",
 "destination": "externalapi",
 "target": "$1"
 },
 {
 "authenticationType": "none",
 "csrfProtection": false,
 "source": "^/externalapinone/(.*)$",
 "destination": "externalapi",
 "target": "$1"
 },
 {
 "authenticationType": "xsuaa",
 "csrfProtection": false,
 "source": "^/externalapitokenuaa/(.*)$",
 "destination": "externalapitoken",
 "target": "$1"
 },
 {
 "authenticationType": "none",
 "csrfProtection": false,
 "source": "^/externalapitokennone/(.*)$",
 "destination": "externalapitoken",
 "target": "$1"
 },
 {
 "source": "^(.*)$",
 "target": "$1",
 "service": "html5-apps-repo-rt",
 "authenticationType": "xsuaa"
 }
 ]
}

Northwind API calls are executed successfully:

var aData = jQuery.ajax({
 type: "GET",
 contentType: "application/json",
 url: "northwinduaa/V2/Northwind/Northwind.svc/Customers",
 dataType: "json",
 async: false,
 success: function (data, textStatus, jqXHR) {
 alert("Success to post. Success callback.");
 }
 }) 

The call to the external API with OAuth2ClientCredentials fails with HTTP 500 "Internal Server Error":

var aData = jQuery.ajax({
 type: "POST",
 contentType: "application/json",
 url: "externalapiuaa/RESTful/json/Search",
 dataType: "json",
 async: false,
 data: JSON.stringify(oAPISearchObject),
 success: function (data, textStatus, jqXHR) {
 alert("Success to post. Success callback.");
 }
 }) 

The call to external API's token retrieval endpoint fails with HTTP 403 - Forbidden although debugging the API in SAP API Management, I can see the API is hit and access token is generated.

var aData = jQuery.ajax({
 type: "POST",
 contentType: "application/x-www-form-urlencoded",
 url: "/externalapitokenuaa",
 timeout: 0,
 async: false,
 data: oOauthTokenRetrievalPayload,
 success: function (data, textStatus, jqXHR) {
 alert("Success to post. Success callback.");
 }
 }) 

The API does not need API Key. "odata_gen" was used as WebIDEUsage so that Business Application Studio could see these destinations; but it wasn't much help as there is no convenience feature for generating code for this use case. And the above requests test OK with Postman.

After this long post, can I ask if anyone has an idea why the API calls are failing. Is there a sample application which showcases this scenario, i.e. accessing OAuth2 protected APIs from SAPUI5 where credentials are kept secure by the Destination service?

Kind Regards

[sucheno]

Hi serdar.simsekler,

Did you try using Authentication as OAuth2JWTBearer for External API destination ?

It should automatically manage the JWT based for all calls via this destination based on the provided client ID, secret and token service URL configuration

I am not sure about OAuth2 Token retrieval destination, If you you are using this to get the token explicitly via separate service call from UI to pass to above destination, You might consider to remove it if above destination works. If you still need this destination, you might try OAuth2JWTBearer authentication as well.

Regards,

Suchen.