TinyWorld - Part 10
Add authentication
Hello!
In Introduction to the TinyWorld application we introduced the TinyWorld muti-part tutorial, describing how to develop applications for SAP HANA and XS Advanced, using the SAP Web IDE for SAP HANA (Web IDE). Here we continue with our "advanced" topics, and this time we are going to discuss "authentication", the process of verifying the user's identity.
Up till now we have allowed anonymous access for our TinyWorld application. We now introduce authentication to our application. Authentication forces users to log on and identify themselves, before they can use the application.
Authentication and authorization (discussed in the next part of this tutorial, Add authorization) are managed using the XS Advanced UAA service. XS UAA is an OAuth authorization service with support for HANA and SAML2 authentication. For more details refer to the SAP HANA Developer Guide for HANA XS Advanced.
To enable authentication we need to do four things:
- Enable authentication for tinyjs
- Enable authentication for tinyui
- Add CSRF support to tinyui
- Provision the UAA service, to be used by both modules.
1. Enable authentication for the tinyjs module
Open the file tinyjs/server.js and uncomment the following line which was commented out by default.
options = xsjs.extend(options, xsenv.getServices({ uaa: {tag: "xsuaa"} }));
Then, comment the following line to disable anonymous access (or change true to false)
var options = xsjs.extend({
// anonymous: true, // remove to authenticate calls
redirectUrl: "/index.xsjs"
});
Note: Once authentication is switched on for tinyjs, no direct access to it at runtime will be possible anymore. The reason is that the Node.js application will require a valid JWT token (JSON Web Token) in every request. Such token is acquired by the approuter (as part of our tinyui) when the user logs on, but it is not returned to the browser. Hence every request must always be routed via the approuter which forwards the JWT token to Node.js.
Following part 2 of this tutorial, an appropriate route is already defined in the xs-app.json file, so no additional handling is required.
2. Enable authentication for the HTML5 module
Configure the tinyui module to use authentication: open tinyui/xs-app.json, and change the "authenticationMethod" attribute to "route" (with quotes), like this
"authenticationMethod": "route",
As a result the authentication method will be defined in the route itself. By default this is xsuaa, which is the right value for us. Authentication method xsuaa means that the UAA service will handle the authentication (the user is redirected to the UAA's login form).
3. Add CSRF support
Once we switch on the authentication for the HTML5 module, the XS Advanced runtime will require any HTTP update request (PUT, POST, DELETE) to present a valid CSRF token. This is a standard security technique to prevent cross-site forgery. The following code will fetch the CSRF token when the application is first loaded and add it automatically to the HTTP header of each update request. Append the following code to the end of the tinyui/resources/Util.js file that we created in the previous part , part 9, of this tutorial ( Application life cycle).
$(function() {
// one time fetch of CSRF token
$.ajax({
type: "GET",
url: "/",
headers: {"X-Csrf-Token": "Fetch"},
success: function(res, status, xhr) {
var sHeaderCsrfToken = "X-Csrf-Token";
var sCsrfToken = xhr.getResponseHeader(sHeaderCsrfToken);
// for POST, PUT, and DELETE requests, add the CSRF token to the header
$(document).ajaxSend(function(event, jqxhr, settings) {
if (settings.type==="POST" || settings.type==="PUT" || settings.type==="DELETE") {
jqxhr.setRequestHeader(sHeaderCsrfToken, sCsrfToken);
}
});
}
});
});
4. Provision the UAA service
In order to bind our application modules to the UAA service at run time, we first need to define a new UAA service. Add the following section to the resources section of the mta.yaml file:
- name: tiny_uaa
type: com.sap.xs.uaa
Next, we define the dependency of the tinyjs and tinyui modules to this resource. When these modules are run they will be automatically bound to the tiny_uaa service. Add the following line to the requires section of both modules in the mta.yaml file:
- name: tiny_uaa
In addition we want the authentication token acquired at runtime by the tinyui module to be automatically forwarded to the tinyjs module, so a seamless flow is achieved. Add forwardAuthToken: true to the destinations property of the tinyui module in the mta.yaml file, like this:
- name: tinyui
type: html5
path: ./tinyui
requires:
- name: tiny_uaa
- name: tinyjs_api
group: destinations
properties:
name: tinyjs_be
url: ~{service_url}
forwardAuthToken: true
To provision the UAA service, you currently need to manually execute the following XS Advanced command:
xs create-service xsuaa devuser tiny_uaa
Note: (in the future this step will be automatically performed by the Web IDE, based on the information in the mta.yaml file).
The changes to enable authentication are now completed. In order for the changes to take effect, rerun the tinyjs module and then the tinyui module. To test authentication, open the TinyWorld application using a different browser or using an incognito session (so the token you acquired as a user of the Web IDE will not be reused). You will be redirected to the XS login page, requesting username and password.
Summary of part 10
This part of the TinyWorld tutorial described how you can add authentication to your application. And what about authorization? That is the topic of the next part in our tutorial:
Part 11: Add authorization
- SAP Managed Tags:
5 Comments
