Skip to Content
Technical Articles
Author's profile photo Radu Constantin Simen

How To Update XSUAA Service Instance to Accept Multiple Redirect URIs

Introduction

Fastest way to develop UI5 applications is for sure on local machine. In that case the XSUAA cloud instance may be used by starting a local approuter on localhost:5000 by default. This configuration is made via the default-services.json file that is auto-read by approuter on start and expands the VCAP_SERVICES which of course is found only on Cloud Foundry landscape or is set with a manual enviroment variable.

For local development, when using an existing SAP Cloud Platform XSUAA service instance, the localhost domain is not accepted by default as a valid redirect uri. For security reasons we need to add explicit permission to xsuaa for redirection after a successful login to a localhost url used for local development. (or other uri)

The error displayed after login on the xsuaa page is :

Invalid redirect <url> did not match one of the registered values

 

Approuter & XSUAA

Approuter is the entry point for multi target applications that need authorization and have multiple modules (ui, backend) that need to scale and reuse the same OAuth2 token. The whole process of token check and client credentials flow to retrive the token in the UI application is handled by the approuter.

More details on npmjs @sap/approuter

The configuration for routes of the approuter is done via the xs-app.json file.

The xs-security.json file is specific to the xsuaa instance !

Once deployed the instance configuration may be updated.

 

The xs-security.json file

Tipical xs-security.json file looks like this :

More details may be found in the help page

{
    "xsappname": "node-hello-world",
    "scopes": [
      	{
            "name": "$XSAPPNAME.Display",
            "description": "display"
        },
        {
            "name": "$XSAPPNAME.Edit",
            "description": "edit"
        },
        {
            "name": "$XSAPPNAME.Delete",
            "description": "delete"
        }
    ],
    "attributes": [
      	{
            "name": "Country",
            "description": "Country",
            "valueType": "string"
        },
        {
            "name": "CostCenter",
            "description": "CostCenter",
            "valueType": "int"
        }
    ],
    "role-templates": [
      	{
            "name": "Viewer",
            "description": "View all books",
            "scope-references": [
                "$XSAPPNAME.Display"
            ],
            "attribute-references": ["Country"]
        },
        {
            "name": "Editor",
            "description": "Edit, delete books",
            "scope-references": [
                "$XSAPPNAME.Edit",
                "$XSAPPNAME.Delete"
            ],
            "attribute-references": [
                "Country",
                "CostCenter"
            ]
        }
    ]
}

Create a service instance

First check the xsuaa plans available

cf marketplace -s xsuaa

For example purposes I will use the application plan

cf create-service xsuaa application myappxsuaa -c xs-security.json

 

Update the xs-security.json file

{
    "xsappname": "node-hello-world",
    "scopes": [
      	{
            "name": "$XSAPPNAME.Display",
            "description": "display"
        },
        {
            "name": "$XSAPPNAME.Edit",
            "description": "edit"
        },
        {
            "name": "$XSAPPNAME.Delete",
            "description": "delete"
        }
    ],
    "attributes": [
      	{
            "name": "Country",
            "description": "Country",
            "valueType": "string"
        },
        {
            "name": "CostCenter",
            "description": "CostCenter",
            "valueType": "int"
        }
    ],
    "role-templates": [
      	{
            "name": "Viewer",
            "description": "View all books",
            "scope-references": [
                "$XSAPPNAME.Display"
            ],
            "attribute-references": ["Country"]
        },
        {
            "name": "Editor",
            "description": "Edit, delete books",
            "scope-references": [
                "$XSAPPNAME.Edit",
                "$XSAPPNAME.Delete"
            ],
            "attribute-references": [
                "Country",
                "CostCenter"
            ]
        }
    ],
    "oauth2-configuration": {
        "redirect-uris": [
            "https://www.myappurl.com/login/callback",
            "http://localhost:5000/login/callback"
        ]
    }
}

 

Update the service instance

Login to CF and choose the org and space where you have created the instance.

Run the update command :

cf update-service myappxsuaa -p application -c xs-security.json

Conclusions

This article is based on personal experience.

This is a short summary of the the documentation files regarding xsuaa and approuter use.

Tested with SAP Cloud Platform Trial – Cloud Foundry Environment

Reference & Credits :

https://help.sap.com/viewer/4505d0bdaf4948449b7f7379d24d0f0d/2.0.03/en-US/e00eadf291424e49935b460d2f2b3902.html

https://blogs.sap.com/2020/04/03/sap-application-router/

https://developers.sap.com/tutorials/cp-connectivity-consume-odata-service-approuter.html

https://blogs.sap.com/2020/05/12/set-up-cap-application-behind-sap-webdispatcher/

 

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mike Doyle
      Mike Doyle

      Thanks Radu Constantin Simen this blog was really useful.  One question, when you say

      The configuration for routes of the approuter is done via the neo-app.json file.

      Don't you mean xs-app.json?

      Author's profile photo Radu Constantin Simen
      Radu Constantin Simen
      Blog Post Author

      You're right Mike : it's name is xs-app.json in the new versions of approuter.

      Author's profile photo Imran Syed Abdul
      Imran Syed Abdul

      Thank Radu,

      you saved my day

      Author's profile photo Shardul Sonar
      Shardul Sonar

      Is there a way so that I can add multiple ports for localhost. For example :

              "redirect-uris": [
                  "https://www.myappurl.com/login/callback",
                  "localhost*
              ]
      Author's profile photo Iddo Rijsdijk
      Iddo Rijsdijk

      Hi Shardul,

      Did you manage to find this? I'm trying to set up Graph, but it needs to redirect to a random port on the localhost, so a wildcard is a necessity indeed.

      Author's profile photo Shardul Sonar
      Shardul Sonar

      Hello,
      I am from the graph team and I am still facing the same issue.

      One work-around I have found is to create an additional new instance and a binding for the second one and In the second one leave the JSON file blank :).

      By default graphctl works perfect with multiplle ports on local host.

      Author's profile photo Iddo Rijsdijk
      Iddo Rijsdijk

      Isn't that exactly what this blog is trying to explain? Would be appreciated if you could share a bit more information on how you managed this, because I'm quite lost to be honest. I'm just following the step-by-step tutorials

      Author's profile photo Shardul Sonar
      Shardul Sonar

      So normally I create a new instance from the BTP Cockpit.
      In the UI, when I create a new instance of SAP Graph, if I leave the field blank, the redirect works for multiple ports.
      So basically I create 2 instances :
      1. One with the no information in the json file about the redirect uri's.

      and

      2. With the redirect uri for my specific app :

      Author's profile photo Iddo Rijsdijk
      Iddo Rijsdijk

      Yes, success here: You have logged in to graphctl. You can close this window.