Simple PhoneGap Logon App for SAP mobile applications
This post is to share a simple PhoneGap application that manages the logon before calling a Netweaver URL with basic authentication. This app can be used as a container to run any HTML5 application from Netweaver and it is also open-source, so it can be useful for other people working on the SAP mobility topic (direct link to the code).
About PhoneGap
PhoneGap is toolkit to build containers for running HTML5 mobile applications. With PhoneGap it is possible to access hardware APIs like GPS, accelerometer, camera, etc, and still code in cross-platform HTML5/Javascript. For example, PhoneGap has a very useful barcode reader plugin, and reading barcodes from standard browser based HTML5 apps is not possible.
About the problem this app tries to solve
The typical pattern for development of PhoneGap applications is to package the application with the HTML and Javascript code and when the application needs data from a server it requests that data using ajax. This pattern has some advantages, the files are in the mobile device so the app loads faster and needs less network transfers.
But I don’t think this is a good pattern for enterprise applications. With this pattern deployment is hard, because when code changes it needs to be synchronized to all devices. And because we cannot be sure that all devices get updated at the same time, the data APIs from the server needs to support the different versions of the applications that might be running. This is complex to maintain. Enterprise mobile solutions must be easy to change and deploy and that can be achieved by having all HTML5/Javascript code in the Netweaver server. For that to work the PhoneGap application needs to be enhanced to have configuration data for the login, since currently it does not have a login dialog like the one found in the mobile browsers. So this Logon App provides a way to connect PhoneGap directly to Netweaver using basic authentication.
The Logon App
The application is ultra simple. Starts with a username/password screen (screenshot left). In the menu there is a settings screen where the server connection details and the URL path to the starter application must be saved (screenshot middle). When the login button is pressed the app calls the Netweaver URL using the Basic Authentication credentials and displays the remotely loaded starter application (screenshot right). After the login all UI and logic is in the server side.
Source code and instructions
Code is available in this repository with some minimal build instructions. A binary apk is also available in the downloads section. Currently it is only for Android (doing for other PhoneGap platforms should be easy, at least an iOS version will be done sooner or later).
This looks quite interesting. Thanks for sharing.
Great. very helpful. Thanks for sharing. Looking forward to iOS version. Detailed step would be appreciated.
Updated: Can you please provide some details, how the authentication is done? Are you using BSP/JQuery for HTML code? Thanks once again.
The documentation is not very good, I suggest following the PhoneGap instructions to build a project, and then just copy this code into that standard project.
The app makes a http request to the configured start page using the provided username/password using basic authentication. If the request is ok the app calls that start page in the webcontainer always using the same basic authentication. Otherwise the user is notified that the credentials are not ok.
This thin app is needed because we wanted to have all the html5 code in the server side and the standard PhoneGap webcontainer does not have the typical login screen for basic authentication that we see in the mobile browsers.
For the html5 we have been using mainly JQueryMobile and for the server side BSP or ICF.
Thanks Pedro for the details. I will look at the standard project and let you know in case of any questions. Thanks once again.
- Raja