Using Neptune as a third-party development tool for the SMP Cloud Edition
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
References
How to set up Push Notifications with SMP Cloud and Neptune Software
http://scn.sap.com/community/mobile/blog/2013/03/29/sap-mobile-platform-on-hana-cloud-released
http://scn.sap.com/blogs/sankeerthana/2013/05/06/sap-mobile-platform-cloud-what-is-it
http://neptune-software.com/tips-and-tricks/login-screen-for-phonegap/
http://neptune-software.com/resources/download/
EDIT: A new blog about the pros of the SMP Cloud:
Hi Njål,
Great blog! This will make it much easier to convince customers to expose their Neptune applications to the internet. Are there any more benefits for using SMP to expose Neptune other than security?
I am also very interested in the Neptune SMP Cloud template app, can you please send it to me?
kind regards,
Ted
Glad you liked it 🙂
Security is of course a major benefit, but I would like to add Push Notification and great reporting tools (Users, devices, applications). Another huge advantage is that you can run SAP apps and other partner apps together with Neptune Apps in the same environment. You could also combine this with the Afaria Cloud.
Regarding the Push Notifications we have previously had to use php or java servers outside of the ABAP stack as it is impossible to connect to the APNS server. I am looking into the push capabilities of SMP Cloud and will write up a Blog about my findings when it is working.
Oh, I'll send you the app in xml format (just use the import function). Just let me clean up my js abit first 😉
BR
Njål
No problem, I'll just wait until you had the opportunity to clean up your code 🙂
Push notifications would be a very nice extra of course, hope to see another blog soon...
KR
Ted
Added a new blog on how to use the Push Provider features from Phonegap applications
How to set up Push Notifications with SMP Cloud and Neptune Software
Also Operations are setting up the Cloud Connector for me so I will add information on how to properly connect to onPremise SAP systems.
Hello Njål!
Did you already finish the Cloud Connector tutorial for on-Premise SAP systems?
IMPORTANT ERROR FIXED!
I saw that the captcha text header was wrongly added in the script above as
X-SUP-CAPTCHATEXT THIS is wrong it is X-SUP-CAPTCHA-TEXT