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 startAfter 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
