Azure AD B2C を使ってサンプル Python Web アプリケーションで認証を構成する

[アーティクル]
06/04/2024

この記事では、サンプルの Python Web アプリケーションを使用して、Web アプリケーションに Azure Active Directory B2C (Azure AD B2C) 認証を追加する方法を説明します。

概要

OpenID Connect (OIDC) は、OAuth 2.0 を基盤にした認証プロトコルです。 OIDC を使用して、ユーザーを安全にアプリケーションにサインインさせることができます。この Web アプリのサンプルでは、Python の ID パッケージを使用して、Python Web アプリへの認証と認可のサポートの追加を簡略化します。

サインインフローでは、次の手順が実行されます。

ユーザーが Web アプリにアクセスして [サインイン] を選択します。
アプリによって認証要求が開始され、ユーザーが Azure AD B2C にリダイレクトされます。
ユーザーがサインアップまたはサインイン、パスワードのリセット、またはソーシャルアカウントを使用したサインインを行います。
ユーザーがサインインに成功すると、Azure AD B2C はアプリに ID トークンを返します。
アプリは、承認コードと引き換えに ID トークンを取得し、その ID トークンを検証して要求を読み取った後、安全なページをユーザーに返します。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
まだ持っていない場合は、お使いの Azure サブスクリプションにリンクされている Azure AD B2C テナントを作成します。
python=3.8.10

手順 1: ユーザーフローを構成する

ユーザーがアプリにサインインしようとすると、ユーザーフローを介した承認エンドポイントへの認証要求がアプリによって開始されます。ユーザーフローによって、ユーザーのエクスペリエンスが定義および制御されます。ユーザーがユーザーフローを完了すると、Azure AD B2C によってトークンが生成され、ユーザーはアプリケーションにリダイレクトされます。

ユーザーフローまたはカスタムポリシーの作成をまだ行っていない場合は、作成します。手順を繰り返して、次のように 3 つの個別のユーザーフローを作成します。

サインインとサインアップを結合したユーザーフロー (例:)susi。このユーザーフローでは、パスワードを忘れた 場合のエクスペリエンスもサポートされています。
プロファイル編集 ユーザーフロー (例: edit_profile) 。
パスワードのリセット ユーザーフロー (例: reset_password)。

Azure AD B2C は、 B2C_1_ ユーザーフロー名の前に付加されます。たとえば、susi が B2C_1_susi になります。

手順 2: Web アプリケーションを登録する

アプリケーションが Azure AD B2C でサインインできるようにするには、Azure AD B2C ディレクトリにアプリを登録します。アプリを登録すると、アプリと Azure AD B2C の間に信頼関係が確立されます。

アプリの登録時に、リダイレクト URI を指定します。リダイレクト URI は、ユーザーが Azure AD B2C で認証を行った後、Azure AD B2C によってリダイレクトされるエンドポイントです。アプリの登録プロセスによって、アプリを一意に識別する "アプリケーション ID" ("クライアント ID" とも呼ばれます) が生成されます。アプリが登録されると、Azure AD B2C はアプリケーション ID とリダイレクト URI の両方を使用して認証要求を作成します。

手順 2.1: アプリを登録する

Web アプリの登録を作成するには、次の手順に従います。

Azure portal にサインインします。
複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
Azure portal で、 [Azure AD B2C] を検索して選択します。
[アプリの登録] を選択し、 [新規登録] を選択します。
[名前] で、アプリケーションの名前を入力します (webapp1 など)。
[サポートされているアカウントの種類] で、 [Accounts in any identity provider or organizational directory (for authenticating users with user flows)]((ユーザーフローを使用してユーザーを認証するための) 任意の ID プロバイダーまたは組織のディレクトリのアカウント) を選択します。
[リダイレクト URI] で、 [Web] を選択し、URL ボックスに「http://localhost:5000/getAToken」と入力します。
[アクセス許可] で、 [Grant admin consent to openid and offline access permissions](OpenID とオフラインのアクセス許可に管理者の同意を与える) チェックボックスをオンにします。
[登録] を選択します。
[概要] を選択します。
アプリケーション (クライアント) ID を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

