Azure Active DirectoryでAPI Portalへのアクセスを管理 - Cloud

EnrichVersion
Cloud
EnrichProdName
Talend Cloud
EnrichPlatform
Talend API Designer
task
ジョブデザインと開発

Azure Active DirectoryでAPI Portalへのアクセスを管理

Azure Static Web AppsにAPI Portalをデプロイし、コンシューマーのロール権限およびアクセス権限を設定します。

Azure Static Web Appsでは、API Portalの認証を管理するためAzure Active Directoryの使用を許可するロール管理機能が実装されています。ユーザーのカスタムロールを簡単に定義して、特定のページへのアクセスを制限できます。

次の例では、API Portalに含まれるのは:
  • カスタムランディングページ
  • カスタム"リクエストアクセス"ページ
  • 公開済みAPIドキュメンテーションを含んだデフォルトのAPIリスト
  • デフォルトの"はじめに"ページ

"はじめに"ページとAPIドキュメンテーションはapi_developerロールを担ったユーザーにのみ使用できるはずで、ランディングページと"アクセスをリクエスト"ページはすべての認証ユーザーのために表示されるはずです。

ランディングページをカスタマイズまたは新しいページを作成する方法の詳細は、 コンテンツの整理と追加を参照してください。

Azure Static Web Appsのカスタムロールを定義

API Portalリポジトリーにファイルを作成して、カスタムロールとそれらの権限を定義します。

始める前に

Talend Cloud API DesignerからのAPI Portalリポジトリーが生成済みであること。詳細は、Talend Cloud API Designerユーザーガイドを参照してください。

