In the previous posting (http://scn.sap.com/blogs/pault/2016/05/24/reading-the-user-info-from-an-external-application) 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 https://help.sap.com/saphelp_hanaplatform/helpdata/en/a9/fc5c220d744180850996e2f5d34d6c/content.htm) 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
We call the application com.sap.userinfo and make it a hybrid type application. Set the name to Userinfo App though it does not really matter what it is called and set the security configuration to Form so SAML is used. "Form" allows us to share the identity with the HTML app.
Click “Save" to create the 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.
https://userinfo-i063124trial.dispatcher.hanatrial.ondemand.com/services/userapi/currentUser
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 */
this.getView().setModel(oModel);
/* Load the data */
var url = "https://" + UserInfoHybrid.devapp.smpInfo.server + "/" + UserInfoHybrid.devapp.smpInfo.appID;
oModel.loadData(url);
/* 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>trial.hanatrial.ondemand.com";
this.smpInfo.port = "443";
this.smpInfo.appID = "com.sap.userinfo";
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 hanatrial.ondemand.com 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 com.sap.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.
Change to the UserInfoHybrid folder that has been created and add the iOS platform
cordova -d platform add ios
Now add the login plugin as we need this to access the HCP infrastructure from the device via the HCPms services.
cordova -d plugin add kapsel-plugin-logon
Finally execute
cordova prepare
If you are using Android then you will need to run an additional step to build the application. This step updates the project files so that they can be used within Android studio.
cordova build android
However we will continue in iOS. In the platforms/ios folder, Open the project in xcode and run it.
You will be prompted to register with HCPms. Click the “Register" button in the top right. The host field is required, however the remaining fields should be left as default. You do not need to enter a username or password at this stage since this just registers the application on HCPms.
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 main app screen will be displayed if everything went correctly
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.
- SAP Managed Tags:
1 Comment