手順 2.2: Web アプリのクライアントシークレットを作成する

登録済み Web アプリケーションに対してクライアントシークレットを作成します。 Web アプリケーションでは、トークンを要求するときに、このクライアントシークレットを使ってその ID を証明します。

[管理] で、[証明書とシークレット] を選択します。
[新しいクライアントシークレット] を選択します。
[説明] ボックスにクライアントシークレットの説明を入力します (例、clientsecret1)。
[有効期限] で、シークレットが有効な期間を選択してから、 [追加] を選択します。
シークレットの値を記録します。この値は、後の手順での構成に使用します。

手順 3: Web アプリのサンプルを取得する

ZIP ファイルをダウンロードするか、GitHub からサンプル Web アプリケーションをクローンします。

git clone https://github.com/Azure-Samples/ms-identity-python-webapp.git

パスの合計文字長が 260 以下のフォルダーにサンプルファイルを展開します。

手順 4: サンプル Web アプリを構成する

プロジェクトのルートディレクトリで、次の手順に従います。

ガイドとして .env.sample を使用して、プロジェクトのルートフォルダーに .env ファイルを作成します。

FLASK_DEBUG=True
B2C_TENANT_NAME=<tenant name>
CLIENT_ID=<client id>
CLIENT_SECRET=<client secret>
SIGNUPSIGNIN_USER_FLOW=B2C_1_signupsignin1
EDITPROFILE_USER_FLOW=B2C_1_profile_editing
RESETPASSWORD_USER_FLOW=B2C_1_reset_password

Key	値
`B2C_TENANT_NAME`	Azure AD B2C テナント名の最初の部分 (例: `contoso`)。
`CLIENT_ID`	手順 2.1 の Web API アプリケーション ID。
`CLIENT_SECRET`	手順 2.2 で作成したクライアントシークレット値。
`*_USER_FLOW`	手順 1 で作成したユーザーフロー。

環境変数は app_config.py で参照され、ソース管理の対象外にしておくために別の .env ファイルに保持されます。指定された .gitignore ファイルを使用すると、.env ファイルがチェックインされなくなります。

手順 5: サンプル Web アプリを実行する

コンソールまたはターミナルから、サンプルが格納されているディレクトリに切り替えます。次に例を示します。
```
cd ms-identity-python-webapp
```

次のコマンドを実行して、PyPi から必要なパッケージをインストールし、ローカルコンピューターで Web アプリを実行します。

python -m pip install -r requirements.txt
python -m flask run --host localhost --port 5000

python -m pip install -r requirements.txt
python -m flask run --host localhost --port 5000

py -m pip install -r requirements.txt
py -m flask run --host localhost --port 5000

コンソールウィンドウには、ローカルで稼働中のアプリケーションのポート番号が表示されます。

 * Debug mode: on
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Running on `http://localhost:5000/` (Press CTRL+C to quit)

ローカルコンピューターで実行されている Web アプリケーションを表示するために、http://localhost:5000 に移動します。
[サインイン] を選択します。
サインインアップまたはサインインプロセスを完了します。
認証が成功すると、自分の表示名が次のように表示されます。

ステップ 6: Web API を呼び出す

アプリで Azure AD B2C を使用してサインインし、Web API を呼び出せるようにするには、Azure AD B2C ディレクトリに 2 つのアプリケーションを登録する必要があります。

手順 2. で既に作成した Web アプリケーション (Python) 登録。このアプリ登録により、Azure AD B2C を使用したアプリのサインインが可能となります。アプリの登録プロセスによって、アプリを一意に識別する "アプリケーション ID" ("クライアント ID" とも呼ばれます) が生成されます。たとえば、アプリ ID: 1 などです。
Web API を登録すると、保護された Web API をアプリで呼び出すことができます。この登録により、Web API のアクセス許可 (スコープ) が公開されます。アプリの登録プロセスによって、Web API を一意に識別する "アプリケーション ID" が生成されます (たとえば "アプリ ID: 2")。アプリ (アプリ ID: 1) のアクセス許可を Web API スコープ (アプリ ID: 2) に付与します。

