Skip to Content
Author's profile photo Paul Todd

Going mobile with the UserInfo API

In the previous posting ( we created an application that would get the user details via the documented UserData API. This little application was simple but showed how to easily get the logged in user details so they could be used within a service. Now we will take the same idea and create a mobile application that can consume these API’s through HCP Mobile Services (HCPms)

The first thing we need to do however is change the authentication mechanism used to access the online version of the application. At the moment it is using the default login options which for SAP employees will be SSO and for others it will be SAML. To force the application to use SAML we will create a new file called “.xsaccess” (as documented at which will contain:


  “exposed” : true,               // Expose data via http

  “authentication” :


            “method”: “Form”



This says the authentication method of the app will be SAML rather than the default.


Save this file into the root of the project.

After saving the file, remember to redeploy the application so that the new access method is made available to HCP. Check the application version is incremented as a result of the new deployment.

When you access your application you should now be prompted with a form to login – this is the SAML form. We need to do this so that HCPms can share the SAML token with the HTML application since they are both authenticated via SAP Identity Provisioning (IDP). There are limited ways we can share identity in HCPms and the easiest and most widely adopted method is SAML.

This means that the user who logs into HCPms will have their identity passed to the HTML application and this will then give authorization to access the UserInfo API and the logged in user (whose identity was obtained from the mobile device) details will be retrieved. The user details will then be returned to the application on the device and displayed on the mobile screen.

Start by logging into your HCP Trial account and accessing the HCPms services in the services panel. Click on the HCPms (now called “Development and Operations”) tile to open the Mobile Services cockpit.

Select the “Applications” panel




Click on the new button (highlighted on the right) to create a new application definition

You will now be presented with a new screen where the application can be customized. We will need to be able to access the user api from the mobile application so we need to create a specific application connection to the exposed HTML application. Click on the “Back End” tab to configure a backend connection.


Remember where we made a note of the application URL –


We take this and append the string  “/services/userapi/currentUser” to get the following URL.

This is the URL that is exposing the user info for the logged in HCP user.


Change the proxy type to Internet since we not using SAP Cloud Connector and finally change the “Authentication Type” to use ApplicationToApplicationSSO so the SAML token is preserved.

Save the changes and this completes the application definition that is the bridge between the mobile device and user and the backend system.

This completes part 1 where we create the application definition. In part 2 below we now create a mobile application and use that to access the application definition on HCPms which will then access the UserInfo API to get the user info.

We will now go ahead and create a simple application that can be used as a hybrid application that will access the user info api.

Start WebIDE and create a new project from a template. Choose the “SAPUI5 Mobile Kapsel Starter Application”


Click next and fill in the project details, setting the project name to UserInfoHybrid


Click next and customize the main view


Set the view type to JavaScript and set the view name to UserInfoView.

Click Finish to create the new hybrid application project.

With the application now created we will now need to make a few changes to the code to display the user info in the UI.

Start by changing the index.html to include the “sap.ui.commons” UI library and also we want to enable complex data binding so the textview elements will be updated when the model changes.


Save the changes and we will now update the view with the new controls.

Open the UserInfoView.view.js

Replace the createContent with the the following:

    createContent: function(oController) {
        return new sap.m.Page({
            title: "Title",
            content: [
                new sap.ui.commons.TextView({wrapping: true,width: "100%",text: "Hello {/firstName} {/lastName}"}),
                new sap.ui.commons.TextView({wrapping: true,width: "100%",text: "\nSTATUS: {/status}"})

Note that we have added two TextView controls to the Page object.


Save the changes and we will now edit the controller to create, load and bind a JSON model to the view.

Open the UserInfoView.controller.js and replace the onInit method (which is commented out) with the following code

        onInit: function() {
            var oModel = new sap.ui.model.json.JSONModel();
            /* Assign the model to the view */
            /* Load the data */
            var url = "https://" + UserInfoHybrid.devapp.smpInfo.server + "/" + UserInfoHybrid.devapp.smpInfo.appID;
            /* Handle the response */
            oModel.attachRequestCompleted(function onCompleted(oEvent) {
                if (oEvent.getParameter("success")) {
                    this.setData({status: "Success"}, true); // note we merge the data indicated by the 2nd parameter
                else {
                    var error  = oEvent.getParameter("errorObject");
                    if (error && error.textStatus) {
                        this.setData({status: error.textStatus});
                    } else {
                        this.setData({status: "Unknown internal error"});                  

This code is similar to the previous blog where we create a model, assign it to the view and then load the model from a URL. The most important difference is how we construct the URL.

We now need to access the default connection in your application definition on HCPms. To do this we use the HCPms tenant server name from the logon plugin context info and the application ID to create a URL that maps to the default connection in the application definition.


Save the changes and then you will probably need to alter the devapp file to setup the correct properties for the Kapsel Logon plugin. The default code is not setup correctly since when I built this the project.json file was not correctly setup due to the fact I was not using the Hybrid Application Toolkit. This step may not be neccessary when using HAT.

The original code looks like the following:

We need to replace the $.getJSON code with the following code

          /* START NEW CODE */
            this.smpInfo.server = "hcpms-<I/P/C/S account>";
            this.smpInfo.port = "443";
            this.smpInfo.appID = "";
            var context = {
                "serverHost": this.smpInfo.server,
                "https": true,
                "serverPort": this.smpInfo.port
            this.devLogon = new UserInfoHybrid.devlogon();
            this.devLogon.doLogonInit(context, this.smpInfo.appID);     
            /* END NEW CODE */          

Note that it is very important you change the server to point to your HCPms instance. This should be as indicated above, note the rest of the address is if you are using a trial account. The smpInfo property on the devapp object should be retained as it will be used in the controller for the main view to construct the URL to get the user data.


Save the changes.  The application is now completed!

You can run the application with HAT if you have it installed.

I decided to do the build from the command line. You will need to export the project from WebIDE to do this.

First create the project:

cordova -d create UserInfoHybrid UserInfoHybrid


Replace the www folder in the UserInfoHybrid folder with the UserInfoHybrid folder exported WebIDE. Remember to rename the folder from UserInfoHybrid to www. Also Remember inside the www folder to include the mobile version of SAPUI5.


Next you will have to login to HCP. This will be your SAP SCN username – the same name you use to login to HCP




Then finally you will need to disable or create a pin passcode to stop unauthorized people accessing the application.

For this example choose “Disable Passcode” and click “Submit”


The view and controller are created when the application is launched and the values for the user obtained view the call to load the URL. The firstname and lastname are displayed on the screen. These values were extracted from the backend using the userinfo API. When the call to the backend completed the result was loaded into the json model. Of course if you we building an offline application then you would save this model to persistant storage such as the local storage or into the encrypted storage so that it is available offline.

That concludes how to get the user info from the backend. You will find out however that this times out really quickly when the SAML token expires. In the next post we will look at how to handle SAML in online and offline scenarios which is a problem faced by many partners and customers writing mobile applications that mashup lots of services.

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Abdelkader Abdelaziz
      Abdelkader Abdelaziz

      Thanks Paul for the post, very usuful use case !!

      well done.