クイックスタート - サンプル Web アプリでユーザーをサインインする - Microsoft identity platform

2025-08-25

適用対象: 次の内容が従業員テナントに適用されることを示す白いチェックマーク記号が付いた緑の円。従業員テナント :次の内容が外部テナントに適用されることを示す白いチェックマーク記号が付いた緑の円。外部テナント (詳細)

このクイックスタートでは、サンプル Web アプリを使用して、従業員テナントでユーザーをサインインさせ、Microsoft Graph API を呼び出す方法を示します。サンプルアプリでは、 Microsoft 認証ライブラリを使用して認証を処理します。

開始する前に、このページの上部にある [テナントの種類 の選択] セレクターを使用して、テナントの種類を選択します。 Microsoft Entra ID には、従業員と外部の 2 つのテナント構成が用意されています。従業員テナントの構成は、従業員、内部アプリ、およびその他の組織リソースを対象としています。外部テナントは、顧客向けのアプリ用です。

[前提条件]

アクティブなサブスクリプションを持つ Azure アカウント。アカウントをまだお持ちでない場合は、無料でアカウントを作成してください。
この Azure アカウントには、アプリケーションを管理するためのアクセス許可が必要です。次の Microsoft Entra ロールには、必要なアクセス許可が含まれます。
- アプリケーション管理者
- アプリケーション開発者
従業員テナント。既定のディレクトリを使用するか、新しいテナントを設定できます。
Visual Studio Code または別のコードエディター。

この組織のディレクトリ内のアカウント専用に構成された Microsoft Entra 管理センターに新しいアプリを登録します。詳細については、「アプリケーションの登録」を参照してください。後で使用するために、アプリケーション の [概要 ] ページから次の値を記録します。
- アプリケーション (クライアント) ID
- ディレクトリ (テナント) ID
Web プラットフォーム構成を使用して、次のリダイレクト URI を追加します。詳細については、「アプリケーションにリダイレクト URI を追加する方法」を参照してください。
- リダイレクト URI: http://localhost:3000/auth/redirect
- フロントチャネルログアウト URL: https://localhost:5001/signout-callback-oidc
アプリの登録にクライアントシークレットを追加します。運用アプリではクライアントシークレットを使用しないでください。代わりに、証明書またはフェデレーション資格情報を使用してください。詳細については、「アプリケーションに資格情報を追加する」を参照してください。
Node.js

この組織のディレクトリ内のアカウント専用に構成された Microsoft Entra 管理センターに新しいアプリを登録します。詳細については、「アプリケーションの登録」を参照してください。後で使用するために、アプリケーション の [概要 ] ページから次の値を記録します。
- アプリケーション (クライアント) ID
- ディレクトリ (テナント) ID
Web プラットフォーム構成を使用して、次のリダイレクト URI を追加します。詳細については、「アプリケーションにリダイレクト URI を追加する方法」を参照してください。
- リダイレクト URI: https://localhost:5001/signin-oidc
- フロントチャネルログアウト URL: https://localhost:5001/signout-callback-oidc
アプリの登録に自己署名証明書を追加します。実稼働アプリでは自己署名証明書を使用しないでください。代わりに、信頼された証明機関またはフェデレーション資格情報の証明書を使用してください。詳細については、「アプリケーションに資格情報を追加する」を参照してください。次のコマンドを使用して証明書を作成します。
```
dotnet dev-certs https -ep ./certificate.crt --trust
```
.NET 8.0 SDK の最小要件

この組織のディレクトリ内のアカウント専用に構成された Microsoft Entra 管理センターに新しいアプリを登録します。詳細については、「アプリケーションの登録」を参照してください。後で使用するために、アプリケーション の [概要 ] ページから次の値を記録します。
- アプリケーション (クライアント) ID
- ディレクトリ (テナント) ID
Web プラットフォーム構成を使用して、次のリダイレクト URI を追加します。詳細については、「アプリケーションにリダイレクト URI を追加する方法」を参照してください。
- リダイレクト URI: http://localhost:5000/getAToken
Python 3 +
アプリの登録にクライアントシークレットを追加します。運用アプリではクライアントシークレットを使用しないでください。代わりに、証明書またはフェデレーション資格情報を使用してください。詳細については、「アプリケーションに資格情報を追加する」を参照してください。

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

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

