次の方法で共有

Python Flask Web アプリケーションのサンプルでユーザーをサインインする

  • [アーティクル]

この記事では、Microsoft Entra 外部 ID によって保護されている Python Flask Web アプリについて説明します。 このサンプルでは、Python Flask Web アプリに対する認証を行う顧客のサインイン エクスペリエンスについて説明します。 このサンプル Web アプリでは、Microsoft Authentication Library for Python (MSAL Python) を使用してユーザー認証を処理します。

前提条件

Web アプリを登録する

Microsoft Entra を使用してアプリケーションでユーザーをサインインできるようにするには、作成するアプリケーションを Microsoft Entra 外部 ID に認識させる必要があります。 アプリの登録によって、アプリと Microsoft Entra の間に信頼関係が確立されます。 アプリケーションを登録すると、外部 ID によって、アプリケーション (クライアント) ID と呼ばれる一意識別子が生成されます。これは、認証要求を作成するときにアプリを識別するために使用される値です。

Microsoft Entra 管理センターにアプリを登録する方法を次の手順に示します。

  1. アプリケーション開発者以上として Microsoft Entra 管理センターにサインインします。

  2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコン を使用し、[ディレクトリとサブスクリプション] メニューから外部テナントに切り替えます。

  3. [ID]>[アプリケーション]>[アプリの登録] を参照します。

  4. [+ 新規登録] を選択します。

  5. 表示される [アプリケーションの登録] ページで、次のようにします。

    1. アプリのユーザーに表示されるわかりやすいアプリケーションの [名前] を入力します (例: ciam-client-app)。
    2. [サポートされているアカウントの種類] で、 [この組織のディレクトリ内のアカウントのみ] を選択します。

  6. [登録] を選択します。

  7. 登録が成功すると、アプリケーションの [概要] ペインが表示されます。 アプリケーションのソース コードで使用するアプリケーション (クライアント) ID を記録します。

アプリの登録に対してアプリの種類を指定するには、次の手順に従います。

  1. [管理] で、[認証] を選択します。
  2. [プラットフォーム構成] で、[プラットフォームの追加] を選択し、[Web] を選択 します。
  3. [リダイレクト URI] には、「http://localhost:3000/getAToken」と入力します。 このリダイレクト URI は、承認サーバーがアクセス トークンを送信する場所です。 これは、ユース ケースに合わせてカスタマイズできます。
  4. [構成] を選択して変更を保存します。

アプリのクライアント シークレットを追加する

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

  1. [アプリの登録] ページで、作成したアプリケーション ("ciam-client-app" など) を選択して、その [概要] ページを開きます。
  2. [管理] で、[証明書とシークレット] を選択します。
  3. [新しいクライアント シークレット] を選択します。
  4. [説明] ボックスにクライアント シークレットの説明を入力します (例、ciam app client secret)。
  5. [有効期限] で、シークレットが (組織のセキュリティ規則に基づいて) 有効な期間を選択してから、[追加] を選択します。
  6. シークレットの値を記録します。 この値は、後の手順での構成に使用します。 シークレットの値は再表示されず、[証明書とシークレット] から移動した後はどのような手段でも取得できません。 必ず記録しておくようにしてください。

  1. [アプリの登録] ページで、作成したアプリケーション ("ciam-client-app" など) を選択して、その [概要] ページを開きます。

  2. [管理] の下にある [API のアクセス許可] を選択します。 構成済みアクセス許可一覧から、お使いのアプリケーションに User.Read アクセス許可が割り当てられています。 ただし、テナントが外部テナントであるため、コンシューマー ユーザー自身はこのアクセス許可に同意できません。 管理者は、テナント内のすべてのユーザーに代わってこのアクセス許可に同意する必要があります。

    1. [<ご使用のテナント名> に管理者の同意を与えます] を選択してから、[はい] を選択します。
    2. [最新の情報に更新] を選択し、両方のスコープの [状態] に "<ご使用のテナント名> に付与されました" と表示されていることを確認します。

ユーザー フローを作成する

