Hi Community,
What is an app without a logged in user to roam around an consume your services?
Nothing, exactly!
But when we finally have our logged in user to use the app, we also want to display his/her user information.
Which could be done like the example below for instance:
Above example is a combination of the following two UI5 controls:
An SAPUI5 Tool Header: Samples - Demo Kit - SAPUI5 SDK (ondemand.com)
An SAPUI5 Avatar: Samples - Demo Kit - SAPUI5 SDK (ondemand.com)
Back then on the SAP Cloud Platform NEO Environment, there was the possibility to consume the “userapi” service by adding a route to the “neo-app.json” file. This allowed the developer to retrieve the current logged in user information such as name, firstName, lastName, displayName and email.
But then a new era arose, the SAP Cloud Platform Cloud Foundry Environment era. Which brought so many possibilities with it, that developing became even more fun! But there was one small catch bound to this Cloud Foundry Environment. We developers lost our NEO “userapi” … But we always find a solution for everything and very often they are shared on the SAP Community. But it meant that an alternative with some custom developments were required to retrieve the necessary information.
Some solutions shared by the SAP Community members to retrieve the current logged in user information can be found here:
But like we all grow in our development skills, the technologies and features do too.
The SAP Approuter NPM Package was extended with a “User API Service”.
All required information and more about this service can be found here:
@sap/approuter - npm (npmjs.com)
This also means there is no need to describe this “Approuter User API Service” further in this blog post.
But we can build a very small and quick demo app together!
Let’s open the SAP Business Application studio!
Open a terminal in your BAS development workspace and execute the following command to initialize a basic multitarget application:
Name the project “approuterUserInformation”.
This generated your project, which is quite empty at the moment:
Enter the project by executing the following command and create an “approuter” directory and access it as well:
Inside this “approuter” directory we execute the following command to initialize npm:
Just use the default values for the configuration of the command above.
Once generated add the “start” script inside your “package.json” file so it looks like this:
Finally, we install the SAP Approuter NPM package by executing the following command:
If I’m not mistaken the SAP Approuter User API Service is available since version “9.1.0”.
Create an “xs-app.json” file by executing the following command:
Add the following configuration to it:
As you can see the route will consume the “sap-approuter-userapi” service to return the logged in user information. Do note the "authenticationMethod" property is set to "route" so authentication is enabled for the desired routes.
The “source” uses the following regex “"^/user-api(.*)” which should be completed in either one of the following ways to retrieve the user information:
Both endpoints return firstName, lastName, email and name. While the “/currentUser” endpoint also returns the displayName.
Running the Approuter and requesting the endpoint in one of the two ways described above would not work.
It would return the following error:
"GET request to /user-api/currentUser completed with status 500 OAuth2 requires "clientid" option."
The reason for that is because we are still missing an “xsuaa” service instance.
Login to Cloud Foundry via the Business Application Studio or by using the BAS terminal cf cli.
Next you create an “xsuaa” service instance via the BAS command pallet (CTRL + Shift + P) and you type “create a new service instance” (choose a name for the “xsuaa” service instance with the “application” service plan) or by using the cf cli on the terminal, or even via the SCP Cockpit.
Once created, you bind the “xsuaa” configuration via the command pallet “bind a service to locally run application”, choose your “approuter” directory as destination and you will see a “.env” file will be created. Rename the “.env” file to “default-env.json” and correct the JSON content. Or use the terminal achieve the same result.
You will need the “default-env.json” file holding your “xsuaa” service configuration to be able to perform authenticated requests.
Time to run your Approuter by executing the following command:
Remove the “/index.html” part of the URL and type the following like configured in the Approuter:
As you can see you get the expected response:
Now try the attributes URL-endpoint:
Once more we receive the desired response from our Approuter its User API Service:
Like I mentioned before it was very easy to use the “userapi” on the NEO Environment, and we had some extra developments to achieve the same result in the Cloud Foundry Environment.
But now with this SAP Approuter upgrade we only need our “xsuaa” service instance and the right Approuter version and configuration, so we can easily consume the desired user information inside our applications.
I hope this can ease your developments and needs to retrieve the logged-on user information.
Best regards,
Dries Van Vaerenbergh
What is an app without a logged in user to roam around an consume your services?
Nothing, exactly!
But when we finally have our logged in user to use the app, we also want to display his/her user information.
Which could be done like the example below for instance:
Above example is a combination of the following two UI5 controls:
An SAPUI5 Tool Header: Samples - Demo Kit - SAPUI5 SDK (ondemand.com)
An SAPUI5 Avatar: Samples - Demo Kit - SAPUI5 SDK (ondemand.com)
Back then on the SAP Cloud Platform NEO Environment, there was the possibility to consume the “userapi” service by adding a route to the “neo-app.json” file. This allowed the developer to retrieve the current logged in user information such as name, firstName, lastName, displayName and email.
But then a new era arose, the SAP Cloud Platform Cloud Foundry Environment era. Which brought so many possibilities with it, that developing became even more fun! But there was one small catch bound to this Cloud Foundry Environment. We developers lost our NEO “userapi” … But we always find a solution for everything and very often they are shared on the SAP Community. But it meant that an alternative with some custom developments were required to retrieve the necessary information.
Some solutions shared by the SAP Community members to retrieve the current logged in user information can be found here:
- How to get the email of the logged in user in Cloud Foundry | SAP Blogs
- Show current user details in Cloud Foundry apps with IAS | SAP Blogs
- Retrieve logged-in user details in Cloud Foundry Using Web IDE | SAP Blogs
But like we all grow in our development skills, the technologies and features do too.
The SAP Approuter NPM Package was extended with a “User API Service”.
All required information and more about this service can be found here:
@sap/approuter - npm (npmjs.com)
This also means there is no need to describe this “Approuter User API Service” further in this blog post.
But we can build a very small and quick demo app together!
Let’s open the SAP Business Application studio!
Consuming the SAP Approuter - User API Service
Open a terminal in your BAS development workspace and execute the following command to initialize a basic multitarget application:
yo basic-multitarget-applicationName the project “approuterUserInformation”.
This generated your project, which is quite empty at the moment:
Enter the project by executing the following command and create an “approuter” directory and access it as well:
cd approuterUserInformation && mkdir approuter && cd approuterInside this “approuter” directory we execute the following command to initialize npm:
npm initJust use the default values for the configuration of the command above.
Once generated add the “start” script inside your “package.json” file so it looks like this:
"start": "node node_modules/@sap/approuter/approuter.js"Finally, we install the SAP Approuter NPM package by executing the following command:
npm i @sap/approuterIf I’m not mistaken the SAP Approuter User API Service is available since version “9.1.0”.
Create an “xs-app.json” file by executing the following command:
touch xs-app.jsonAdd the following configuration to it:
{
"welcomeFile": "index.html",
"authenticationMethod": "route",
"routes": [
{
"source": "^/user-api(.*)",
"target": "$1",
"service": "sap-approuter-userapi"
}
]
}
As you can see the route will consume the “sap-approuter-userapi” service to return the logged in user information. Do note the "authenticationMethod" property is set to "route" so authentication is enabled for the desired routes.
The “source” uses the following regex “"^/user-api(.*)” which should be completed in either one of the following ways to retrieve the user information:
- /currentUser
- /attributes
Both endpoints return firstName, lastName, email and name. While the “/currentUser” endpoint also returns the displayName.
Running the Approuter and requesting the endpoint in one of the two ways described above would not work.
It would return the following error:
"GET request to /user-api/currentUser completed with status 500 OAuth2 requires "clientid" option."
The reason for that is because we are still missing an “xsuaa” service instance.
Login to Cloud Foundry via the Business Application Studio or by using the BAS terminal cf cli.
Next you create an “xsuaa” service instance via the BAS command pallet (CTRL + Shift + P) and you type “create a new service instance” (choose a name for the “xsuaa” service instance with the “application” service plan) or by using the cf cli on the terminal, or even via the SCP Cockpit.
Once created, you bind the “xsuaa” configuration via the command pallet “bind a service to locally run application”, choose your “approuter” directory as destination and you will see a “.env” file will be created. Rename the “.env” file to “default-env.json” and correct the JSON content. Or use the terminal achieve the same result.
You will need the “default-env.json” file holding your “xsuaa” service configuration to be able to perform authenticated requests.
Time to run your Approuter by executing the following command:
npm run startRemove the “/index.html” part of the URL and type the following like configured in the Approuter:
/user-api/currentUserAs you can see you get the expected response:
{
"firstname": "Dries",
"lastname": "Van Vaerenbergh",
"email": "myEmailAddress",
"name": "myEmailAddress ",
"displayName": "Dries Van Vaerenbergh (myEmailAddress)"
}
Now try the attributes URL-endpoint:
/user-api/attributesOnce more we receive the desired response from our Approuter its User API Service:
{
"firstname": "Dries",
"lastname": "Van Vaerenbergh",
"email": "myEmailAddress ",
"name": "myEmailAddress "
}Wrap up
Like I mentioned before it was very easy to use the “userapi” on the NEO Environment, and we had some extra developments to achieve the same result in the Cloud Foundry Environment.
But now with this SAP Approuter upgrade we only need our “xsuaa” service instance and the right Approuter version and configuration, so we can easily consume the desired user information inside our applications.
I hope this can ease your developments and needs to retrieve the logged-on user information.
Best regards,
Dries Van Vaerenbergh
- SAP Managed Tags:
34 Comments
