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

Web プラットフォームの種類を選択し、ASP.NET Core Web アプリに次の URI を使用します

• リダイレクト URI : https://localhost:44321/signin-oidc
• フロント チャネル ログアウト URL : https://localhost:44321/signout-oidc

Web プラットフォームの種類を選択し、ASP.NET Web アプリに次の URI を使用します

• リダイレクト URI : https://localhost:44326/

• Web プラットフォームの種類を選択し、サンプル アプリで使用される次の URI を使用します。

  • http://localhost:8080/msal4jsample/secure/aad
  • http://localhost:8080/msal4jsample/graph/me

• アプリケーションにクライアント シークレットを追加します。 詳細については、「 アプリケーションに資格情報を追加する 」を参照してください。 後で使用するために、クライアント シークレットの値を記録します。

• Web プラットフォームの種類を選択し、次の URI を使用します

  • リダイレクト URI : http://localhost:3000/auth/redirect

• アプリケーションにクライアント シークレットを追加します。 詳細については、「 アプリケーションに資格情報を追加する 」を参照してください。 後で使用するために、クライアント シークレットの値を記録します。

• Web プラットフォームの種類を選択し、次の URI を使用します

  • リダイレクト URI : http://localhost:5000/getAToken

• アプリケーションにクライアント シークレットを追加します。 詳細については、「 アプリケーションに資格情報を追加する 」を参照してください。 後で使用するために、クライアント シークレットの値を記録します。

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

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

この記事および以下のコード スニペットは、ASP.NET Web アプリ サンプルから抜粋されたものです。

完全な実装の詳細については、このサンプルをご覧ください。

この記事および以下のコード スニペットは、MSAL Java の Microsoft Graph を呼び出す Java Web アプリケーション サンプルから抜粋されています。

完全な実装の詳細については、このサンプルをご覧ください。

この記事および以下のコード スニペットは、MSAL Node の Node.js Web アプリケーションのユーザー サインイン サンプルから抜粋されています。

完全な実装の詳細については、このサンプルをご覧ください。

この記事および以下のコード スニペットは、identity パッケージ (MSAL Python 用ラッパー) を使用して Microsoft Graph を呼び出す Python Web アプリケーション サンプルから抜粋されています。

完全な実装の詳細については、このサンプルをご覧ください。

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 は、/signin-oidc で定義されているように appsettings.json となります。

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

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 ファイルにあります。

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

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

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

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

   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();
   

3. 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 アプリのクイックスタートでは、このフィルターは AuthFilter 内の src/main/java/com/microsoft/azure/msalwebsample/AuthFilter.java です。

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

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

詳細については、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)

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

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