ユーザーをサインインさせる Web アプリ:コード構成

[アーティクル]
10/25/2023

ユーザーをサインインさせる Web アプリのコードを構成する方法について説明します。

Web アプリをサポートしている Microsoft ライブラリ

次の Microsoft ライブラリは、Web アプリ (および Web API) を保護するために使用されます。

言語/フレームワーク	プロジェクト GitHub	Package	取得 started	ユーザーのサインイン	Web API へのアクセス	一般提供 (GA) またはパブリックプレビュー¹
.NET	MSAL.NET	Microsoft.Identity.Client	—			GA
.NET	Microsoft.IdentityModel	Microsoft.IdentityModel	—	²	²	GA
ASP.NET Core	ASP.NET Core	Microsoft.AspNetCore.Authentication	クイックスタート			GA
ASP.NET Core	Microsoft.Identity.Web	Microsoft.Identity.Web	クイックスタート			GA
Java	MSAL4J	msal4j	クイックスタート			GA
Spring	spring-cloud-azure-starter-active-directory	spring-cloud-azure-starter-active-directory	チュートリアル			GA
Node.js	MSAL Node	msal-node	クイックスタート			GA
Python	MSAL Python	msal				GA
Python	identity	identity	クイックスタート			--

⁽¹⁾オンラインサービスのユニバーサルライセンス条項は、"パブリックプレビュー" のライブラリに適用されます。

⁽²⁾Microsoft.IdentityModel ライブラリはトークンの "検証" のみを行います。ID やアクセストークンを要求することはできません。

目的のプラットフォームに対応するタブを選択してください。

この記事および以下のコードスニペットは、ASP.NET Core Web アプリ増分チュートリアルの第 1 章から抜粋されています。

完全な実装の詳細については、このチュートリアルをご覧ください。

構成ファイル

Microsoft ID プラットフォームを使用してユーザーをサインインさせる Web アプリケーションは、構成ファイルを使用して構成します。これらのファイルでは、次の値を指定する必要があります。

クラウド インスタンス (たとえば、アプリを国内のクラウドで実行する場合など)。次のようなさまざまなオプションがあります。
- https://login.microsoftonline.com/: Azure パブリッククラウドの場合
- https://login.microsoftonline.us/: Azure US Government の場合
- https://login.microsoftonline.de/: Microsoft Entra Germany の場合
- https://login.partner.microsoftonline.cn/common: 21Vianet が運用する Microsoft Entra China の場合
テナント ID のオーディエンス。オプションは、アプリがシングルテナントかマルチテナントかによって異なります。
- Azure portal から取得したテナント GUID: 組織内のユーザーをサインインする場合。ドメイン名も使用できます。
- organizations: ユーザーを職場または学校のアカウントにサインインさせる場合
- common: ユーザーを職場または学校のアカウント、あるいは Microsoft の個人用アカウントでサインインさせる場合
- consumers: ユーザーを Microsoft の個人用アカウントでのみサインインさせる場合
Azure portal からコピーした、アプリケーションのクライアント ID

また、authority、すなわちインスタンス と テナント ID の値の連結への参照が表示される場合もあります。

ASP.NET Core では、これらの設定は appsettings.json ファイルの "Microsoft Entra ID" セクションにあります。

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "TenantId": "[Enter the tenantId here]",

    // Client ID (application ID) obtained from the Azure portal
    "ClientId": "[Enter the Client Id here]",
    "CallbackPath": "/signin-oidc",
    "SignedOutCallbackPath": "/signout-oidc"
  }
}

ASP.NET Core では、別のファイル (properties\launchSettings.json) がアプリケーションの URL (applicationUrl) と TLS/SSL ポート (sslPort) およびさまざまなプロファイルを含んでいます。

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:3110/",
      "sslPort": 44321
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "webApp": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://localhost:3110/"
    }
  }
}

Azure portal では、アプリケーションの [認証] ページで登録するリダイレクト URI は、これらの URL と一致している必要があります。前記の 2 つの構成ファイルについては、それは https://localhost:44321/signin-oidc です。この理由は applicationUrl が http://localhost:3110 である一方で、sslPort が指定されているためです (44321)。 CallbackPath は、appsettings.json で定義されているように /signin-oidc となります。

同様に、サインアウト URI は https://localhost:44321/signout-oidc に設定されます。

Note

SignedOutCallbackPath は、イベントの処理時の競合を回避するために、ポータルまたはアプリケーションに設定する必要があります。

