Getting User Information in BTP Launchpad

[MioYasutake]

Introduction

Sometimes, we need logged-in user information (such as ID, first name or last name) in our apps.
You can use User API Service of approuter for this purpose if your app is working behind an approuter. Here is a quote from the document:

The application router exposes a user API that returns the details of the user who is logged in. This API supports two endpoints: /currentUser and /attributes. The /currentUser endpoint returns all details of logged in users, while the /attributes endpoint returns the main user properties.

If you build an application using Managed Approuter which is available in BTP Launchpad, all you have to do is just to add a route to xs-app.json file. In this post, I'm going to demonstrate how you can show user info in a simple Fiori app in BTP Launchpad.

 

Steps

1. Generate an UI5 project


2. Add a route to xs-app.json


3. Write controller code to get user info


4. Deploy to the Cloud Foundry

 

1. Generate an UI5 project

I use easy-ui5 to generate a project.

yo easy-ui5 project

Chose "SAP Launchpad service" for the question "On which platform would you like to host the application?"

 

2. Add a route to xs-app.json

Add the following route to webapp/xs-app.json file.

    {

      "source": "^/user-api/currentUser$",

      "target": "/currentUser",

      "service": "sap-approuter-userapi"

    },

The endpoint /user-api/currentUsers returns user info in the following structure.

{

   "firstname": "John",

   "lastname": "Doe",

   "email": "john.doe@sap.com",

   "name": "john.doe@sap.com",

   "displayName": "John Doe (john.doe@sap.com)"

}

 

3. Write controller code to get user info

Add the following code to the controller. Here I'm loading user data into a JSON model called "userInfo". Using this model you can retrieve user data or bind it to the view.

sap.ui.define([

    "demo/userapi/controller/BaseController",

    "sap/ui/model/json/JSONModel"

], function (Controller, JSONModel) {

    "use strict";



    return Controller.extend("demo.userapi.controller.MainView", {

        onInit: function () {

            this.getUserInfo();

        },

        getUserInfo: function () {

            const url = this.getBaseURL() + "/user-api/currentUser";

            var oModel = new JSONModel();

            var mock = {

                firstname: "Dummy",

                lastname: "User",

                email: "dummy.user@com",

                name: "dummy.user@com",

                displayName: "Dummy User (dummy.user@com)"

            }; 



            oModel.loadData(url);

            oModel.dataLoaded()

            .then(()=>{

                //check if data has been loaded

                //for local testing, set mock data

                if (!oModel.getData().email) {

                    oModel.setData(mock);

                }

                this.getView().setModel(oModel, "userInfo");

            })

            .catch(()=>{               

                oModel.setData(mock);

                this.getView().setModel(oModel, "userInfo");

            });

        },      

        

        getBaseURL: function () {

            var appId = this.getOwnerComponent().getManifestEntry("/sap.app/id");

            var appPath = appId.replaceAll(".", "/");

            var appModulePath = jQuery.sap.getModulePath(appPath);

            return appModulePath;

        },        



    });

});

Two things to note:

1. In the BTP Launchpad, you need to add base URL (something like '/6933944e-429d-4c98-8fb1-24d04de767f7.userapiservice.demouserapi/~010821071004+0000~') before the URL you're actually calling. Without the base URL, the call will fail with Not Found (404) error. This is not specific to User API, but applies to any other URLs.


2. In the local environment User API is not available so I've set mock data just to check if the view is correctly displayed.

I've created a simple view to display user info.

 <mvc:View controllerName="demo.userapi.controller.MainView"

  displayBlock="true"

  xmlns="sap.m"

	xmlns:l="sap.ui.layout"

	xmlns:f="sap.ui.layout.form"  

  xmlns:mvc="sap.ui.core.mvc">

  <App id="idAppControl" >

    <pages>

      <Page title="{i18n>title}">

        <content>

          <VBox class="sapUiSmallMargin">

            <f:SimpleForm id="SimpleFormDisplay354"

              editable="false"

              layout="ResponsiveGridLayout"

              title="User Info"

              labelSpanXL="3"

              labelSpanL="3"

              labelSpanM="3"

              labelSpanS="12"

              adjustLabelSpan="false"

              emptySpanXL="4"

              emptySpanL="4"

              emptySpanM="4"

              emptySpanS="0"

              columnsXL="1"

              columnsL="1"

              columnsM="1"

              singleContainerFullSize="false" >

              <f:content>

                <Label text="First Name" />

                <Text text="{userInfo>/firstname}" />

                <Label text="Last Name" />

                <Text text="{userInfo>/lastname}" />

                <Label text="Email" />

                <Text text="{userInfo>/email}" />

                <Label text="Display Name" />

                <Text text="{userInfo>/displayName}" />                                                

              </f:content>

            </f:SimpleForm>

          </VBox>

        </content>

      </Page>

    </pages>

  </App>

</mvc:View>

 

4. Deploy to the Cloud Foundry

Build and deploy the MTA project to the Cloud Foundry with the command below.

npm run deploy

After successful deployment, add the app to the Launchpad.
You can refer to my previous blog (Step6. Configure the Launchpad) for how to do this.
The app will show logged-in user info as below.

 

References

Document of User API Service
SAP Approuter – User API Service by vvdries#content:blogposts
SAP Tech Bytes: Approuter User API Service by dj.adams.sap