.zip ファイルをダウンロードし、名前の長さが 260 文字未満のファイルパスに抽出するか、リポジトリを複製します。
サンプルを複製するには、コマンドプロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。
```
git clone https://github.com/Azure-Samples/ms-identity-node.git
```

.zip ファイルをダウンロードし、名前の長さが 260 文字未満のファイルパスに抽出するか、リポジトリを複製します。
サンプルを複製するには、コマンドプロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。
```
git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git
```

Python コードサンプルをダウンロードし、名前の長さが 260 文字未満のファイルパスに抽出するか、リポジトリを複製します。
サンプルを複製するには、コマンドプロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。

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

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

サンプルアプリを使用してユーザーをサインインさせるには、アプリとテナントの詳細でユーザーを更新する必要があります。

ms-identity-node フォルダーで App/.env ファイルを開き、次のプレースホルダーを置き換えます。

Variable	Description	例
`Enter_the_Cloud_Instance_Id_Here`	アプリケーションが登録されている Azure クラウドインスタンス	`https://login.microsoftonline.com/` (末尾のスラッシュを含む)
`Enter_the_Tenant_Info_here`	テナント ID またはプライマリドメイン	`contoso.microsoft.com` または `aaaabbbb-0000-cccc-1111-dddd2222eeee`
`Enter_the_Application_Id_Here`	登録したアプリケーションのクライアント ID	`00001111-aaaa-2222-bbbb-3333cccc4444`
`Enter_the_Client_Secret_Here`	登録したアプリケーションのクライアントシークレット	`A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u`
`Enter_the_Graph_Endpoint_Here`	アプリが呼び出す Microsoft Graph API クラウドインスタンス	`https://graph.microsoft.com/` (末尾のスラッシュを含む)
`Enter_the_Express_Session_Secret_Here`	Express セッション Cookie の署名に使用されるランダムな文字列	`A1b-C2d_E3f.H4...`

変更を加えた後、ファイルは次のスニペットのようになります。

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

IDE で、サンプルを含むプロジェクトフォルダー ms-identity-docs-code-dotnet\web-app-aspnet を開きます。

appsettings.json を開き、ファイルの内容を次のスニペットに置き換えます。