ASP.NET では、アプリケーションは appsettings.json ファイルの 12 から 15 行目で構成されます。

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "TenantId": "[Enter the tenantId here]",
    "ClientId": "[Enter the Client Id here]",
  }
}

Azure portal では、アプリケーションの [認証] ページで登録する応答 URI は、これらの URL と一致している必要があります。つまり、https://localhost:44326/ である必要があります。

Java では、構成は src/main/resources の下の application.properties ファイルにあります。

aad.clientId=Enter_the_Application_Id_here
aad.authority=https://login.microsoftonline.com/Enter_the_Tenant_Info_Here/
aad.secretKey=Enter_the_Client_Secret_Here
aad.redirectUriSignin=http://localhost:8080/msal4jsample/secure/aad
aad.redirectUriGraph=http://localhost:8080/msal4jsample/graph/me

Azure portal では、アプリケーションの [認証] ページで登録する応答 URI は、アプリケーションで定義される redirectUri インスタンスと一致している必要があります。つまり、http://localhost:8080/msal4jsample/secure/aad および http://localhost:8080/msal4jsample/graph/me である必要があります。

ここで、構成パラメータは環境変数として .env.dev に存在します。

CLOUD_INSTANCE="Enter_the_Cloud_Instance_Id_Here" # cloud instance string should end with a trailing slash
TENANT_ID="Enter_the_Tenant_Info_Here"
CLIENT_ID="Enter_the_Application_Id_Here"
CLIENT_SECRET="Enter_the_Client_Secret_Here"

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

GRAPH_API_ENDPOINT="Enter_the_Graph_Endpoint_Here" # graph api endpoint string should end with a trailing slash

EXPRESS_SESSION_SECRET="Enter_the_Express_Session_Secret_Here"

これらのパラメーターは、authConfig.js ファイルに構成オブジェクトを作成するために使用され、最終的には MSAL ノードの初期化に使用されます。

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

require('dotenv').config({ path: '.env.dev' });

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL Node configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md
 */
const msalConfig = {
    auth: {
        clientId: process.env.CLIENT_ID, // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        authority: process.env.CLOUD_INSTANCE + process.env.TENANT_ID, // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
        clientSecret: process.env.CLIENT_SECRET // Client secret generated from the app registration in Azure portal
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: 3,
        }
    }
}

const REDIRECT_URI = process.env.REDIRECT_URI;
const POST_LOGOUT_REDIRECT_URI = process.env.POST_LOGOUT_REDIRECT_URI;
const GRAPH_ME_ENDPOINT = process.env.GRAPH_API_ENDPOINT + "v1.0/me";

module.exports = {
    msalConfig,
    REDIRECT_URI,
    POST_LOGOUT_REDIRECT_URI,
    GRAPH_ME_ENDPOINT
};

