René van Mil

Building a Backbone.js Web Application With an SAP ABAP Backend

In this blog post I will describe how to build a Backbone.js web application, which connects to an SAP ABAP backend API over a RESTful JSON interface.


Stateless API

The RESTful API provided by the SAP system must not store any state on the SAP server itself. This means there won’t be a session, and each request to one of the web services must include proper credentials.

Allow the user to login/logout

Even though the API is stateless, the user must be able to login to the web application by providing a username and password. And even though there won’t be a session, the user must also be able to logout from the web application.
Also, the web application should allow the user to remember the entered username on the login form, and the user should be logged out automatically after a certain period of inactivity.

Host the web application on any web server

The web application must be a JavaScript application which runs inside the client’s browser and communicates directly with the API provided by SAP. There must not be any server-side scripting (PHP, ASP, etc.), and no middleware must be required.


Webserver software

The easiest way to get this demo to work, is to run it on a local webserver. I prefer nginx because it’s easy to setup and configure a reverse proxy to an SAP system.

JavaScript libraries

The following libraries are used in the web application. You do not have to download these though, since they are already included with the demo web application.
Font Awesome
jQuery Cookie

Step 1 - Setup a webserver

Install nginx and use the provided default configuration.
Add a /sapdemo location which will serve as a reverse proxy to your SAP system:

reverse proxy configuration
location /sapdemo {
  proxy_pass http://mysapsystem.local:8000/sap/zdemo;

  Note that for this demo we will not be using HTTPS, but be aware that using HTTPS is absolutely mandatory when building a web application for productive use. The reason is the username and password will be sent with each HTTP request to the API, so you must use HTTPS to protect these credentials from being intercepted by a potential attacker.

Step 2 - Build the API with ABAP

For this demo we will build 2 resources. An auth resource used to simulate logging in, and a user resource which provides the full name of the logged in user.

  Note that this process can be simplified a lot by using my REST framework included in my ABAP OOP Library, so you might want to check that out later. For the demo this library is not required though.

Auth Resource

Create a class zcl_demo_auth and implement the if_http_extension interface:

Implementation for the handle_request method.
method if_http_extension~handle_request.
  " Return an empty json object with status code 200 to indicate authentication was successful
  server->response->set_content_type( 'application/json' ).
  server->response->set_cdata( '{}' ).
  server->response->set_status( code = 200 reason = '' ).

User Resource

Create a class zcl_demo_user and implement the if_http_extension interface:

Implementation for the handle_request method.
method if_http_extension~handle_request.
  " Send user id and full name in json format
  data: persnumber type usr21-persnumber,
        name_text type adrp-name_text,
        json_user type string.
  select single persnumber into persnumber from usr21 where bname = sy-uname.
  select single name_text into name_text from adrp where persnumber = persnumber.
  concatenate '{ "id": "' sy-uname '", "fullName": "' name_text '" }' into json_user.
  server->response->set_content_type( 'application/json' ).
  server->response->set_cdata( json_user ).
  server->response->set_status( code = 200 reason = '' ).

ICF Configuration

  1. Start transaction SICF and press F8 to go to the list of web services.
  2. Expand the default_host node and then expand the sap node.
  3. Right-click the sap node and select the New Sub-Element menu option.
  4. Type the name zdemo and click the ok button.
  5. Enter demo in the Description 1 field and click the save button.
  6. Press F3 to go back to the services list.
  7. Right-click the zdemo node and select the New Sub-Element menu option.
  8. Type the name auth and click the ok button.
  9. Enter auth in the Description 1 field.
  10. Select the Logon Data tab and select the option Alternative Logon Procedure.
  11. Scroll down to the Logon Procedure List and remove all procedures except the Logon through HTTP fields procedure.
  12. Select the Handler List tab and enter zcl_demo_auth as the handler.
  13. Save and go back to the services list.
  14. Repeat steps 7-13 for to create a user node with zcl_demo_user as its handler.
  15. Right-click the zdemo node and select the option Activate Service. On the popup click the second Yes button, activating the zdemo node and both the auth and user subnodes.

Step 3 - Build the Backbone.js web application

Clone the GitHub demo web application repository. The application can be built using Grunt, but before doing so you need to do the following:

  • Install Node.js and Grunt.
  • Install the Grunt plugins specified in the package.json file.
  • Edit the Gruntfile.js and adjust the dest path inside the distToNginx copy task. It will currently point to the /opt/local/share/nginx/html/demo/ path, and it must be changed to the html path of your nginx installation (do not remove the /demo/ part though).
  • Edit the api.js file (inside the src/js/helper folder) and change the value of sap-client to the client number of the SAP system you are using for this demo.

Build the application by running the command grunt debug (or run grunt dist if you want the JavaScript code to be minified).

After building the application you will be able to run it from http://localhost/demo (make sure nginx is running).