{
"AzureAd": {
  "Instance": "https://login.microsoftonline.com/",
  "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
  "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
  "ClientCredentials": [
    {
      "SourceType": "StoreWithThumbprint",
      "CertificateStorePath": "CurrentUser/My",
      "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
    }   
  ],
  "CallbackPath": "/signin-oidc"
},
  "DownstreamApis": {
    "MicrosoftGraph" :{
      "BaseUrl": "https://graph.microsoft.com/v1.0/",
      "RelativePath": "me",
      "Scopes": [ 
        "user.read" 
      ]
   }
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

TenantId - アプリケーションが登録されているテナントの識別子。引用符で囲まれたテキストを、登録済みアプリケーションの概要ページから前に記録した Directory (tenant) ID に置き換えます。
ClientId - アプリケーションの識別子。クライアントとも呼ばれます。引用符で囲まれたテキストを、登録済みアプリケーションの概要ページから前に記録した Application (client) ID 値に置き換えます。
ClientCertificates - 自己署名証明書は、アプリケーションでの認証に使用されます。 CertificateThumbprintのテキストを、以前に記録した証明書の拇印に置き換えます。

IDE でダウンロードしたアプリケーションを開き、サンプルアプリのルートフォルダーに移動します。
```
cd flask-web-app
```
.env.sample.entra-id をガイドとして使用して、プロジェクトのルートフォルダーに .env ファイルを作成します。
```
# The following variables are required for the app to run.
CLIENT_ID=<Enter_your_client_id>
CLIENT_SECRET=<Enter_your_client_secret>
AUTHORITY=<Enter_your_authority_url>
```
- CLIENT_IDの値を、概要ページで使用可能な登録済みアプリケーションのアプリケーション (クライアント) ID に設定します。
- CLIENT_SECRETの値を、登録済みアプリケーションの証明書とシークレットで作成したクライアントシークレットに設定します。
- AUTHORITYの値をhttps://login.microsoftonline.com/<TENANT_GUID>に設定します。 ディレクトリ (テナント) ID は、アプリ登録の概要ページで使用できます。
環境変数は app_config.pyで参照され、ソース管理から除外するために別の .env ファイルに保持されます。指定された .gitignore ファイルを使用すると、 .env ファイルがチェックインされなくなります。

サンプル Web アプリの実行とテスト

サンプルアプリを構成しました。実行とテストに進むことができます。

サーバーを起動するには、プロジェクトディレクトリ内から次のコマンドを実行します。
```
cd App
npm install
npm start
```
http://localhost:3000/ にアクセスします。
[ サインイン ] を選択してサインインプロセスを開始します。

初めてサインインすると、アプリケーションによるサインインとプロファイルへのアクセスを許可する同意を求められます。正常にサインインすると、アプリケーションのホームページにリダイレクトされます。

アプリのしくみ

このサンプルでは、localhost のポート 3000 で Web サーバーをホストします。 Web ブラウザーがこのアドレスにアクセスすると、アプリによってホームページがレンダリングされます。ユーザーが [サインイン] を選択すると、アプリは MSAL Node ライブラリによって生成された URL を使用して、ブラウザーを Microsoft Entra サインイン画面にリダイレクトします。ユーザーの同意後、ブラウザーは ID とアクセストークンと共にユーザーをアプリケーションのホームページにリダイレクトします。

プロジェクトディレクトリで、ターミナルを使用して次のコマンドを入力します。
```
cd ms-identity-docs-code-dotnet/web-app-aspnet
dotnet run
```
ターミナルに表示される https URL ( https://localhost:5001など) をコピーし、ブラウザーに貼り付けます。プライベートまたはシークレットのブラウザーセッションを使用することをお勧めします。
手順に従い、Microsoft アカウントでサインインするために必要な詳細を入力します。ワンタイムパスコードを送信できるように、電子メールアドレスを指定するように求められます。メッセージが表示されたら、コードを入力します。
アプリケーションは、アクセス権を付与したデータへのアクセスを維持し、サインインしてプロファイルを読み取るアクセス許可を要求します。 [ 承諾] を選択します。次のスクリーンショットが表示されます。これは、アプリケーションにサインインしていて、Microsoft Graph API からプロファイルの詳細を表示していることを示します。

アプリケーションからサインアウトする

ページの右上隅にある [サインアウト ] リンクを見つけて選択します。
サインアウトするアカウントを選択するように求められます。サインインに使用したアカウントを選択します。
サインアウトしたことを示すメッセージが表示されます。ブラウザーウィンドウを閉じることができるようになりました。

アプリの仮想環境を作成します。
- Windows の場合は、次のコマンドを実行します。
```
py -m venv .venv
.venv\scripts\activate
```
- macOS/Linux の場合は、次のコマンドを実行します。
```
python3 -m venv .venv
source .venv/bin/activate
```
pipを使用して要件をインストールします。
```
pip install -r requirements.txt
```
コマンドラインからアプリを実行します。前に構成したリダイレクト URI と同じポートでアプリが実行されていることを確認します。
```
flask run --debug --host=localhost --port=5000
```
ターミナルに表示される https URL ( https://localhost:5000など) をコピーし、ブラウザーに貼り付けます。プライベートまたはシークレットのブラウザーセッションを使用することをお勧めします。
手順に従い、Microsoft アカウントでサインインするために必要な詳細を入力します。サインインするための電子メールアドレスとパスワードを指定するように求められます。
アプリケーションは、アクセスを許可するデータへのアクセスを維持し、サインインしてプロファイルを読み取るアクセス許可を要求します (スクリーンショットを参照)。 [ 承諾] を選択します。
次のスクリーンショットが表示されます。これは、アプリケーションに正常にサインインしたことを示しています。

サンプルアプリがユーザーに正常にサインインした方法を示す図。

アプリのしくみ

次の図は、サンプルアプリのしくみを示しています。

このクイックスタートで生成されたサンプルアプリのしくみを示す図。

アプリケーションは、identity パッケージを使用して、Microsoft ID プラットフォームからアクセストークンを取得します。このパッケージは、Web アプリでの認証と承認を簡素化するために、Python 用 Microsoft Authentication Library (MSAL) の上に構築されています。
前の手順で取得したアクセストークンは、Microsoft Graph API を呼び出すときにユーザーを認証するためのベアラートークンとして使用されます。

ユーザーをサインインさせ、Microsoft Graph API を呼び出す Node.js Web アプリを構築する方法について説明します。チュートリアル: ユーザーをサインインさせ、Node.js > Express Web アプリで Microsoft Graph のトークンを取得します。

このクイックスタートでは、サンプル Web アプリを使用して、外部テナントのユーザーをサインインさせる方法を示します。サンプルアプリでは、 Microsoft 認証ライブラリを使用して認証を処理します。

[前提条件]

アクティブなサブスクリプションを持つ Azure アカウント。アカウントをまだお持ちでない場合は、無料でアカウントを作成してください。
この Azure アカウントには、アプリケーションを管理するためのアクセス許可が必要です。次の Microsoft Entra ロールには、必要なアクセス許可が含まれます。
- アプリケーション管理者
- アプリケーション開発者
外部テナント。作成するには、次の方法から選択します。
- Microsoft Entra 外部 ID 拡張機能を使用して、Visual Studio Code で外部テナントを直接設定します。 (おすすめ)
- Microsoft Entra 管理センターで新しい外部テナントを作成します。
ユーザーフロー。詳細については、外部テナント内のアプリのセルフサービスサインアップユーザーフローを作成する方法に関するページを参照してください。このユーザーフローは、複数のアプリケーションに使用できます。
Visual Studio Code または別のコードエディター。

この組織のディレクトリ内のアカウント専用に構成された Microsoft Entra 管理センターに新しいアプリを登録します。詳細については、「アプリケーションの登録」を参照してください。後で使用するために、アプリケーション の [概要 ] ページから次の値を記録します。
- アプリケーション (クライアント) ID
- ディレクトリ (テナント) ID
Web プラットフォーム構成を使用して、次のリダイレクト URI を追加します。詳細については、「アプリケーションにリダイレクト URI を追加する方法」を参照してください。
- リダイレクト URI: http://localhost:3000/auth/redirect
- フロントチャネルログアウト URL: https://localhost:5001/signout-callback-oidc
アプリの登録にクライアントシークレットを追加します。運用アプリではクライアントシークレットを使用しないでください。代わりに、証明書またはフェデレーション資格情報を使用してください。詳細については、「アプリケーションに資格情報を追加する」を参照してください。
アプリケーションをユーザーフローに追加する
Node.js

この組織のディレクトリ内のアカウント専用に構成された Microsoft Entra 管理センターに新しいアプリを登録します。詳細については、「アプリケーションの登録」を参照してください。後で使用するために、アプリケーション の [概要 ] ページから次の値を記録します。
- アプリケーション (クライアント) ID
- ディレクトリ (テナント) ID
Web プラットフォーム構成を使用して、次のリダイレクト URI を追加します。詳細については、「アプリケーションにリダイレクト URI を追加する方法」を参照してください。
- リダイレクト URI: https://localhost:5001/signin-oidc
- フロントチャネルログアウト URL: https://localhost:5001/signout-callback-oidc
アプリの登録にクライアントシークレットを追加します。運用アプリではクライアントシークレットを使用しないでください。代わりに、証明書またはフェデレーション資格情報を使用してください。詳細については、「アプリケーションに資格情報を追加する」を参照してください。
アプリケーションをユーザーフローに追加する
.NET 8.0 SDK の最小バージョン。

この組織のディレクトリ内のアカウント専用に構成された Microsoft Entra 管理センターに新しいアプリを登録します。詳細については、「アプリケーションの登録」を参照してください。後で使用するために、アプリケーション の [概要 ] ページから次の値を記録します。
- アプリケーション (クライアント) ID
- ディレクトリ (テナント) ID
Web プラットフォーム構成を使用して、次のリダイレクト URI を追加します。詳細については、「アプリケーションにリダイレクト URI を追加する方法」を参照してください。
- リダイレクト URI: http://localhost:5000/getAToken
アプリケーションをユーザーフローに追加する
Python 3 +
アプリの登録にクライアントシークレットを追加します。運用アプリではクライアントシークレットを使用しないでください。代わりに、証明書またはフェデレーション資格情報を使用してください。詳細については、「アプリケーションに資格情報を追加する」を参照してください。

この組織のディレクトリ内のアカウント専用に構成された Microsoft Entra 管理センターに新しいアプリを登録します。詳細については、「アプリケーションの登録」を参照してください。後で使用するために、アプリケーション の [概要 ] ページから次の値を記録します。
- アプリケーション (クライアント) ID
- ディレクトリ (テナント) ID
Web プラットフォーム構成を使用して、次のリダイレクト URI を追加します。詳細については、「アプリケーションにリダイレクト URI を追加する方法」を参照してください。
- リダイレクト URI: http://localhost:5000/getAToken
アプリケーションをユーザーフローに追加する
Python 3 +
アプリの登録にクライアントシークレットを追加します。運用アプリではクライアントシークレットを使用しないでください。代わりに、証明書またはフェデレーション資格情報を使用してください。詳細については、「アプリケーションに資格情報を追加する」を参照してください。

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

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

サンプルを複製するには、コマンドプロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。
```
git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
```
または、サンプル .zip ファイルをダウンロードし、名前の長さが 260 文字未満のファイルパスに抽出します。

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

コンソールウィンドウを開き、Node.js サンプルアプリを含むディレクトリに移動します。
```
cd 1-Authentication\5-sign-in-express\App
```
次のコマンドを実行して、アプリの依存関係をインストールします。
```
npm install
```

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

サンプルを複製するには、コマンドプロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。
```
git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git
```
.zip ファイルをダウンロードします。名前の長さが 260 文字未満のファイルパスに抽出します。

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

サンプルを複製するには、コマンドプロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。
```
git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
```
.zip ファイルをダウンロードします。名前の長さが 260 文字未満のファイルパスに抽出します。

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

コンソールウィンドウを開き、Flask サンプル Web アプリを含むディレクトリに移動します。
```
cd django-web-app
```
仮想環境を設定します。
- Windows の場合は、次のコマンドを実行します。
```
py -m venv .venv
.venv\scripts\activate
```
- macOS/Linux の場合は、次のコマンドを実行します。
```
python3 -m venv .venv
source .venv/bin/activate
```
アプリの依存関係をインストールするには、次のコマンドを実行します。
```
python3 -m pip install -r requirements.txt
```

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

サンプルを複製するには、コマンドプロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。
```
git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
```
.zip ファイルをダウンロードします。名前の長さが 260 文字未満のファイルパスに抽出します。

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

コンソールウィンドウを開き、Flask サンプル Web アプリを含むディレクトリに移動します。
```
cd flask-web-app
```
仮想環境を設定します。
- Windows の場合は、次のコマンドを実行します。
```
py -m venv .venv
.venv\scripts\activate
```
- macOS/Linux の場合は、次のコマンドを実行します。
```
python3 -m venv .venv
source .venv/bin/activate
```
アプリの依存関係をインストールするには、次のコマンドを実行します。
```
python3 -m pip install -r requirements.txt
```

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

サンプルアプリを使用してユーザーをサインインさせるには、アプリとテナントの詳細でユーザーを更新する必要があります。

コードエディターで、 App\authConfig.jsファイルを 開きます。
プレースホルダーを見つけます。
- Enter_the_Application_Id_Here をクリックし、先ほど登録したアプリのアプリケーション (クライアント) ID に置き換えます。
- Enter_the_Tenant_Subdomain_Here ディレクトリ (テナント) サブドメインに置き換えます。たとえば、テナントのプライマリドメインが contoso.onmicrosoft.comされている場合は、 contosoを使用します。テナント名がない場合は、テナントの詳細を読み取る方法について説明します。
- Enter_the_Client_Secret_Here を選択し、先ほどコピーしたアプリシークレットの値に置き換えます。

ASP.NET Core サンプルアプリを含むルートディレクトリに移動します。
```
cd 1-Authentication\1-sign-in-aspnet-core-mvc
```
appsettings.json ファイルを開きます。
[機関] で、Enter_the_Tenant_Subdomain_Hereを見つけて、テナントのサブドメインに置き換えます。たとえば、テナントのプライマリドメインが caseyjensen@onmicrosoft.comされている場合、入力する必要がある値は casyjensen です。
Enter_the_Application_Id_Here値を見つけ、Microsoft Entra 管理センターに登録したアプリのアプリケーション ID (clientId) に置き換えます。
Enter_the_Client_Secret_Hereを設定したクライアントシークレットの値に置き換えます。

Visual Studio Code または使用しているエディターでプロジェクトファイルを開きます。
.env.sample.external-id ファイルをガイドとして使用して、プロジェクトのルートフォルダーに .env ファイルを作成します。
.env ファイルで、次の環境変数を指定します。
1. CLIENT_ID これは、先ほど登録したアプリのアプリケーション (クライアント) ID です。
2. CLIENT_SECRET これは、前にコピーしたアプリシークレットの値です。
3. AUTHORITY トークン機関を識別する URL です。これは 、{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com https:// 形式である必要があります。 サブドメインをディレクトリ (テナント) サブドメインに置き換えます。たとえば、テナントのプライマリドメインが contoso.onmicrosoft.comされている場合は、 contosoを使用します。テナントサブドメインがない場合は、テナントの詳細を読み取る方法について説明します。
4. REDIRECT_URI これは、前に登録したリダイレクト URI と同じにする必要があります。これは、構成と一致する必要があります。

Visual Studio Code または使用しているエディターでプロジェクトファイルを開きます。
.env.sample.external-id ファイルをガイドとして使用して、プロジェクトのルートフォルダーに .env ファイルを作成します。
.env ファイルで、次の環境変数を指定します。
- CLIENT_ID これは、先ほど登録したアプリのアプリケーション (クライアント) ID です。
- CLIENT_SECRET これは、前にコピーしたアプリシークレットの値です。
- AUTHORITY トークン機関を識別する URL です。これは 、{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com https:// 形式である必要があります。 サブドメインをディレクトリ (テナント) サブドメインに置き換えます。たとえば、テナントのプライマリドメインが contoso.onmicrosoft.comされている場合は、 contosoを使用します。テナントサブドメインがない場合は、テナントの詳細を読み取る方法について説明します。
リダイレクト URI が適切に構成されていることを確認します。前に登録したリダイレクト URI は、構成と一致している必要があります。このサンプルでは、既定でリダイレクト URI パスが /getATokenに設定されます。この構成は、 REDIRECT_PATHとしてapp_config.py ファイル内 にあります。

サンプル Web アプリの実行とテスト

Web アプリ Node.js サンプルをテストできるようになりました。 Node.js サーバーを起動し、 http://localhost:3000のブラウザーからアクセスする必要があります。

ターミナルで、次のコマンドを実行します。
```
npm start 
```
ブラウザーを開き、 http://localhost:3000に移動します。次のスクリーンショットのようなページが表示されます。
ページの読み込みが完了したら、メッセージが表示されたら [サインイン ] を選択します。
サインインページで、 メールアドレスを入力し、[ 次へ] を選択し、 パスワードを入力して、[ サインイン] を選択します。アカウントをお持ちでない場合は、[アカウントなし] を選択してください 。1 つの リンクを作成して、サインアップフローを開始します。
サインアップオプションを選択した場合は、メール、ワンタイムパスコード、新しいパスワード、その他のアカウントの詳細を入力した後、サインアップフロー全体を完了します。次のスクリーンショットのようなページが表示されます。サインインオプションを選択すると、同様のページが表示されます。
[ サインアウト ] を選択してユーザーを Web アプリからサインアウトするか、[ ID トークン要求の表示 ] を選択して Microsoft Entra から返された ID トークン要求を表示します。

動作方法

ユーザーが [サインイン ] リンクを選択すると、アプリは認証要求を開始し、ユーザーを Microsoft Entra 外部 ID にリダイレクトします。表示されるサインインまたはサインアップページで、ユーザーが正常にサインインするか、アカウントを作成すると、Microsoft Entra External ID は ID トークンをアプリに返します。アプリは ID トークンを検証し、要求を読み取り、セキュリティで保護されたページをユーザーに返します。

ユーザーが [サインアウト ] リンクを選択すると、アプリはセッションをクリアし、ユーザーを Microsoft Entra External ID サインアウトエンドポイントにリダイレクトして、ユーザーがサインアウトしたことを通知します。

実行したサンプルと同様のアプリを構築する場合は、「独自の Node.js Web アプリケーションの記事でユーザーをサインインさせる」の手順を実行します。

シェルまたはコマンドラインから、次のコマンドを実行します。
```
dotnet run
```
Web ブラウザーを開き、 https://localhost:7274に移動します。
外部テナントに登録されているアカウントでサインインします。
サインインすると、次のスクリーンショットに示すように、[ サインアウト ] ボタンの横に表示名が表示されます。
アプリケーションからサインアウトするには、[ サインアウト ] ボタンを選択します。

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

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

python manage.py runserver localhost:5000

選択したポート番号を使用できます。

ブラウザーを開き、 http://localhost:5000に移動します。次のスクリーンショットのようなページが表示されます。
ページの読み込みが完了したら、[ サインイン ] リンクを選択します。サインインするように求められます。
サインインページで、 メールアドレスを入力し、[ 次へ] を選択し、 パスワードを入力して、[ サインイン] を選択します。アカウントをお持ちでない場合は、[アカウントなし] を選択してください 。1 つの リンクを作成して、サインアップフローを開始します。
サインアップオプションを選択した場合は、サインアップフローを実行します。メール、ワンタイムパスコード、新しいパスワード、その他のアカウントの詳細を入力して、サインアップフロー全体を完了します。
サインインまたはサインアップすると、Web アプリにリダイレクトされます。次のスクリーンショットのようなページが表示されます。
[ログアウト] を選択してユーザーを Web アプリからサインアウトするか、[ダウンストリーム API を呼び出して Microsoft Graph エンドポイントを呼び出す] を選択します。

動作方法

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

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

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

ターミナルで、次のコマンドを実行します。
```
python3 -m flask run --debug --host=localhost --port=3000
```
選択したポートを使用できます。これは、先ほど登録したリダイレクト URI のポートに似ています。
ブラウザーを開き、 http://localhost:3000に移動します。次のスクリーンショットのようなページが表示されます。
ページの読み込みが完了したら、[ サインイン ] リンクを選択します。サインインするように求められます。
サインインページで、 メールアドレスを入力し、[ 次へ] を選択し、 パスワードを入力して、[ サインイン] を選択します。アカウントをお持ちでない場合は、[アカウントなし] を選択してください 。1 つの リンクを作成して、サインアップフローを開始します。
サインアップオプションを選択した場合は、sign-uo フローを実行します。サインアップフロー全体を完了するには、メール、ワンタイムパスコード、新しいパスワード、その他のアカウントの詳細を入力します。
サインインまたはサインアップすると、Web アプリにリダイレクトされます。次のスクリーンショットのようなページが表示されます。
[ログアウト] を選択してユーザーを Web アプリからサインアウトするか、[ダウンストリーム API を呼び出して Microsoft Graph エンドポイントを呼び出す] を選択します。

次の方法で共有

クイック スタート: サンプル Web アプリでユーザーをサインインする

[前提条件]

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

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

サンプル Web アプリの実行とテスト

アプリのしくみ

関連コンテンツ

[前提条件]

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

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

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

サンプル Web アプリの実行とテスト

動作方法

関連コンテンツ

フィードバック

その他のリソース

クイックスタート: サンプル Web アプリでユーザーをサインインする