Skip to Content
Technical Articles
Author's profile photo Alessandro Biagi

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%202%20-%20New%20links%20in%20index.html

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%203%20-%20Pop-up%20to%20open%20app%20in%20new%20tab

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%204%20-%20Application%20index%20page

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%205%20-%20Information%20fetched%20by%20the%20/currentUser%20endpoint

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%206%20-%20Information%20fetched%20by%20the%20/attributes%20endpoint

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

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Ahmed Ali Khan
      Ahmed Ali Khan

      Damn, Its look quite easy now to find the logged in user by addy just 5 lines of code, Thanks a lot for sharing this.

      Author's profile photo Alessandro Biagi
      Alessandro Biagi
      Blog Post Author

      Hi Ahmed,

      Glad that you liked the approach!

      Best Regards,

      Alessandro

      Author's profile photo Aiman Zazani
      Aiman Zazani

      Hi, how can I resolve this issue when I clcik the link? im new to SAP, thank you so much!.

      Author's profile photo Alessandro Biagi
      Alessandro Biagi
      Blog Post Author

      It's hard to tell without knowing exactly what you did, so I assume you should have missed some step of the instructions.

      Please, make sure you have properly added this snippet to your xs-app.json in the right place for correct approuter configuration:

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

      The complete file must look exactly like this:

      Otherwise the /user-api won't be recognized by the approuter.