Using Neptune as a third-party development tool fo...

Former Member · ‎05-21-2013

The SAP Mobile Platform Cloud Edition is a new offering from SAP for an on-demand Mobile as a Service solution. For companies, the security issues regarding mobilizing backend systems, is often a showstopper when introducing enterprise mobility. Many of our customers could benefit from this new solution, so I decided to see how it fits with ABAP HTML5 applications created with the Neptune Application Designer.

After a quick conversation with Jens Koerner at SAP I felt sure that this was feasible. Two days later we had an app with CAPCHA onboarding to a trial version of SMP Cloud connected to our ECC system. In this blog I’ll outline the steps needed for setting this up and if you are a Neptune Developer feel free to request our new Neptune SMP Cloud template app to speed up deployment.

First, you need access to an SMP Cloud account if you just want to test it you can get a free trial from SAP. The UI and usability of the SMP Cloud is great and most of the features are self-explanatory.

Start by creating a new Application.

Then set up your backend and Authentication settings using the wizard. I chose to use the internet option as we do not currently have the Cloud Connector installed.

Check Enable CAPTCHA (If you wish to add some robot hacker attack protection for your onboarding J ) And use the Neptune_login_ping application as the Authentication URL as it only contains one div that has the id “ping” so it minimizes networking. I used SAP SSO Authentication but other options exists and I will explore them later.

That is about all you have to do before starting setting up the Neptune application.

A small tip is to press the Export URL button to get your endpoint URL’s for the logon script in your application.

In the SAP GUI start the Neptune Designer and create a new application (I can send you ours on request and it will be available in the system from the next release so in 2.1 you can just copy this to a new app)

I just used the standard Neptune ABAP login app as a template and added some CAPTCHA fields that I placed under a div with display: none as you only want to show it when you are challenged by a CAPTCHA request.

With some styling, this is how it turned out

To be able to access your backend system the SMP Cloud requires that you have a valid application connection. You need to pass a unique id for every time a new user/device onboards and pass it in the header field X-SUP-APPCID. I chose to use the UUID of the device, which you can access through the device.uuid in the Phonegap API.

I created four functions to enable onboarding with CAPCHA and logging on. The first is triggered by the logon button and checks if you have a valid APPCID.

function initsmp(){

var tok = $("#sap-user").val() + ':' + $("#sap-password").val();

var hash = Base64.encode(tok);

auth = "Basic " + hash;

$.ajax({

type:"GET",

beforeSend: function (request)

{

request.setRequestHeader("Authorization", auth);

request.setRequestHeader("X-SUP-APPCID", deviceID);

request.setRequestHeader("Content-Type", "application/atom+xml");

},

url: SMPEndpoint,

statusCode: {

200: function() {

doLoginsmp();

},

404: function(data) {

doOnboardsmp();

}

});

}

For the onboarding (New user or device) I created this function that displays the CAPTCHA code from the SMP server if you need to verify your account. You will need to send xml in the request body so create a variable for that first (Add the device type with the Phonegap API to give you a bit better reporting later on)

var xmlString = "<?xml version='1.0' encoding='utf-8'?>\n" + "<entry xmlns='http://www.w3.org/2005/Atom'\n" +

"xmlns:d='http://schemas.microsoft.com/ado/2007/08/dataservices'\n" + "xmlns:m='http://schemas.microsoft.com/ado/2007/08/dataservices/metadata'>\n" +

"<title type='text'/><updated>2012-06-15T02:23.29Z</updated>\n" + "<author><name/></author>\n" + "<category term='applications.Connection'

scheme='http://schemas.microsoft.com/ado/2007/08/dataservices/scheme'/>\n" + "<content type='application/xml'>\n" + "<m:properties>\n" +

"<d:DeviceType>" + deviceType +”</d:DeviceType>\n" + "</m:properties>\n" + "</content>\n" + "</entry>";

function doOnboardsmp(){

$.ajax({

type:"POST",

data: xmlString,

beforeSend: function (request)

{

request.setRequestHeader("Authorization", auth);

request.setRequestHeader("X-SUP-APPCID", deviceID);

request.setRequestHeader("Content-Type", "application/atom+xml");

},

url: endpointURL + “/odata/applications/latest/neptunedemo/Connections",

statusCode: {

201: function() {

doLoginsmp();

},

401: function(data) {

var CorrectCaptcha = data.getResponseHeader('WWW-Authenticate');

var image = document.getElementById('captchaImage');

image.src = "data:image/jpeg;base64," + data.responseText;

capchaDiv.style.display = 'block';

formDiv.style.display = 'none';

}

},

success: function( data, Status, xhr ) {

},

});

}

The CAPCHA challenge will look like this (yeah I know. I was lazy and didn’t add padding and positioning styles )

Now we need to create the function for sending the answer to the challenge to the SMP server. If the answer is wrong, you will receive another image. If correct you have validated your Application account and can log in.

function sendCapcha(){

var captext = document.getElementById('capchatext').value;

var hash = Base64.encode(tok);

auth = "Basic " + hash;

$.ajax({

type:"POST",

data: xmlString,

beforeSend: function (request)

{

request.setRequestHeader("Authorization", auth);

request.setRequestHeader("X-SUP-APPCID", deviceID);

request.setRequestHeader("X-SUP-CAPTCHA-TEXT", captext);

request.setRequestHeader("Content-Type", "application/atom+xml");

},

url: endPointURL + “/odata/applications/latest/neptunedemo/Connections",

statusCode: {

200: function() {

doLoginsmp();

},

201: function() {

doLoginsmp();

},

401: function(data) {

var CorrectCaptcha = data.getResponseHeader('WWW-Authenticate');

if (CorrectCaptcha == 'CAPTCHA')

{

initsmp();

}

else

{

var image = document.getElementById('captchaImage');

image.src = "data:image/jpeg;base64," + data.responseText;

}

});

Lastly you need a function for logging into the SMP and start the Neptune app in the backend system:

function doLoginsmp(){

var hash = Base64.encode(tok);

$.ajax({

type:"GET",

beforeSend: function (request)

{

request.setRequestHeader("Authorization", auth);

request.setRequestHeader("Access-Control-Allow-Origin", "*");

request.setRequestHeader("X-SUP-APPCID", deviceID);

},

url: endPointURL + /<Your SMP APP NAME> + “/neptune/” + <Your Neptune start app>.html,

success: function( data ) {

$.mobile.changePage("https://" + hash + "@“ + endPointURL + /<Your SMP APP NAME> + “/neptune/” + <Your Neptune start app>.html

},

error: function( data ) {

alert("error");

}

});

}

Now use the export to Phonegap transaction in the Neptune Application Designer and choose your new app as the index file export and zip and upload to build.phonegap.com.

That’s it! No 100 pages documents for installing a huge amount of onPremise software and development tools. . I connected this app to our Neptune HR templates app and here is the result