次の図で、アプリの登録とアプリケーションアーキテクチャについて説明しています。

Web API、登録、トークンを含む Web アプリの説明図。

認証が完了した後、ユーザーがアプリと対話すると、保護された Web API が呼び出されます。その Web API では、ベアラートークン認証が使用されます。ベアラートークンは、アプリによって Azure AD B2C から取得されたアクセストークンです。アプリでは、HTTPS 要求の Authorization ヘッダーでトークンを渡します。

Authorization: Bearer <access token>

アクセストークンのスコープが Web API のスコープと一致しない場合、認証ライブラリでは正しいスコープの新しいアクセストークンが取得されます。

手順 6.1: Web API アプリを登録する

Web API アプリの登録 (App ID: 2) を作成するには、次の手順に従います。

Azure portal にサインインします。
ご自分の Azure AD B2C テナントが含まれるディレクトリを必ず使用してください。ポータルツールバーの [Directories + subscriptions](ディレクトリ + サブスクリプション) アイコンを選択します。
[ポータルの設定] | [Directories + subscriptions](ディレクトリ + サブスクリプション) ページの [ディレクトリ名] の一覧で自分の Azure AD B2C ディレクトリを見つけて、 [切り替え] を選択します。
Azure portal で、 [Azure AD B2C] を検索して選択します。
[アプリの登録] を選択し、 [新規登録] を選択します。
アプリケーションの名前を入力します (my-api1 など)。 [リダイレクト URI] と [サポートされているアカウントの種類] を既定値のままにします。
[登録] を選択します。
アプリ登録が完了したら、 [概要] を選択します。
アプリケーション (クライアント) ID の値を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

手順 6.2: スコープを構成する

作成した my-api1 アプリケーション (App ID: 2) を選択して、その [概要] ページを開きます。
[管理] の [API の公開] を選択します。
[アプリケーション ID URI] の横にある [設定] リンクを選択します。既定値 (GUID) を一意の名前 (例: tasks-api) に置き換え、[保存] を選択します。

Web アプリケーションで Web API のアクセストークンを要求するときに、API に対して定義する各スコープのプレフィックスとしてこの URI を追加する必要があります。
[この API で定義されるスコープ] で、 [スコープの追加] を選択します。
API への読み取りアクセスを定義するスコープを作成するには:
1. [スコープ名] に tasks.read を入力します。
2. [管理者の同意の表示名] で、「Read access to tasks API」を入力します。
3. [管理者の同意の説明] で、「Allows read access to the tasks API」を入力します。
[スコープの追加] を選択します。
[Add a scope (スコープの追加)] を選択し、API への書き込みアクセスを定義するスコープを追加します。
1. [スコープ名] に「tasks.write」を入力します。
2. [管理者の同意の表示名] に、「Write access to tasks API」を入力します。
3. [管理者の同意の説明] に、「Allows write access to the tasks API」を入力します。
[スコープの追加] を選択します。

手順 6.3: Web アプリにアクセス許可を付与する

アプリ (アプリ ID: 1) にアクセス許可を付与するには、次の手順をおこないます。

[アプリの登録] を選択し、作成したアプリを選択します (アプリ ID: 1)。
[管理] の下にある [API のアクセス許可] を選択します。
[構成されたアクセス許可] の下で [アクセス許可の追加] を選択します。
[自分の API] タブを選択します。
Web アプリケーションへのアクセス許可が必要な API を選択します (アプリ ID: 2)。たとえば、「my-api1」と入力します。
[アクセス許可] で、 [タスク] を展開し、前に定義したスコープを選択します(たとえば、tasks.read と tasks.write)。
[アクセス許可の追加] を選択します.
[<テナント名> に管理者の同意を与えます] を選択します。
[はい] を選択します。
[最新の情報に更新] を選択し、両方のスコープの [状態] に、Granted for ...(... に付与されました) と表示されていることを確認します。
[Configured permissions (構成済みのアクセス許可)] の一覧からスコープを選択し、スコープの完全な名前をコピーします。

