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>

/wp-content/uploads/2013/08/1_256042.png

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

2.PNG

And when authenticated you receive data from the backend

3.PNG

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

To report this post you need to login first.

16 Comments

You must be Logged on to comment or reply to a post.

  1. Frank Hasemann

    perfect njall. i think we will have the opportunity to go deeper into details in our training here in hamburg (30.09 – 02.10.2013), also for all other interested people… further informations, contact us/me.

    (0) 
      1. huang kaiwei

        HI: Njal

               I have a question about SAPUI5, Can you give me some advice.


             I want to  create custom login page by sapui5 in Eclipse,When login page user name and          password and SAP user name and password are the same, just go to the next page.

            Please tell me how to do

                Best regard!

        (0) 
      2. huang kaiwei

        HI: Njal

               I have a question about SAPUI5, Can you give me some advice.


             I want to  create custom login page by sapui5 in Eclipse,When login page user name and          password and SAP user name and password are the same, just go to the next page.

            Please tell me how to do

                Best regard!

        (0) 
    1. Chandu Valluri

      Hi Frank,

      I am new to SAPUI5 and very much interest to learn SAP Mobile technology.

      I am currently searching for which one is best like SUP, SAPUI5 and etc..

      Please let me know which SAP Mobile technology is better and simple to develop the app.

      What exactly are the differences among SAP SUP, SAPUI5, Neptune, & PhoneGap.

      As per my understanding PhoneGap is a framework where we can develop hybrid applications irrespective of mobile platforms.

      Please let me know how can I start my SAP Mobile applications.

      Thanks & Regards,

      Chandu V

      (0) 
      1. Frank Hasemann

        Hi Chandu,

        as you can see i would recommend to have a closer look at the neptune software Neptune Application Designer (short: NAD) to develop mobile applications.

        for slightly insight:

        • SUP (now SMP for SAP Mobile Plattform) is more than a tool, it`s a MEAP (read more here…http://scn.sap.com/community/developer-center/mobility-platform/blog/2012/10/24/meap-have-you-heard-about-it)
        • SAPUI5 is a framework (like an HTML5 transformer to get nice looking Usier interfaces on your SAP Backend-Business Processes/Logic)
        • Neptune is a development plattform, helping you to get directly conncted to your SAP Backend-Process/Logic and bring up nice looking UI`s for smartphones, tablets and also desktops. therefore neptune is using integrated frameworks for JQuery mobile and also SAPUI5 is included
        • PhoneGap is like a transformer to make hybrid web apps (where you can use special functionality from your device like camera, scanner… within your app)

        For my opinion the easies way to start is use neptune (download trial version from their homepage and follow the Part I, II and III examples in the blogs from Ralf – see my followers list.

        hope that helped you a bit

        regs

        frank

        (0) 
    1. Njål Stabell Post author

      Thanks Alessandro,

      I had to create the github repository when I wrote this blog (SCN does not like zip or js files 🙂 )

      A lot of new stuff to cope with for old timers like myself. Even got a twitter account now!

      Guess my grey ABAP hair is growing longer  😉

      (0) 
  2. Angel Marcunez

    Hello Njål Stabell. Your advice is very interesting. However, I’m trying to use the sapui5_netweaver_logon.js, but i have several problem with it. I want to ask to you where I could find the necessary resourse to run this script? I can see in your example that you put a folder called sapui5 and sapui5_m1.hmtl file. Also, I want to ask to you which version of jquery did you work? I hope you could help me.

    Regards

    (0) 
    1. Andreas Sulejewski

      The following is the requirement to use the sapui5_netweaver_logon.js:

      *Use default settings in /neptune/native node – if you have not changed the nodes in the SICF transaction this would be ok. Very important is the Login Class on the native node. Since it contains valuable info for the logon to work.

      *The Application you are exporting, should be a SAPUI5 application. Using the sap.m library.

      *You need to have the SAPUI5 library manually copied into your Phonegap Export folder. One advice is to delete all *dbg* files to keep the library as small as possible.

      *Adjust the bootstrap loader in the index.html file to the correct SAPUI5 path.

      Also documented here:

      http://neptune-software.com/documentation/neptune-phonegap-export/sapui5-hybrid-application/

      (0) 
    2. Njål Stabell Post author

      Hi Angel,

      Sorry for the late reply. As Andreas said this script was optimized for Neptune Apps so you need to remove the code for the loginstaus switch in the ajax success as that is a Neptune specific header value on the response.

      I used the 12.1 SAPUI5 version and these files are located in the SAPUI5 folder.

      In the header of the index file you will need to add something like this:

      <script id=”sap-ui-bootstrap” type=”text/javascript”

      src=”sapui5/resources/sap-ui-core.js”

      data-sap-ui-theme=”sap_bluecrystal”

      data-sap-ui-libs=”sap.m,sap.viz”>

      </script>

      <link href=”neptune/public/application/order_management/css/app.css” type=”text/css” rel=”stylesheet” />

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

      Hope that helps

      (0) 
      1. Madhumitha S

        Hi ,

        Your blog was useful .

        When i tried implementing your code , nothing happened .

        My doubt is Will SAP UI 5 convert all Odata calls into ajax calls .

        Because i have not explicitly used jQuery.ajax() calls in my code .

        But i have used

        var oModel = new sap.ui.model.odata.ODataModel(serviceUrl,true);

        and bound the Odata result to various SAP UI 5 controls .

        My question is irrespective of whether i have made explicit ajax calls , will SAP UI 5 framework convert  all Odata calls into AJAX call

        The below global  AJAX handlers are not getting called when i  dont make explicit ajax calls.

        $(document).ajaxSuccess(function(event, request, settings) {

        });

        // Global Ajax Error

        $(document).ajaxError(function(event, request, settings) {

         

        });

        (0) 
        1. Njål Stabell Post author

          Sorry for the late reply, I have been travelling for the last month and a half 🙂

          You are right that the solution proposed is based on running jQuery ajax requests. At Neptune we don’t use GW and OData but native json as models that we fetch through jQuery ajax calls.

          I guess you will have to find another global method to catch the status of the server response for OData.

          BR

          Njål

          (0) 
  3. vinay bhagat

    Hi,

    Can any one help me.

    Using Ajax call how can i get the odata from SAP URL. As per some of blog i found i have to set header and csrf token.But i haven’t idea how it will execute.

    If possible then can any one help me out to GET the data from SAP URL.

    (0) 

Leave a Reply