SAP BTP: connecting a CAP backend to a Fiori app

[former_member847794]

Hello Community!

We are still testing the possibilities of the BTP before moving to real customer projects. We managed to setup a CAP application as a backend server, using CDS to reach HANA Cloud and an approuter to serve requests. These requests are authenticated via XSUAA service with OAuth2.0. Currently we can reach the endpoints via Postman with JWT-based authentication.

After this success, we tried to connect a frontend app to this service. As a first step we tried to generate a Fiori application via the template generator. When specifying a data service we chose the CDS app and it has been identified as an OData V4 service. However we got back an 'Authentication incorrect' error message when tried to login with the service username and password. I tried to modify the xs-security.json setup, leaving out the OAuth part, but the result was the same.

The xs-security.json is like this:

{
  "xsappname": "cloud2",
  "tenant-mode": "dedicated",
  "scopes": [
    {
      "name": "$XSAPPNAME.Admin",
      "description": "Admin"
    }
  ],
  "attributes": [],
  "role-templates": [
    {
      "name": "Admin",
      "description": "generated",
      "scope-references": [
        "$XSAPPNAME.Admin"
      ],
      "attribute-references": []
    }
  ],
  "oauth2-configuration": {
    "credential-types": [
        "binding-secret",
        "x509"
    ],
    "redirect-uris": [
        "https://*.cfapps.us10-001.hana.ondemand.com/**"
    ]
}
}

How should we solve this connection problem? Or we should change approach and forget the separated frontend/backend design?

Thanks for the answers!

András

[martinstenzig]

I would go with a combined Backend/UI approach. We assembled a template/step by step that gives you a good walk through of all the steps to get to a combined UI/backend app that is showing up as Fiori app and is stored in the HTML5 repo so you can consume it easily in WorkZone, Launchpad or whatever Portal version you are using. 🙂 The repo is available here: https://github.com/RizInno/cds-customer-stepbystep

[former_member847794]

Thank you for your answer and your great repo!

Our main intention for the separated UI/backend approach was that we need to provide a 'REST-like' interface for external services (like mobile apps, other data providers, etc.). In this this case, a combined UI/Backend approach still a viable solution? If yes, how would you suggest to setup a 'REST-like' interface?

Thanks again!

[martinstenzig]

andras.szogi You can build your own REST endpoint with creating a service and specifying protocol: 'rest' (see below).

@protocol: 'rest'
service Example @(path: '/exmpl'){...

If you want to get more sophisticated and i.e. go as far as providing API keys you should use something like the API Management service that I believe is now part of Integration Suite.

[SebastianEsch]

In addition to Martins answer, you can also use TokenExchange to access the Backend from your Fiori Application.

With two MTA Applications (A - Your Fiori App with a XSUAA service instance and B - Your CAP application with its own XSUAA instance) you have to create a Destination to forward the JWT Token from the Fiori Application to the CAP Backend.

First create a Service Key for the XSUAA instance of application B (your CAP Backend).

Then create the Destination as follows:

• Choose a name to identify your destination
• Set Type to HTTP
• Add a description
• Add the route of application B as the URL
• Select OAuth2UserTokenExchange as Authentication
• Add the Client ID from the service key you created in Step 1
• Add the Client Secret from the service key you created in Step 1
• Choose Token Service URL Type Dedicated if you don’t use multi-tenancy
• Add the Token Service URL from the service key you created in Step 1
• Add the additional property HTML.DynamicDestination with value true

For your REST-like interfaces you have to think how they should authenticate against your CAP backend.

[daniel_schlachter]

great answer, here is the documentation related to it as well:

https://help.sap.com/docs/connectivity/sap-btp-connectivity-cf/oauth-user-token-exchange-authenticat...