手順 6.4: Web API を構成する

このサンプルでは、Web アプリが Web API に対して使用できる、適切なスコープを含んだアクセストークンを取得します。このサンプル自体は、Web API として機能 "しません"。代わりに、既存の Web API を使用するか、新たに作成する必要があります。 B2C テナントでの Web API の作成に関するチュートリアルについては、「Azure AD B2C を使用して独自の Web API で認証を有効にする」を参照してください。

手順 6.5: Web API を使用してサンプルアプリを構成する

app_config.py ファイルを開きます。このファイルには、Azure AD B2C ID プロバイダーに関する情報が含まれています。アプリ設定の次のプロパティを更新します。

Key	値
`ENDPOINT`	Web API の URI (例: `https://localhost:6000/hello`)。
`SCOPE`	作成した Web API スコープ (例: `["https://contoso.onmicrosoft.com/tasks-api/tasks.read", https://contoso.onmicrosoft.com/tasks-api/tasks.write"]`)。

手順 6.6: サンプルアプリを実行する

コンソールまたはターミナルから、サンプルが格納されているディレクトリに切り替えます。
アプリがまだ実行されていない場合は、手順 5 のコマンドを使用して再起動します。
[ダウンストリーム API の呼び出し] を選択します。

手順 7: アプリケーションをデプロイする

運用アプリケーションでは、アプリ登録のリダイレクト URI は通常、アプリが実行されているパブリックにアクセス可能なエンドポイント (https://contoso.com/getAToken など) です。

お使いの登録済みアプリケーションでは、いつでもリダイレクト URI を追加したり、変更したりすることができます。リダイレクト URI には、次の制限があります。

リダイレクト URL は、スキーム https で始まる必要があります。
リダイレクト URI では大文字と小文字が区別されます。大文字と小文字の区別は、実行中のアプリケーションの URL パスの場合と一致している必要があります。

次のステップ

Azure AD B2C を使用して Python Web アプリの認証オプションを構成する方法をご覧ください。

次の方法で共有

Azure AD B2C を使ってサンプル Python Web アプリケーションで認証を構成する

概要

前提条件

手順 1: ユーザーフローを構成する

手順 2: Web アプリケーションを登録する

手順 2.1: アプリを登録する

手順 2.2: Web アプリのクライアントシークレットを作成する

手順 3: Web アプリのサンプルを取得する

手順 4: サンプル Web アプリを構成する

手順 5: サンプル Web アプリを実行する

ステップ 6: Web API を呼び出す

手順 6.1: Web API アプリを登録する

手順 6.2: スコープを構成する

手順 6.3: Web アプリにアクセス許可を付与する

手順 6.4: Web API を構成する

手順 6.5: Web API を使用してサンプルアプリを構成する

手順 6.6: サンプルアプリを実行する

手順 7: アプリケーションをデプロイする

次のステップ

フィードバック

その他のリソース

次の方法で共有

Azure AD B2C を使ってサンプル Python Web アプリケーションで認証を構成する

概要

前提条件

手順 1: ユーザー フローを構成する

手順 2: Web アプリケーションを登録する

手順 2.1: アプリを登録する

手順 2.2: Web アプリのクライアント シークレットを作成する

手順 3: Web アプリのサンプルを取得する

手順 4: サンプル Web アプリを構成する

手順 5: サンプル Web アプリを実行する

ステップ 6: Web API を呼び出す

手順 6.1: Web API アプリを登録する

手順 6.2: スコープを構成する

手順 6.3: Web アプリにアクセス許可を付与する

手順 6.4: Web API を構成する

手順 6.5: Web API を使用してサンプル アプリを構成する

手順 6.6: サンプル アプリを実行する

手順 7: アプリケーションをデプロイする

次のステップ

フィードバック

その他のリソース

手順 1: ユーザーフローを構成する

手順 2.2: Web アプリのクライアントシークレットを作成する

手順 6.5: Web API を使用してサンプルアプリを構成する

手順 6.6: サンプルアプリを実行する