Apache Cordova Mobile Application Integration With SAP Cloud Platform Identity Authentication Service

Introduction:

Apache Cordova:

Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies – HTML5, CSS3, And JavaScript for cross – platform development.  More information please visit the website: https://cordova.apache.org

SAP Cloud Platform Identity Authentication Service:

Secure authentication and single sign-on for users in the cloud.SAP Cloud Platform Identity Authentication provides you with simple and secure cloud-based access to business processes, applications, And data. It simplifies your user experience through state – of -the – art authentication mechanisms, and secure in use – on and on – the premise integration, and work the self – service options.More information can be found at: https://help.sap.com/viewer/6d6d63354d1242d185ab4830fc04feb1/Cloud/en-US/d17a116432d24470930ebea41977a888.html

Ok, let’s start.

Goal:

Implement login in mobile application.

Step 1:

Create an app with the Cordova command.

cordova create MyApp

Step 2:

Create and publish a SAPUI5 Application on SAP Cloud Platform Neo environment.I use my trial account to deploy it. If nothing changes, this application needs authentication to access it.And deploy’s url automatically jumps to url/index.html after a successful login.e.g.:https://mobile-i320993trial.dispatcher.hanatrial.ondemand.com will became https://mobile-i320993trial.dispatcher.hanatrial.ondemand.com/index.html

Note: only after the login is successful the bowser will jump to index.html, which will be the only basis for us to verify that the mobile login is successful.

Step 3:

In the code project MyÅpp app install a plugin cordova-plugin-inappbrowser. More information please visit: https://github.com/apache/cordova-plugin-inappbrowser.

Cordova plugins add cordova - plugin - inappbrowser

This plug-in can launch an in browser in the mobile application. We will use this plug-in open https://mobile-i320993trial.dispatcher.hanatrial.ondemand.com and add a listener to listen for url changes to implement login verification.When the address bar changes to index.html, we know that the mobile app has logged in successfully.

So in the folder MyApp/ WWW /js/index.js add codes blow:

OnDeviceReady () {
    const loginUrl = 'https://mobile-i320993trial.dispatcher.hanatrial.ondemand.com';

    const inApp = cordova.InAppBrowser.open(
      loginUrl,
      '_blank',
      'location=no,toolbar=no',
    );
    inApp.addEventListener('loadstart', (event) => {
      const pingUrl = event.url;
      if (pingUrl.indexOf('index.html') >= 0) {
        inApp.close();
        alert("login success!");
      }
    });
  },

Step 4:

Use Apache Cordova to build your app.How to build you can check with the link:https://cordova.apache.org/docs/en/latest/guide/cli/index.html#build-the-app .

Then running the app

This simple integration application is done.

Conclusion:

This integration can use an application host on the SAP Cloud Platform as the Authentication standard to realize mobile phone login to the SAP Platform Identity Authentication Service.In this way, an application integrated with the SAP Platform Identity Authentication Service login can be realized.

Hope you like it.

Regards,

Gary