次の手順に従って、顧客がアプリケーションにサインインまたはサインアップするために使用できるユーザー フローを作成します。

  1. Microsoft Entra 管理センターに少なくとも外部 ID ユーザー フロー管理者としてサインインします。

  2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコン を使用して、[ディレクトリとサブスクリプション] メニューから外部テナントに切り替えます。

  3. [ID]>[External Identities]>[ユーザー フロー] に移動します。

  4. [+ 新しいユーザー フロー] を選択します。

  5. [作成] ページで、次のようにします。

    1. ユーザー フローの [名前] ("SignInSignUpSample" など) を入力します。

    2. [ID プロバイダー] の一覧で、[メール アカウント] を選択します。 この ID プロバイダーを使用すると、ユーザーが自分のメール アドレスを使用してサインインまたはサインアップできます。

      注意

      追加の ID プロバイダーは、それらとのフェデレーションを設定した後にのみここに一覧表示されます。 たとえば、Google または Facebook とのフェデレーションを設定すると、それらの追加 ID プロバイダーをここで選択できます。

    3. [メール アカウント] で、2 つのオプションのいずれかを選択できます。 このチュートリアルでは、[Email with password] (メール アドレスとパスワード) を選択します。

      • [Email with password] (メール アドレスとパスワード): 新しいユーザーは、サインイン名としてメール アドレスを、その最初の要素の資格情報としてパスワードを使用してサインアップおよびサインインできます。
      • メールのワンタイム パスコード: 新しいユーザーが、サインイン名としてメール アドレスを、最初の要素の資格情報としてメールのワンタイム パスコードを使用してサインアップおよびサインインできるようにします。 このオプションをユーザー フロー レベルで使用可能にするには、メールのワンタイム パスコードをテナント レベルで有効にする必要があります ([All Identity Providers] (すべての ID プロバイダー)>[メールのワンタイム パスコード])。

    4. [ユーザー属性] で、サインアップ時にユーザーから収集する属性を選択します。 [さらに表示] を選択すると、[国または地域]、[表示名]、[郵便番号] の属性と要求を選択できます。 [OK] を選択します。 (ユーザーは、初めてサインアップするときにのみ属性の入力を求められます)。

  6. ［作成］ を選択します 新しいユーザー フローは [ユーザー フロー] の一覧に表示されます。 必要に応じて、ページを更新してください。

セルフサービス パスワード リセットを有効にするには、「セルフサービス パスワード リセットを有効にする」の記事の手順を使用します。

Web アプリケーションをユーザー フローに関連付ける

ユーザー フローには多くのアプリケーションを関連付けることができますが、1 つのアプリケーションは 1 つのユーザー フローにしか関連付けることができません。 ユーザー フローを使用すると、特定のアプリケーション用のユーザー エクスペリエンスを構成できます。 たとえば、ユーザーにメール アドレスを使用してサインインまたはサインアップすることを要求するユーザー フローを構成できます。

  1. サイドバー メニューで、[ID] を選択します。

  2. [External Identities]、[User flows] (ユーザー フロー) の順に選択します。

  3. [ユーザー フロー] ページで、前に作成した [ユーザー フロー名] (SignInSignUpSample など) を選びます。

  4. [使用] で、[アプリケーション] を選択します。

  5. [アプリケーションの追加] をクリックします。

  6. 一覧からアプリケーション ("ciam-client-app" など) を選択するか、検索ボックスを使用してアプリケーションを見つけ、それを選択します。

  7. [選択] を選択します。

サンプル Web アプリケーションを複製またはダウンロードする

サンプル アプリケーションを取得するには、GitHub から複製するか、.zip ファイルとしてダウンロードします。

  • サンプルをクローンするには、コマンド プロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。

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

  • .zip ファイルをダウンロードします。 名前の長さが 260 文字未満のファイル パスに抽出します。

プロジェクトの依存関係をインストールする

  1. コンソール ウィンドウを開き、Flask サンプル Web アプリが含まれるディレクトリに移動します。

    cd flask-web-app

  2. 仮想環境を設定する

    py -m venv .venv