手順

  1. API Portalリポジトリーのルートに、staticwebapp.config.jsonというファイルを作成します。
    このファイルによって、ルートとそれらにアクセスできるユーザーロールが定義されます。詳細は、Azure Static Web Appsのルートを参照してください。
  2. ルートを定義します。
    この例では、以下の5つのルートを追加する必要があります:
    • Azure Active Directoryでユーザーがログインできる/login
    • ユーザーがログアウトできる/logout
    • ユーザーに関する情報を表示する/me
    • APIのリストとAPIドキュメンテーションの処理方法を指定する/apis/*
    • "はじめに"ページの処理方法を指定する/getting-started
    • API Portal上の他のどのページもの処理方法を指定する/*。このルートはファイルの最後である必要があります。

    必要に応じて、他の承認プロバイダーをブロックするルートも追加できます。詳細は、承認プロバイダーをブロックするページを参照してください。

  3. ユーザーがログインしていない場合に、リダイレクトされるように定義します。

    認証されたユーザーにのみ使用できるページにログインしていないユーザーがアクセスを試みる場合に、Azure Static Web Appsによって401というステータスコードが返されます。responseOverridesエレメントを使用して、ユーザーをデフォルトエラーページからログインページにリダイレクトできます。詳細は、 応答のオーバーライドを参照してください。

    この例では、 staticwebapp.config.jsonファイルは以下のようです:
    {
        "routes": [
            {
                "route": "/login",
                "rewrite": "/.auth/login/aad"
            },
            {
                "route": "/logout",
                "redirect": "/.auth/logout"
            },
            {
                "route": "/me",
                "redirect": "/.auth/me"
            },
            {
                "route": "/apis/*",
                "allowedRoles": ["api_developer"]
            },
            {
                "route": "/getting-started",
                "allowedRoles": ["api_developer"]
            },
            {
                "route": "/*",
                "allowedRoles": ["authenticated"]
            }
        ],
        "responseOverrides": {
            "401": {
                "redirect": "/login",
                "statusCode": 302
            }
        }
    }
  4. 変更をコミットします。

API Portalヘッダーをカスタマイズ

API Portalのヘッダーをカスタマイズして、ユーザー情報と[Log out] (ログアウト)ボタンを表示させます。

このタスクについて

必要に応じて、API PortalのHTMLファイルをカスタマイズして、カスタムエレメントを追加できます。ベストプラクティスは、themes/talendからリポジトリーのルートにフォルダーとファイルをコピーすることです。これにより、デフォルトのファイルを編集せずに、それらを上書きできます。
警告: テーマファイルのオーバーライド後、テーマの更新されたバージョンをダウンロードすれば、カスタムファイルを手動で更新する必要があります。

手順

  1. API Portalリポジトリーのルートに、layoutsフォルダーを作成し、その中にpartialsフォルダーを作成します。
  2. 作成した/layouts/partialsフォルダー内に/themes/talend/layouts/partials/header.htmlというファイルをコピーします。
    リポジトリーにはheader.htmlファイルが2つあるようになります。/layouts/partials内のファイルのみ編集するべきです。
  3. 新しいheader.htmlファイル内の</ul>終了タグの前に、ログアウトページへのリンクとユーザー情報を含む新しい<li>エレメントを追加します。

    例え

      <li style="margin-left: auto; margin-right: 1em">
        <a href="/logout">Log out</a>
        <span id="user"></span>
      </li>
  4. </ul>終了タグの後に、<script>エレメントを追加して、/meルートからユーザー情報を取得します。

    例え

    <script>
      fetch('/me')
      .then(response => response.json())
      .then(me => document.getElementById('user').innerHTML = me.clientPrincipal.userDetails)
      .catch(e => document.getElementById('user').innerHTML = 'Anonymous');
    </script>
  5. 変更をコミットします。

Azure Static Web Appsでポータルをデプロイ

GitHubリポジトリーをAzure Static Web Appsに接続してポータルをデプロイします。 詳細は、Azure Static Web Appsのドキュメンテーションを参照してください。

始める前に

  • Microsoft Azureで関連する権限を有していること。
  • API Portalリポジトリーをが生成済みであること。

手順

  1. Azureアカウントにログインし、[Static Web Apps] (静的Webアプリサービス)を開きます。
  2. [Add] (追加)をクリックし、新しい静的Webアプリを作成します。
  3. プロジェクトの詳細]セクションでサブスクリプションとリソースグループを選択します。
  4. [Static Web App details] (静的Webアプリの詳細)で、Webアプリの名前を入力し、リージョンを選択します。
  5. [Sign in with GitHub] (GitHubでサインイン)をクリックし、GitHubアカウントを自分のWebアプリにリンクさせて、[Authorize Azure-App-Service-Static-Web-Apps] (Azure-App-Service-Static-Web-Appsを承認)をクリックします。
  6. アカウントがリンクされたら、ポータルのビルドに使う組織、リポジトリー、ブランチを選択します。
  7. [Build Presets] (ビルドプリセット)ドロップダウンリストで[Hugo]を選択し、場所について必要となる詳細を入力します。
    このパラメーターによってAzure Static Web Appsは、GitHubリポジトリーで提供されているビルド設定を自動的に使用できるようになります。
  8. [レビューと作成]をクリックします。
  9. 設定が正しいことを確認して[作成]をクリックします。

タスクの結果

ポータルがデプロイされ、GitHubアクションがリポジトリーで自動的に開始されます。
完了したら、Azure Static Web Appsに表示されているURLをクリックしてポータルにアクセスします。

API Portalにユーザーを追加

自分のAPI Portalにアクセスするようユーザーを招待して、ロールを管理します。

手順

  1. Azure Static Web Appsで、API Portalアプリを開いて[Settings] (設定) > [Role management] (ロール管理)に移動します。
  2. [Invite] (招待)ボタンをクリックします。
  3. [Authentication provider] (認証プロバイダー)フィールドで[Azure Active Directory]を選択して、ユーザーのメールアドレスを入力します。
  4. staticwebapp.config.jsonで定義されているように、関連するカスタムロールの名前を入力します。
    この例では、api_developerカスタムロールを担っています。
  5. [Generate] (生成)をクリックします。
  6. 提供された招待リンクを対応するユーザーと共有します。

タスクの結果

招待リンクを使ったら、ユーザーはログインできて、自分のメールアドレスとユーザー名にアクセス権を付与するよう求められます。その後、このユーザーのロールによってアクセスできるページが表示されるようになります。