このサンプルでは、 Azure App Service が提供する二勝機能 EasyAuth を用いて認証設定した場合に、認証されたユーザの情報を取得する方法を示します。
構成としては、 Flask (Python 3.10) と React (18) が同じ App Service 上に動作しており、 Flask がバックエンドサービス (API サーバ ) として起動し、静的なコンテンツとして、 React のアプリを返す構成です。
- Azure App Service は Linux 環境で動作していること
- Azure App Service には、Python 3.10 がインストールされていること
- (オプショナル) Visual Studio Code に Azure App Service 拡張機能がインストールされていること
- Azure App Service にサンプルコードをデプロイする
- Azure App Service に EasyAuth の設定をする
- ブラウザから Web サイトにアクセスする
Azure App Service では FTP でのアップロードや Azure CLI を用いたデプロイなどアプリを設置するための様々な方法を提供していますが、今回は Visual Studio Code を用いて設置します。
そのほかの方法で設置する場合、 こちら を参照してください。
1-1. Visual Studio Code でプロジェクトを開き、ファイルエクスプローラの「 backend 」フォルダ上にカーソルを置いて、右クリックし、コンテキストメニューから「 Deploy to Web App... 」を選択します。
詳細は 公式ドキュメント を参照してください。今回、設定したパラメータは次の通りです。
下記のように入力して「登録」ボタンを押します。
| パラメータ名 | 設定値 | パラメータの説明 |
|---|---|---|
| 名前 | (任意の値) | オブジェクトの名前 |
| サポートされるアカウントの種類 | この組織ディレクトリのみ | このアプリを利用できるユーザの範囲 |
| リダイレクト URI (種類) | Web | 認証するアプリの種類 |
| リダイレクト URI (値) | https://(App Service の名前).azurewebsites.net/.auth/login/aad/callback | 認証後にリダイレクトする URI |
| パラメータ名 | 設定値 | パラメータの説明 |
|---|---|---|
| ID プロバイダ | Microsoft | 認証プロバイダ |
| テナントの種類 | 従業員 | 従業員向けの Azure AD か顧客向けの Azure AD B2C かの選択 |
| アプリの登録の種類 | このディレクトリにある既存のアプリの登録を選択する | Azure AD のアプリの登録を新規作成するか既存のオブジェクトを利用するかの選択 |
| 名前またはアプリ ID | 作成したアプリの登録オブジェクト | Azure AD で定義する認証オブジェクト |
| 発行者の URL | (空欄) | Azure AD のテナント情報 (自動入力されるので入力しない) |
| アクセスを制御する | 認証が必要 | App Service アクセス時に認証を必須にするか |
| 認証されない要求 | HTTP 302 | 認証されていないアクセスの取り扱い |
開発者ツールに下記のように flask へ送られた HTTP リクエストのヘッダ情報が返ってきます。
これらの情報の中で認証に関連する情報は次のようになります。(参考)
| ヘッダ名 | 概要 |
|---|---|
| X-MS-CLIENT-PRINCIPAL | Base64 でエンコードされた認証情報 |
| X-MS-CLIENT-PRINCIPAL-ID | ID プロバイダーによって設定された呼び出し元の識別子 |
| X-MS-CLIENT-PRINCIPAL-NAME | ID プロバイダーによって設定された呼び出し元の人間が判読できる名前 (AAD の場合メールアドレス) |
| X-MS-CLIENT-PRINCIPAL-IDP | App Service 認証で使用される ID プロバイダーの名前 |