.venv\scripts\activate

  3. 次のコマンドを実行してアプリの依存関係をインストールします。

    python3 -m pip install -r requirements.txt

サンプル Web アプリを構成する

  1. Visual Studio Code または使用しているエディターでプロジェクト ファイルを開きます。

  2. .env.sample を参考にして、プロジェクトのルート フォルダーに .env ファイルを作成します。

  3. .env ファイルでは、次の環境変数を指定します。

    • CLIENT_ID は、前に登録したアプリのアプリケーション (クライアント) ID です。
    • CLIENT_SECRET は、前にコピーしたアプリ シークレットの値です。
    • AUTHORITY は、トークン機関を識別する URL です。 これは https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com 形式である必要があります。 subdomain をディレクトリ (テナント) サブドメインに置き換えます。 たとえば、テナントのプライマリ ドメインが contoso.onmicrosoft.com の場合は、contoso を使用します。 テナントのサブドメイン名がない場合は、テナントの詳細を読み取る方法を確認してください。

  4. リダイレクト URI が適切に構成されていることを確認します。 前に登録したリダイレクト URI は、この構成と一致している必要があります。 このサンプルでは、既定でリダイレクト URI パスを /getAToken に設定します。 これは、REDIRECT_PATH として app_config.py ファイルで構成されています。

サンプル Web アプリを実行してテストする

アプリを実行して、実際にサインイン エクスペリエンスを確認します。

Note

このサンプルでは、Python ID サードパーティ ライブラリを使用します。 ライブラリは Microsoft によって正式に管理されていませんが、使用をお勧めします。 このライブラリを使用すると、多くの MSAL Python の詳細が抽象化されるため、Web アプリに認証を簡単に追加できます。

  1. ご利用のターミナルで、次のコマンドを実行します。

    python3 -m flask run --debug --host=localhost --port=3000

    自分で選択したポートを使用できます。 これは、先ほど登録したリダイレクト URI のポートに似ている必要があります。

  2. ブラウザーを開き、http://localhost:3000 に移動します。 以下のスクリーンショットのようなページが表示されます。

    Flask Web アプリのサンプル サインイン ページのスクリーンショット。

  3. ページの読み込みが完了したら、[サインイン] リンクを選択します。 サインインするように求められます。

  4. サインイン ページで、[メール アドレス] を入力して [次へ] を選択し、[パスワード] を入力してから [サインイン] を選択します。 アカウントをお持ちでない場合は、[アカウントをお持ちではない場合、作成できます] リンクを選択します。これで、サインアップ フローが開始されます。

  5. サインアップ オプションを選択した場合は、サインアップ フローを実行します。 メール アドレス、ワンタイム パスコード、新しいパスワード、その他のアカウントの詳細を入力してサインアップ フロー全体を完了します。

  6. サインインまたはサインアップが終了すると、Web アプリにリダイレクトされます。 次のスクリーンショットのようなページが表示されます。

    認証が成功した後の Flask Web アプリサンプルのスクリーンショット。

  7. [ログアウト] を選択してユーザーを Web アプリからサインアウトするか、[ダウンストリーム API を呼び出す] を選択して Microsoft Graph エンドポイントを呼び出します。

しくみ

ユーザーが [サインイン] リンクを選択すると、アプリによって認証要求が開始され、ユーザーは Microsoft Entra 外部 ID にリダイレクトされます。 ユーザーは、表示されるページにサインインするか、ページにサインアップします。 必要な資格情報を入力し、必要なスコープに同意すると、Microsoft Entra 外部 ID によって、ユーザーは認可コードと共に Web アプリにリダイレクトされます。 そして、Web アプリはこの認可コードを使用して、Microsoft Entra 外部 ID からトークンを取得します。

ユーザーが [ログアウト] リンクを選択すると、アプリによってそのセッションがクリアされ、ユーザーが Microsoft Entra 外部 ID のサインアウト エンドポイントにリダイレクトされ、ユーザーがサインアウトしたことが通知されます。その後、ユーザーは再度 Web アプリにリダイレクトされます。

関連するコンテンツ