Deploying a CAP based Fiori app to a central Launchpad - Part2: Add Authentication

[MioYasutake]

Introduction

Recently I posted the following blog.
Deploying a CAP based Fiori app to a central Launchpad
If you follow the steps described there, you can get rid of Approuter, because the central Launchpad does the work of Approuter. After publishing the blog, I received a question asking, "How can we implement authentication and authorization checks for CAP without Approuter?" The answer is, the Launchpad takes care of them too! So why not give it a try?

In this blog, I'm going to add authentication and authorization checks to the app which I have build in my previous blog. The content is available at GitHub.

Steps

1. Clone the repository from GitHub


2. Add authorizations to CAP service


3. Configure xs-app.json


4. Install dependencies


5. Configure package.json


6. Configure xs-security.json (optional)


7. Configure mta.yaml


8. Build & Deploy

 

1. Clone the repository from GitHub

1.1. Clone the repository.

//If you deploy to HANA Cloud

git clone https://github.com/miyasuta/central-launchpad-cap.git

//If you deploy to HANA Service (Trial)

git clone -b hana-service https://github.com/miyasuta/central-launchpad-cap.git

 

1.2. Run the CAP service locally.

npm install

cds watch

 

2. Add authorizations to CAP service

The scenario is to allow users to view books data created by themselves only.

2.1. Add createdBy field to Books entity in db/data-mode.cds.

namespace my.bookshop;



entity Books {

  key ID : Integer;

  title  : String;

  stock  : Integer;

  createdBy: String  @cds.on.insert : $user; //add

}

2.2. Add the same field to db/data/my.bookshop-Books.csv.

ID;title;stock;createdBy

1;Wuthering Heights;100;<your scp userID>

2;Jane Eyre;500;<NOT your scp userID>

2.3. Add the following annotations to srv/cat-service.cds.

using my.bookshop as my from '../db/data-model';



service CatalogService @(requires: 'authenticated-user') {

    entity Books as projection on my.Books;

}



annotate CatalogService.Books with @(restrict: [

    { grant: ['READ'], where: 'createdBy = $user'}

]);

At this point, an error occurs at the terminal. I'll fix this next.

2.4. Install passport.

By installing passport, above error will disappear.

npm install passport

 

3.Configure xs-app.json

Go to app/fiori/xs-app.json and remove "authenticationType: none" from the CAP service route. By doing so default authentication type "xsuaa" will be applied to this route.

{

  "welcomeFile": "/index.html",

  "authenticationMethod": "route",

  "logout": {

    "logoutEndpoint": "/do/logout"

  },

  "routes": [

    {

      //"authenticationType": "none", Remove this

      "csrfProtection": false,

      "source": "^/catalog/",

      "destination": "cap-launchpad"

    },

    {

      "source": "^(.*)$",

      "target": "$1",

      "service": "html5-apps-repo-rt",

      "authenticationType": "xsuaa"

    }

  ]

}

 

4. Install dependencies

Install the following modules for JWT-based authentication.

npm install @sap/xssec @sap/xsenv

 

5. Configure package.json

Add "uaa" section to package.json.

    "cds": {

        "requires": {

            "db": {

                "kind": "sql"

            },

            "uaa": {

                "kind": "xsuaa"

            }

        }

    }

 

6. Configure xs-security.json (optional)

If there's a requirement to create new roles, configure xs-security.json like below sample.
In this specific project I don't need additional roles, so I skip this step.

{

  "xsappname": "fiori",

  "tenant-mode": "dedicated",

  "scopes": [

    {

      "name": "$XSAPPNAME.admin",

      "description": "admin"

    },

    {

      "name": "uaa.user",

      "description": "UAA"

    }    

  ],

  "attributes": [],

  "role-templates": [

    {

      "name": "admin",

      "description": "generated",

      "scope-references": [

        "$XSAPPNAME.admin"

      ],

      "attribute-references": []

    },

    {

      "name": "Token_Exchange",

      "description": "UAA",

      "scope-references": [

        "uaa.user"

      ]

    }    

  ]

}

 

7. Configure mta.yaml

Add xsuaa service ("uaa_fiori" in this case) as required resource of CAP service and db-deployer.

 # --------------------- SERVER MODULE ------------------------

 - name: cap-launchpad-srv

 # ------------------------------------------------------------

   type: nodejs

   path: gen/srv

   parameters:

     memory: 256M

     disk-quota: 1024M

   requires:

    # Resources extracted from CAP configuration

    - name: cap-launchpad-db

    - name: uaa_fiori //add

   provides:

    - name: srv-api      # required by consumers of CAP services (e.g. approuter)

      properties:

        srv-url: ${default-url}



 # -------------------- SIDECAR MODULE ------------------------

 - name: cap-launchpad-db-deployer

 # ------------------------------------------------------------

   type: hdb

   path: gen/db  

   parameters:

     buildpack: nodejs_buildpack

   requires:

    # 'hana' and 'xsuaa' resources extracted from CAP configuration

    - name: cap-launchpad-db

    - name: uaa_fiori //add

resources:

...

 - name: uaa_fiori

   type: org.cloudfoundry.managed-service

   parameters:

     path: ./xs-security.json

     service: xsuaa

     service-name: fiori-xsuaa-service

     service-plan: application

 

8. Build & Deploy

8.1. First go to app/fiori folder and install dependency (so that build will not fail).

cd app/fiori

npm install

 

8.2. Go back to the project root and execute build.

mbt build

 

8.3. Deploy mtar file to Cloud Foundry.

cf deploy mta_archives/cap-launchpad_1.0.0.mtar

 

After successful deployment, go to your Launchpad site and execute the app. (I you have not configured your Launchpad yet, please refer to the step 6 of my previous blog).
You will only see the record ID 1, as your user ID is set as createdBy only for this record.

 

Conclusion

The central Launchpad takes care of authentication and authorization tasks.

The steps to enable authentication and authorization is almost the same as CAP & Approuter project. The only difference would be where you define routes for CAP service: In Approuter approach, you would configure routes in xs-app.json in Approuter, whereas in central Launchpad approach, you configure routes in xs-app.json under html5 application module.

 

References

• capire - Authentication


• CAP: Demystify User Authentication by jhodel18