How to get authenticated user information with CAP in three different ways – Directly from the UI (HTML5 app)

Prerequisite

To follow-up with this blog post you must have read and completed the post: Setup project for development.

Configure the User API Service

The first approach to get the authenticated user information is the simplest as it does not rely on any backend service to be consumed and can be utilized directly in an HTML5 application implemented as the front-end (UI) of the solution.

That’s because the application router (AppRouter) exposes a user API that returns the details of the users who are logged in to the application.

You can learn the details of such API in this page from the official SAP BTP documentation.

Now, let’s make use of it to achieve our goal. For that, we just need to add a new route to the xs-app.json file (prepared via the instructions in the setup project for development post.

Add the following route configuration as the second route in the routes list of your xs-app.json file:

        {
            "source": "^/user-api(.*)",
            "target": "$1",
            "service": "sap-approuter-userapi"
        },

By doing so, your xs-app.json file should now look like this:

Figure 1 – User API Service added to xs-app.json

Adjust the Index Page

The User API Service provides two endpoints:

• /currentUser
• /attributes

So, let’s just set them as links in the index.html page by modifying these two lines:

                    <li><a href="/user-api/currentUser">1a. Using the <b>/currentUser</b> endpoint</a></li>
                    <li><a href="/user-api/attributes">1b. Using the <b>/attributes</b> endpoint</a></li>

By doing so, your index.html file should now look like this:

Figure 2 – New links in index.html

Test the Approach

In the Terminal move to the app directory (cd app), if not yet positioned in there, and run the command:

npm run start

After a few seconds you should see a pop-up in the bottom-right corner of Business Application Studio with a button to open the application in a new tab:

Figure 3 – Pop-up to open app in new tab

Click on that button to access the application’s index page: at this point the AppRouter will execute the OAuth 2.0 authentication flow (login) and display the index.html page:

Figure 4 – Application index page

Click on the first link (the /currentUser endpoint) and the user information should be displayed in JSON format like demonstrated below:

Figure 5 – Information fetched by the /currentUser endpoint

The “name” attribute is the “username” utilized for login and the “scopes” are basically the “roles” that are assigned to the user in the context of the application. In this case  “openid, uaa.user” just means that the user is a valid platform user that’s authenticated. Those scopes have practically no effect in terms of authorization for an application as every valid user in the platform has them assigned by default.

Now, use your browser’s back button to go back to the index page and click on the second link (the /attributes endpoint) and another set of information should be displayed in JSON format like demonstrated below:

Figure 6 – Information fetched by the /attributes endpoint

You’ll notice that the only attribute that’s not fetched by that endpoint is the “displayName“. So, if, in your application, you don’t need that attribute you can use this endpoint instead of the first.

And that concludes the steps to get the authenticated user information directly from an HTML5 app.

Conclusion

After having gone through the steps of this blog post you should have successfully fetched authenticated user information in an HTML5 app leveraging the User API Service from the application router. The next step would be to try one of the other different approaches proposed in this blog posts series (if not yet done).

Please, do not hesitate to submit your questions in SAP Community through the Q&A tag link: https://answers.sap.com/index.html

Other blog posts in this series

• Using the CAP request object
• Using the XSUAA API