The official link

The goal of this tutorial is to secure and deploy the product list application through authentication and authorization, so that only users with the correct authorization can access the products in the authentication application. Users without the necessary authorization can log in to the application but not see the product.

The basis of this tutorial is a Node.js application that uses the Express framework and SAPUI5 to display a list of products (see screen capture).

XSUAA and the Application Router

To secure the product list application, two components are used. One is called the XSUAA service and the other is called the Application Router. Application routers are used in conjunction with XSUAA services to authenticate users and route users to protected applications.

XSUAA acts as an OAuth authorization service, and the application router acts as an OAuth client. In addition, the application router acts as the central entry point for the application.

To prevent direct calls to your application without authentication, it is necessary to add some code to your application. In our example, you use the Node.js passport authentication middleware and configure it with the XSUAA JWT policy.

This code prevents direct calls to the product-list application without a valid JWT.

The checkreadScope function ensures that only users with the correct permissions can view the product.

If you want to use SAP modules locally, you need to add the npm configuration:

npm config set @sap:registry https://npm.sap.com

Approuter will enable you to create secure routes to your application.

In MANIFEST.YAML, you must define the host name and add the destination for the application. The manifest file is used to bind the XSUAA service instance to your application.

Use the route parameter to specify a specific hostname for your application. Routes must be unique throughout the Cloud Foundry environment, so be sure to add random parts to the route, such as your initials and date of birth, such as product-list-ap25 and approuter-product-list-ap25. You will also need routing to configure the destination later.

The name parameter is the same as defined earlier in the file xs-app.json. The URL parameter is the result of the application hostname and Cloud Foundry environment region (https://<hostname>.cfapps.<region>.hana.ondemand.com). Setting the forwardAuthToken parameter to true ensures that the ApprOuter forwards the JWT token to the destination.

Dependencies on package.json files:

To use the XSUAA service, you need a file called xs-security.json. This file can define the properties of XSUAA service instances as well as the different roles and authorizations. In this example, the file contains a role template and a set of roles with the product list viewer role, allowing the user to view the product later.

Create a new security folder and maintain the contents of xs-security.json file as follows:

{
    "xsappname": "product-list",
    "tenant-mode": "dedicated",
    "scopes": [
        {
            "name": "$XSAPPNAME.read",
            "description": "With this scope, USER can read products."
        }
    ],

    "role-templates": [
        {
            "name": "Viewer",
            "description": "Role to get the list of products",
            "scope-references": [
                "$XSAPPNAME.read"
            ]
        }
    ],
    "role-collections": [
        {
            "name": "ProductListViewer",
            "description": "Product List Viewer",
            "role-template-references": [
                "$XSAPPNAME.Viewer"
            ]
        }
    ]
}

This creates a collection of roles with a role template and a role with a reading scope so that users with this role can view products.

Prepare the approuter files

Approuter will enable you to create secure routes to your application.

  • Add the folder named approuter to your product list folder.
  • Create a file called package.json in this folder.
  • Add the following:
{" name ":" approuter ", "dependencies" : {" @ SAP/approuter ":" ^ 9.0.2 "}, "scripts" : {" start ": "node node_modules/@sap/approuter/approuter.js" } }

Json: xs-app.json: xs-app.json

{
  "routes": [{
    "source": "^/products",
    "target": "/",
    "destination": "products-destination"
  }]
}

This will create a destination named products-destination. The destination is later referenced in MANIFEST.YML.

Move static content to the application router

For performance reasons, it is best to place the image of the application in a static resources folder with the application router.

The final application structure is as follows:

Update the manifest file

In the manifest file, you must define the host name for the application and add the destination. The manifest file is used to bind the XSUAA service instance to your application.

applications:
# Application
- name: product-list
  instances: 1
  memory: 128M
  routes:
    - route: product-list-jerry.cfapps.eu10.hana.ondemand.com
  path: myapp
  buildpacks:
    - nodejs_buildpack  
  timeout: 180
  services:
    - xsuaa-service-tutorial

# Application Router
- name: approuter
  routes:
    - route: approuter-product-list-jerry.cfapps.eu10.hana.ondemand.com
  path: approuter
  buildpacks:
    - nodejs_buildpack
  memory: 128M
  services:
    - xsuaa-service-tutorial
  env:
    destinations: >
      [
        {"name":"products-destination",
         "url":"https://product-list-jerry.cfapps.eu10.hana.ondemand.com",
         "forwardAuthToken": true}
      ]

Update the index.html file

Because you use /products to call the list of products through the approuter, you need to make some minor changes in the index.html file.

  • Navigate to the folder product-list/myapp/static.
  • Replace line 24 in the index.html file with the following code.

Create the XSUAA service instance

Before deploying the application, you need to create a service instance for XSUAA.

  • Log in to your Cloud Foundry account using the Cloud Foundry CLI.
  • Navigate to the product list folder.
  • Create an XSUAA service instance using the xs-security.json security descriptor file.

cf create-service xsuaa application xsuaa-service-tutorial -c security/xs-security.json

Finally, CF Deploy deploys the application.

Call your application from its secure route

Your application has two routes defined in MANIFEST.YML. The application’s direct route should return an error message stating that it is unauthorized (because you don’t have a valid JWT yet). Redirect to the login screen via Approuter’s secure route. After logging in, the application opens but displays messages with no data. To view product data, you need to assign your users a set of roles with the necessary authorization.

First, make sure your application is not accessible through its direct URL:

https://product-list-ap25.cfa…

If all is well, this will cause an unauthorized error message to be read.

Use the application router’s secure route to navigate to your application:

https://approuter-product-lis…

Enter the email and password for your trial account.

You should see the No Data message. This is because you have not yet been assigned a role to view the product. You will do this in the next step.

Assign the role collection

Assign your users a role set that contains the roles they need to view the products in the product list.

  • Open SAP BTP master control room. Navigate to your child account.
  • Select the Security TAB, and then select Trust Configuration. Select the default identity provider.
  • Enter your email address and select Show Job.
  • Select the set of assigned roles. Select the ProductListViewer role collection.

The URL of the approuter is called again (you may have to delete your cookie/ cache earlier).

https://approuter-product-lis…

The application will now show you the product:

More of Jerry’s original articles can be found on “Wang Zixi “: