認証付きCAPプロジェクトを使ってUIを開発するには

はじめに

認証が必要なCAPのODataサービスを開発し、それをDestinationに登録してUI5アプリから使いたいというケースがあると思います。この際、次のような課題があります。
①データソースを選択したときに、認証を聞かれて先に進めない
②UI5アプリをローカルで実行しようとする際に権限がないためエラーになる

この記事では、上記の課題を解決し、認証付きのCAPプロジェクトを使ってUI5アプリの開発、ローカルでの実行ができるようにする方法について説明します。

前提

• 開発環境はBASを使用する（考え方はVS Codeなどでも同じ）
• UIとCAPでは別々のXSUAAサービスインスタンスを使用する

サマリ

BASで開発するUI5アプリから認証付きCAPサービスを利用する方法は2つあります。

1. BTPにデプロイされたCAPサービスを使う ⇒ 開発者にCAPサービスを利用する権限が必要
2. ローカルのCAPサービスを使う ⇒ 開発者にCAPサービスを利用する権限は不要

前提となるCAPプロジェクト

ベースとなるプロジェクトはGitHubからダウンロードできます。
このサービスは、全体的にauthenticated-user（認証されたユーザ）しかアクセスできなくなっており、Booksエンティティを使用するにはAdminロールが必要です。

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

@requires: 'authenticated-user'
service CatalogService {
     @(restrict: [
            { grant: ['READ', 'WRITE'], to: 'Admin' }
        ])    
    @readonly entity Books as projection on my.Books;
}

※認証付きのCAPの開発方法については以下も参照
【CAP】XSUAAによる認証を追加・ローカルでテスト

ローカル開発用の設定を確認

.cdrc.jsonというファイルにローカル開発用の権限の設定があります。この設定により、ローカル実行時は"admin"というユーザでアクセスすることで、認証をパスすることができます。

{
    "auth": {
        "passport": {
            "strategy": "mock", 
            "users": {
                "admin": { 
                    "password": "dummy", 
                    "ID": "admin",
                    "roles": ["Admin", "authenticated-user"]
                }                        
            }
        }
    }    
}

Destinationの登録

CAPプロジェクトをCloud Foundryにデプロイし、Destinationを登録します。UIとCAPでXSUAAのサービスインスタンスが分かれるため、AuthenticationのタイプをOAuthUserTokenExchangeとしています。
Client ID, Client Secret, Token Service URLはCAPのサービスにバインドされたXSUAAのサービスキーから取得したものです。

設定値

Additional Properties

サービスキーの作り方

コマンド：cf create-service-key <uaa_instance_name> <service_key_name>
例：cf create-service-key cap-auth-uaa dest-key

サービスキーの表示

コマンド：cf service-key <uaa_instance_name> <service_key_name>
例：cf service-key cap-auth-uaa dest-key

CAPを参照してUIを登録する

1. BTPにデプロイされたCAPサービスを使う場合

BASを使うとき、すでにBTPのユーザとして認証が行われているため、開発者（自分）に権限をつけるだけで認証が必要なCAPサービスにアクセスすることができます。

1.1. ロールの割り当て

BASに入る前に、開発者にCAPサービスを実行するのに必要な"Admin"のロールを割り当てておきます。

※すでにBASにログイン済の場合、ロール割当の後で一旦ログアウトしてログオン画面から入り直す必要があります。

1.2. プロジェクトの生成

テンプレートを起動し、"SAP Fiori application"を選択します。

データソースに"Connect to a System"を選択し、Systemに1.で登録したDestinationを選択します。Service Pathに/catalogと選択します。

BASにBTPユーザとしてログインしているので、認証を聞かれずに次画面に遷移しました。

Deployment configurationを追加する設定にします。

Destination nameに、1. で登録したDestinationを選択します。

あとはウィザードに従って進めると、プロジェクトが生成されます。

1.3. 実行してみる

実行してみます。

"Go"ボタンを押すとデータが表示されます。権限つきのユーザでアクセスできているということです。

2. ローカルのCAPサービスを使う場合

開発者に権限をつけたくない場合には、CAPサービスをローカルで動かして、UIからそこにアクセスすることができます。このためには、CAPのプロジェクトをUIと同じBASのスペースにクローンしておく必要があります。

ウィザードを起動する前に、ローカルのCAPプロジェクトをcds watchで起動しておきます。

2.1. プロジェクトの生成

以下では、プロジェクトの生成で1.と変わる部分について説明します。

データソースに"Connect to an OData Service"を選択し、OData service URLにローカルで実行中のODataサービスのURLを入力します。この際、認証を聞かれるので、.cdrc.jsonファイルにあるユーザ、パスワードを入力してログインします。今回の場合だとユーザが"admin"、パスワードが"dummy"となります。

            "users": {
                "admin": { 
                    "password": "dummy", 
                    "ID": "admin",
                    "roles": ["Admin", "authenticated-user"]
                }                        
            }

認証をパスすると次画面に進むことができます。

Deployment Configurationでは1.と同じように登録済のDestinationを選択します。

2.2. 実行してみる

実行すると、認証を聞かれます。ここでも"admin"のユーザIDとパスワードを入力します。

データが表示されました。

※ユーザID、パスワードをui5.yamlのfiori-tools-proxyのconfigに設定したかったのですが、現在のところそれはサポートされていないようです。
https://answers.sap.com/questions/13196438/feature-request-2.html

  customMiddleware:
  - name: fiori-tools-proxy
    afterMiddleware: compression
    configuration:
      ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
      backend:
      - path: /catalog
        url: http://localhost:4004

2.3. デプロイのための設定

生成されたxs-app.jsonファイルを見たところ、なぜかCAPサービスへのルートが定義されていませんでした。

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/resources/(.*)$",
      "target": "/resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^/test-resources/(.*)$",
      "target": "/test-resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

このままでは当然、Launchpadではバックエンドにアクセスできずにエラーになります。

そこで、以下のルートを追加します。

    {
      "source": "^/catalog/(.*)$",
      "target": "/catalog/$1",
      "destination": "cap-auth-srv",
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },

この事象はジェネレーターの不具合の可能性もあり、いずれ直るとは思いますが、それまではルートがちゃんと入っているか確認が必要です。

まとめ

この記事では、2つの方法で認証が必要なCAPのODataサービスをローカルのUI5アプリから利用する方法を説明しました。

1. BTPにデプロイされたCAPサービスを使う
2. ローカルのCAPサービスを使う

2.の場合、CAPプロジェクトをローカルに持ってくるので、CAP側が更新された場合にローカルのCAPプロジェクトも更新する必要があります。また、デプロイ用に設定を追加する必要があります。これらより、開発者に権限を付与できるのであれば、1.の方がスムーズだと思います。