Authentication with SAP Backend for SAPUI5 Hybrid Phonegap apps

From experience I know that a lot of developers struggle when they try to set up authentication to a SAP back end from a Phonegap application.  The reason for this is that there are some big differences between a local app on a device and using a browser where you have standard SAP authentication mechanisms such as the basic authentication popup from the ICF framework or enterprise portal and NWBC logon functionality.

I will walk you through the basics of a solution which I find to be effective with SAPUI5 apps. Even though this was originally created for Neptune apps I believe it should be reusable for oData gateway based apps as well. I will also share a SMP Cloud version with onboarding functionality when that is ready and I’ll try to convince SAP Mentor Roel van den Berge to try it out with Fiori as well 🙂

Here is the javascript https://github.com/nstabell/NeptuneSoftware/blob/master/sapui5_netweaver_logon.js that includes all the code you need for a basic logon to a Netweaver system (Note that there are some Neptune specific responses here to detect password change events etc. Remove thos if you do not use Neptune)

In a SAPUI5 Phonegap app all your HTML, css and javascript resources are stored locally on your device. Communication with the backend is performed through HTTPS (You should never use HTTP in a productive solution for obvious security reasons) and in this example by jQuery ajax calls with json data.

When we communicate with the SAP ICF framework the server will respond with different HTTP response status codes. (For a list see this List of HTTP status codes – Wikipedia, the free encyclopedia )

The one we focus on here is the 401 unauthorized code that tells our ajax call that the user is unauthorized. In the script we globally intercept any ajaxerror and call a function that prompts for user credentials if SAP requires authentication.

To catch an ajax error we use the following code:

// Global Ajax Error
$(document).ajaxError(function(event, request, settings)

And from the request we get the status and can use a switch to check for the cases.

switch (request.status)

For 401 we will pop the logon dialog that prompt for username and password:

  case 401:
    UI5Logon();
    break;

The UI5Logon function:

function UI5Logon() {
     oLogonDialog.open();
}

We want to store the credentials in a session storage and update the HTTP request header with the Basic Auth information when the user has entered his credentials

function UI5LogonPutLS() {
// Build Auth String
var tok  = inUserName.getValue() + ':' + inPassword.getValue();
var hash = Base64.encode(tok);
var auth = "Basic " + hash;
// Save to Local Storage
$.sap.require("jquery.sap.storage");
var UI5Storage = $.sap.storage(jQuery.sap.storage.Type.session);
UI5Storage.remove("Auth");
UI5Storage.put("Auth",auth);
}

There are some more functionality such as base64 encoding in the script but you can read that from the code.

Add the file in your phonegap zip (for the Adobe build service) and add a reference in the header of your html files

<script type=”text/javascript” src=”sapui5_netweaver_logon.js“></script>

Run the app and you should get a Dialog popup when you receive a 401 response:

And when authenticated you receive data from the backend

This was just a mockup app  and if you wish to create a nice SAPUI5 app (based on Neptune) you can have a look at this blog

Here is an example of an HR app template to show the possibilities with SAPUI5:

For Desktop

For Mobile browser

Happy SAPUI5 coding