Azure portal では、アプリケーションの [認証] ページで登録する応答 URI は、アプリケーションで定義される redirectUri インスタンスと一致している必要があります (http://localhost:3000/auth/redirect)。

この記事ではわかりやすくするために、クライアントシークレットは構成ファイルに保存されます。運用アプリでは、キーコンテナーまたは環境変数の使用を検討してください。さらに優れたオプションは、証明書を使用することです。

構成パラメーターは、環境変数として .env に設定されています。

# Note: If you are using Azure App Service, go to your app's Configuration,
# and then set the following values into your app's "Application settings".

CLIENT_ID=<client id>
CLIENT_SECRET=<client secret>

# Expects a full authority URL such as "https://login.microsoftonline.com/TENANT_GUID"
# or "https://login.microsoftonline.com/contoso.onmicrosoft.com".
# Alternatively, leave it undefined if you are building a multi-tenant app in world-wide cloud
#AUTHORITY=<authority url>

これらの環境変数は、app_config.py で参照されます。

import os

# Application (client) ID of app registration
CLIENT_ID = os.getenv("CLIENT_ID")
# Application's generated client secret: never check this into source control!
CLIENT_SECRET = os.getenv("CLIENT_SECRET")

# You can configure your authority via environment variable
# Defaults to a multi-tenant app in world-wide cloud
AUTHORITY = os.getenv("AUTHORITY", "https://login.microsoftonline.com/common")

REDIRECT_PATH = "/getAToken"  # Used for forming an absolute URL to your redirect URI.
# The absolute URL must match the redirect URI you set
# in the app's registration in the Azure portal.

# You can find more Microsoft Graph API endpoints from Graph Explorer
# https://developer.microsoft.com/en-us/graph/graph-explorer
ENDPOINT = 'https://graph.microsoft.com/v1.0/users'  # This resource requires no admin consent

# You can find the proper permission names from this document
# https://docs.microsoft.com/en-us/graph/permissions-reference
SCOPE = ["User.ReadBasic.All"]

# Tells the Flask-session extension to store sessions in the filesystem
SESSION_TYPE = "filesystem"
# Using the file system will not work in most production systems,
# it's better to use a database-backed session store instead.

.env ファイルにはシークレットが含まれるため、ソース管理にチェックインしないでください。クイックスタートサンプルには、.env ファイルがチェックインされないようにする .gitignore ファイルが含まれています。

# Environments
.env

初期化コード

初期化コードは、プラットフォームによって異なります。 ASP.NET Core と ASP.NET の場合、ユーザーのサインインは OpenID Connect ミドルウェアに委任されます。 ASP.NET または ASP.NET Core テンプレートを使用すると、Azure AD v1.0 エンドポイント用の Web アプリケーションが生成されます。それを Microsoft ID プラットフォームに適合させるには、少し構成が必要です。

ASP.NET Core Web Apps (および Web API) では、コントローラーまたはコントローラーアクションでの Authorize 属性があるため、アプリケーションは保護されます。この属性では、ユーザーが認証されていることが確認されます。 .NET 6 のリリースより前では、初期化コードは、Startup.cs ファイルにありました。 .NET 6 を使用する新しい ASP.NET Core プロジェクトには、Startup.cs ファイルは含まれません。代わりに、Program.cs ファイルがあります。このチュートリアルの残りの部分は、.NET 5 以下に関します。

注意

Microsoft.Identity.Web を活用する、Microsoft ID プラットフォーム用の新しい ASP.NET Core テンプレートを直接開始する場合は、.NET 5.0 用のプロジェクトテンプレートを含むプレビュー NuGet パッケージをダウンロードできます。インストールが完了したら、ASP.NET Core Web アプリケーション (MVC または Blazor) を直接インスタンス化できます。詳細については、Microsoft.Identity.Web Web アプリプロジェクトテンプレートに関するページを参照してください。以下のすべての手順をあなたの代わりに実行するため、これが最も簡単な方法です。

Visual Studio 内で現在の既定 ASP.NET Core Web プロジェクトを使用するか、dotnet new mvc --auth SingleOrg または dotnet new webapp --auth SingleOrg を使用してプロジェクトを開始すると、次のようなコードが表示されます。

 services.AddAuthentication(AzureADDefaults.AuthenticationScheme)
         .AddAzureAD(options => Configuration.Bind("AzureAd", options));

このコードでは、Azure Active Directory v1.0 アプリケーションの作成に使用される従来の Microsoft.AspNetCore.Authentication.AzureAD.UI NuGet パッケージを使用します。この記事では、そのコードに代わる Microsoft ID プラットフォーム v2.0 アプリケーションを作成する方法について説明します。

Microsoft.Identity.Web および Microsoft.Identity.Web.UI NuGet パッケージをプロジェクトに追加します。 Microsoft.AspNetCore.Authentication.AzureAD.UI NuGet パッケージが存在する場合は削除します。

AddMicrosoftIdentityWebApp メソッドと AddMicrosoftIdentityUI メソッドを使用するように ConfigureServices のコードを更新します。

public class Startup
{
 ...
 // This method gets called by the runtime. Use this method to add services to the container.
 public void ConfigureServices(IServiceCollection services)
 {
  services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
         .AddMicrosoftIdentityWebApp(Configuration, "AzureAd");

  services.AddRazorPages().AddMvcOptions(options =>
  {
   var policy = new AuthorizationPolicyBuilder()
                 .RequireAuthenticatedUser()
                 .Build();
   options.Filters.Add(new AuthorizeFilter(policy));
  }).AddMicrosoftIdentityUI();

Startup.cs の Configure メソッドで、app.UseAuthentication(); と app.MapControllers(); を呼び出して認証を有効にします。

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
 // more code here
 app.UseAuthentication();
 app.UseAuthorization();

 app.MapRazorPages();
 app.MapControllers();
 // more code here
}

このコードでは:

AddMicrosoftIdentityWebApp 拡張メソッドは、Microsoft.Identity.Web で定義されています。これにより以下が行なわれます。
- 構成ファイルを読み取るためのオプションが構成されます (ここでは、"Microsoft Entra ID" セクションから)。
- 機関が Microsoft ID プラットフォームになるように OpenID Connect オプションが構成されます。
- トークンの発行者が検証されます。
- 名前に対応する要求が、ID トークンの preferred_username 要求からマップされるようにします。
構成オブジェクトに加えて、AddMicrosoftIdentityWebApp を呼び出すときに構成セクションの名前を指定できます。既定では、これは AzureAd です。
AddMicrosoftIdentityWebApp には、高度なシナリオのためのその他のパラメーターがあります。たとえば、OpenID Connect ミドルウェアイベントをトレースすると、認証が機能しない場合の Web アプリケーションのトラブルシューティングに役立ちます。省略可能なパラメーター subscribeToOpenIdConnectMiddlewareDiagnosticsEvents を true に設定すると、HTTP 応答から HttpContext.User 内のユーザーの ID への進行に合わせて、ASP.NET Core ミドルウェアのセットによって情報がどのように処理されるかが表示されます。
AddMicrosoftIdentityUI 拡張メソッドは、Microsoft.Identity.Web.UI に定義されています。サインインおよびサインアウトを処理する既定のコントローラーが提供されます。

Microsoft.Identity.Web で Web アプリを作成する方法の詳細については、microsoft-identity-web の Web Apps に関するページを参照してください。

ASP.NET Web アプリおよび Web API での認証に関連したコードは、App_Start/Startup.Auth.cs ファイルにあります。

 public void ConfigureAuth(IAppBuilder app)
 {
  app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType);

  app.UseCookieAuthentication(new CookieAuthenticationOptions());

  OwinTokenAcquirerFactory factory = TokenAcquirerFactory.GetDefaultInstance<OwinTokenAcquirerFactory>();
  factory.Build();
  app.AddMicrosoftIdentityWebApi(factory);
 }

Java サンプルでは、Spring フレームワークが使用されています。各 HTTP 応答をインターセプトするフィルターを実装するため、アプリケーションは保護されています。 Java Web アプリのクイックスタートでは、このフィルターは src/main/java/com/microsoft/azure/msalwebsample/AuthFilter.java 内の AuthFilter です。

フィルターは OAuth 2.0 認証コードフローを処理し、ユーザーが認証されているかどうかを確認します (isAuthenticated() メソッド)。ユーザーが認証されていない場合は、Microsoft Entra 承認エンドポイントの URL が計算されて、ブラウザーはこの URI にリダイレクトされます。

認証コードフローを含む応答が到着すると、MSAL Java でトークンを取得できます。最後にトークンエンドポイントからトークンを受け取ると (リダイレクト URI で)、ユーザーはサインインされます。

詳細については、AuthFilter.java の doFilter() メソッドを参照してください。

注意

doFilter() のコードは少し異なる順序で記述されていますが、フローは説明されているものです。

このメソッドによってトリガーされる認証コードフローの詳細については、「Microsoft ID プラットフォームと OAuth 2.0 認証コードフロー」を参照してください。

この Node サンプルでは、Express フレームワークが使用されています。 MSAL は、auth ルートハンドラーで初期化されます。

var express = require('express');

const authProvider = require('../auth/AuthProvider');
const { REDIRECT_URI, POST_LOGOUT_REDIRECT_URI } = require('../authConfig');

const router = express.Router();

router.get('/signin', authProvider.login({
    scopes: [],
    redirectUri: REDIRECT_URI,
    successRedirect: '/'

この Python サンプルは Flask フレームワークを使用して構築されていますが、Django などの他のフレームワークも使用できます。この Flask アプリは、app.py の上部にあるアプリ構成で初期化されます。

import identity
import identity.web
import requests
from flask import Flask, redirect, render_template, request, session, url_for
from flask_session import Session

import app_config

app = Flask(__name__)
app.config.from_object(app_config)
Session(app)

次に、このコードは identity パッケージを使用してauth オブジェクトを構築します。

auth = identity.web.Auth(
    session=session,
    authority=app.config["AUTHORITY"],
    client_id=app.config["CLIENT_ID"],
    client_credential=app.config["CLIENT_SECRET"],
)

次のステップ

次の記事では、サインインとサインアウトをトリガーする方法について説明します。

このシナリオの次の記事であるサインインとサインアウトに関する記事に進みます。

ユーザーをサインインさせる Web アプリ:コード構成

Web アプリをサポートしている Microsoft ライブラリ

構成ファイル

初期化コード

次のステップ

その他のリソース