クイックスタート: 認証コードフローを使用した Web アプリでのユーザーのサインイン - Microsoft Entra

[アーティクル]
03/13/2023

このクイックスタートでは、ASP.NET Web アプリケーションで Azure Active Directory (Azure AD) アカウントを持つユーザーをサインインさせる方法を示すコードサンプルをダウンロードして実行します。

図については、「このサンプルのしくみ」を参照してください。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
Visual Studio 2019
.NET Framework 4.7.2 以降

アプリケーションを作成するにあたっては、自動構成と手動構成という 2 つの選択肢があります。

自動構成

アプリを自動的に構成したうえでコードサンプルをダウンロードする場合は、これらの手順に従います。

アプリの登録用の Azure portal ページに移動します。
アプリケーションの名前を入力し、 [登録] を選択します。
画面の指示に従ってダウンロードし、1 回クリックするだけで、新しいアプリケーションが自動的に構成されます。

手動構成

アプリケーションとコードサンプルを手動で構成する場合は、次の手順を使用します。

手順 1:アプリケーションの登録

Azure portal にサインインします。
複数のテナントにアクセスできる場合は、トップメニューの [ディレクトリとサブスクリプション] フィルターを使用して、アプリケーションを登録するテナントに切り替えます。
Azure Active Directory を検索して選択します。
[管理] で [アプリの登録]>[新規登録] の順に選択します。
[名前] に、アプリケーションの名前を入力します。たとえば、「ASPNET-Quickstart」と入力します。この名前は、アプリのユーザーに表示される場合があります。また、後で変更することができます。
[リダイレクト URI] の種類を [Web] に設定し、値を https://localhost:44368/ に設定します。
[登録] を選択します。
[管理] で、 [認証] を選択します。
[Implicit grant and hybrid flows](暗黙的な許可およびハイブリッドフロー) セクションで、 [ID トークン] を選択します。
[保存] を選択します。

手順 2:プロジェクトのダウンロード

サンプルコード* ASP.NET* ダウンロードする*

ヒント

Windows におけるパスの長さの制限に起因したエラーを防ぐため、ドライブのルートに近いディレクトリをアーカイブの展開先またはリポジトリのクローン先とすることをお勧めします。

手順 3:プロジェクトを実行する

ルートフォルダーに近いローカルフォルダーに .zip ファイルを展開します。たとえば、C:\Azure-Samples に展開します。

Windows におけるパスの長さの制限に起因したエラーを防ぐため、ドライブのルートに近いディレクトリをアーカイブの展開先とすることをお勧めします。
Visual Studio でソリューションを開きます (AppModelv2-WebApp-OpenIDConnect-DotNet.sln)。
Visual Studio のバージョンによっては、プロジェクト AppModelv2-WebApp-OpenIDConnect-DotNet を右クリックして [NuGet パッケージの復元] を選択することが必要になる場合があります。
[表示]>[その他のウィンドウ]>[パッケージマネージャーコンソール] を選択してパッケージマネージャーコンソールを開きます。次に、Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -r を実行します。
[Web.config] を編集し、ClientId、Tenant、redirectUri の各パラメーターを次のように置き換えます。
```
<add key="ClientId" value="Enter_the_Application_Id_here" />
<add key="Tenant" value="Enter_the_Tenant_Info_Here" />
<add key="redirectUri" value="https://localhost:44368/" />
```
このコードでは:
- Enter_the_Application_Id_here は、先ほど作成したアプリの登録のアプリケーション (クライアント) ID です。 Azure portal の [アプリの登録] にあるアプリの [概要] ページで、アプリケーション (クライアント) ID を見つけます。
- Enter_the_Tenant_Info_Here には、次のいずれかを選択します。
  - アプリケーションでサポートされるのが [所属する組織のみ] である場合、この値をディレクトリ (テナント) ID またはテナント名 (例: contoso.onmicrosoft.com) に置き換えます。 Azure portal の [アプリの登録] にあるアプリの [概要] ページで、ディレクトリ (テナント) ID を見つけます。
  - アプリケーションで任意の組織のディレクトリ内のアカウントがサポートされる場合は、この値を organizations に置き換えます。
  - アプリケーションで [すべての Microsoft アカウントユーザー] がサポートされる場合は、この値を common に置き換えます。
- redirectUri は、先ほど Azure portal の [アプリの登録] で入力したリダイレクト URI です。

詳細情報

このセクションでは、ユーザーをサインインさせるために必要なコードの概要を示します。この概要は、コードの働きや主な引数、また既存の ASP.NET アプリケーションにサインインを追加する方法を理解するうえで役立ちます。

このサンプルのしくみ

サンプルアプリにおける Web ブラウザー、Web アプリ、Microsoft ID プラットフォーム間の対話を表す図。

OWIN ミドルウェア NuGet パッケージ

ASP.NET で OpenID Connect を使用して Cookie ベースの認証を行うために、OWIN ミドルウェアパッケージを使用して認証パイプラインをセットアップできます。これらのパッケージは、Visual Studio 内のパッケージマネージャーコンソールから次のコマンドを実行してインストールできます。

Install-Package Microsoft.Owin.Security.OpenIdConnect
Install-Package Microsoft.Owin.Security.Cookies
Install-Package Microsoft.Owin.Host.SystemWeb

OWIN スタートアップクラス

OWIN ミドルウェアでは、ホストプロセスの開始時に実行される "スタートアップクラス" が使用されます。このクイックスタートでは、ルートフォルダーに startup.cs ファイルがあります。次のコードは、このクイックスタートで使用されるパラメーターを示しています。

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

    app.UseCookieAuthentication(new CookieAuthenticationOptions());
    app.UseOpenIdConnectAuthentication(
        new OpenIdConnectAuthenticationOptions
        {
            // Sets the client ID, authority, and redirect URI as obtained from Web.config
            ClientId = clientId,
            Authority = authority,
            RedirectUri = redirectUri,
            // PostLogoutRedirectUri is the page that users will be redirected to after sign-out. In this case, it's using the home page
            PostLogoutRedirectUri = redirectUri,
            Scope = OpenIdConnectScope.OpenIdProfile,
            // ResponseType is set to request the code id_token, which contains basic information about the signed-in user
            ResponseType = OpenIdConnectResponseType.CodeIdToken,
            // ValidateIssuer set to false to allow personal and work accounts from any organization to sign in to your application
            // To only allow users from a single organization, set ValidateIssuer to true and the 'tenant' setting in Web.config to the tenant name
            // To allow users from only a list of specific organizations, set ValidateIssuer to true and use the ValidIssuers parameter
            TokenValidationParameters = new TokenValidationParameters()
            {
                ValidateIssuer = false // Simplification (see note below)
            },
            // OpenIdConnectAuthenticationNotifications configures OWIN to send notification of failed authentications to the OnAuthenticationFailed method
            Notifications = new OpenIdConnectAuthenticationNotifications
            {
                AuthenticationFailed = OnAuthenticationFailed
            }
        }
    );
}

Where	説明
`ClientId`	Azure portal に登録されているアプリケーションのアプリケーション ID。
`Authority`	ユーザーが認証するためのセキュリティトークンサービス (STS) エンドポイント。通常、パブリッククラウドでは `https://login.microsoftonline.com/{tenant}/v2.0` になります。この URL の {tenant} には、テナントの名前またはテナント ID を指定するか、共通エンドポイントへの参照を表す `common` を指定します (共通エンドポイントは、マルチテナント型のアプリケーションで使用されます。)
`RedirectUri`	Microsoft ID プラットフォームに対する認証後にユーザーが誘導される URL。
`PostLogoutRedirectUri`	サインオフ後にユーザーが誘導される URL。
`Scope`	要求されているスコープのスペース区切りリスト。
`ResponseType`	認証からの応答に承認コードと ID トークンを含めるという要求。
`TokenValidationParameters`	トークン検証のためのパラメーターリスト。この場合、`ValidateIssuer` は `false` に設定され、任意の個人、あるいは職場または学校のアカウントタイプからのサインインを受け付け可能であることを示します。
`Notifications`	`OpenIdConnect` メッセージに対して実行できるデリゲートのリスト。

注意

ValidateIssuer = false の設定は、このクイックスタートを単純にするためのものです。実際のアプリケーションでは、発行者を検証します。その方法については、サンプルを参照してください。

認証チャレンジ

コントローラーで認証チャレンジを要求することによって、ユーザーにサインインを強制することができます。

public void SignIn()
{
    if (!Request.IsAuthenticated)
    {
        HttpContext.GetOwinContext().Authentication.Challenge(
            new AuthenticationProperties{ RedirectUri = "/" },
            OpenIdConnectAuthenticationDefaults.AuthenticationType);
    }
}

ヒント

この方法を使用して認証チャレンジを要求するかどうかは任意です。通常、認証されたユーザーと認証されていないユーザーの両方に、なんらかのビューへのアクセスを用意したい場合に、これを使用します。代わりに、次のセクションで説明する方法を使ってコントローラーを保護することもできます。

コントローラーまたはコントローラーアクションを保護するための属性

コントローラーまたはコントローラーアクションは、[Authorize] 属性を使用して保護することができます。この属性は、認証されたユーザーにのみコントローラーのアクションへのアクセスを許可することで、コントローラーまたはアクションへのアクセスを制限します。認証チャレンジは、[Authorize] 属性によって修飾されたいずれかのアクションまたはコントローラーに対して非認証ユーザーがアクセスを試みると自動的に実行されます。

ヘルプとサポート

サポートが必要な場合、問題をレポートする場合、またはサポートオプションについて知りたい場合は、開発者向けのヘルプとサポートに関するページを参照してください。

次のステップ

アプリケーションや新機能の構築についての完全なステップバイステップガイドについては、ASP.NET チュートリアルをお試しください。このクイックスタートの完全な説明も含まれています。

ASP.NET Web アプリにサインインを追加する

次のクイックスタートでは、ASP.NET Core Web アプリのコードサンプルを使用して、任意の Azure Active Directory (Azure AD) 組織からユーザーをサインインさせる方法を示します。

図については、「このサンプルのしくみ」を参照してください。

前提条件

Visual Studio 2022 または Visual Studio Code
.NET Core SDK 6.0 以降

クイックスタートアプリケーションを登録してダウンロードする

手順 1:アプリケーションの登録

Azure portal にサインインします。
複数のテナントにアクセスできる場合は、トップメニューの [ディレクトリとサブスクリプション] フィルターを使用して、アプリケーションを登録する先のテナントに切り替えます。
Azure Active Directory を検索して選択します。
[管理] で [アプリの登録]>[新規登録] の順に選択します。
[名前] にアプリケーションの名前を入力します。たとえば、「AspNetCore-Quickstart」と入力します。アプリのユーザーには、この名前が表示されます。これは後で変更できます。
[リダイレクト URI] の種類を [Web] に設定し、値を https://localhost:44321/signin-oidc に設定します。
[登録] を選択します。
[管理] で、 [認証] を選択します。
[フロントチャネルのログアウト URL] に「https://localhost:44321/signout-oidc」と入力します。
[Implicit grant and hybrid flows](暗黙的な許可およびハイブリッドフロー) で、 [ID トークン] を選択します。
[保存] を選択します。
[管理] で、[証明書 &シークレット]>[クライアントシークレット]>[新しいクライアントシークレット] の順に選択します。
説明を入力します (clientsecret1 など)。
シークレットの有効期限として [1 年間] を選択します。
[追加] を選択して、すぐにシークレットの値を記録します。この値は後の手順で使用します。シークレット値は "二度と表示されず"、他の方法で取得することはできません。パスワードと同様に、安全な場所に記録してください。

手順 2:ASP.NET Core プロジェクトをダウンロードする

ASP.NET Core ソリューションをダウンロードします。

注意

現在、このコードサンプルは ASP.NET Core 3.1 を対象にしています。サンプルは.NET Core 6.0 を使用するように更新でき、次の手順「サンプルコードを ASP.NET Core 6.0 に更新する」で説明されています。このクイックスタートは近い将来非推奨となり、.NET 6.0 を使用するように更新される予定です。

手順 3:ASP.NET Core プロジェクトの構成

Windows のパスの長さ制限によって発生するエラーを回避するために、.zip ファイルをディスクのルートに近いローカルフォルダーに展開します。たとえば、C:\Azure-Samples に展開します。
選択したコードエディターでソリューションを開きます。
appsettings.json で、ClientId、および TenantId の値を置き換えます。アプリケーション (クライアント) ID とディレクトリ (テナント) ID の値は、Azure portal のアプリの [概要] ページにあります。
```
"Domain": "[Enter the domain of your tenant, e.g. contoso.onmicrosoft.com]",
"ClientId": "Enter_the_Application_Id_here",
"TenantId": "common",
```
- Enter_the_Application_Id_Here は、登録済みアプリケーションのアプリケーション (クライアント) ID です。
- Enter_the_Tenant_Info_Here を、次のいずれかに置き換えます。
  - アプリケーションで [この組織のディレクトリ内のアカウントのみ] がサポートされている場合は、この値をディレクトリ (テナント) ID (GUID) またはテナント名 (例: contoso.onmicrosoft.com) に置き換えます。ディレクトリ (テナント) ID は、アプリの [概要] ページで確認できます。
  - アプリケーションで "任意の組織のディレクトリ内のアカウント" がサポートされる場合は、この値を organizations に置き換えます。
  - アプリケーションで [すべての Microsoft アカウントユーザー] がサポートされている場合は、この値を common のままにします。
- Enter_the_Client_Secret_Here は、前の手順で作成、記録したクライアントシークレットに置き換えます。

このクイックスタートでは、appsettings.json ファイル内のその他の値は変更しないでください。

手順 4: サンプルコードを ASP.NET Core 6.0 に更新する

このコードサンプルをターゲットの ASP.NET Core 6.0 に更新するには、次の手順に従います。

WebApp-OpenIDConnect-DotNet.csproj を開きます

次の行を削除します。

<TargetFramework>netcoreapp3.1</TargetFramework>

その場所に次の行を追加します。

<TargetFramework>netcoreapp6.0</TargetFramework>

この手順により、サンプルの対象が .NET Core 6.0 フレームワークとなります。

手順 5: アプリケーションをビルドして実行する

アプリをビルドして実行するには、Visual Studio で [デバッグ] メニュー、[デバッグの開始] の順に選択するか、F5 キーを押します。

資格情報の入力を求めるプロンプトが表示され、その後アプリに必要なアクセス許可に対する同意要求が表示されます。同意プロンプトで [同意する] を選択します。

同意ダイアログボックスのスクリーンショット。アプリがユーザーに要求しているアクセス許可が表示されます。

要求されたアクセス許可に同意すると、適切な Azure Active Directory の資格情報を使用して正常にサインインしたことがアプリに表示されます。ユーザーのアカウントのメールアドレスが、ページの [API result] (API 結果) セクションに表示されます。これは Microsoft Graph API を使用して抽出されたものです。

実行中の Web アプリとサインインしたユーザーが表示されている Web ブラウザー

詳細情報

このセクションでは、ユーザーのサインインを処理し、そのユーザーの代理で Microsoft Graph API を呼び出すために必要なコードの概要を示します。コードの働きや主な引数を理解するうえでの助けとなるほか、既存の ASP.NET Core アプリケーションにサインイン処理を追加して Microsoft Graph を呼び出す場合にも役立ちます。このコードでは、MSAL.NET のラッパーである Microsoft.Identity.Web を使用しています。

このサンプルのしくみ

サンプルアプリにおける Web ブラウザー、Web アプリ、Microsoft ID プラットフォーム間の対話を表す図。

スタートアップクラス

Microsoft.AspNetCore.Authentication ミドルウェアは、ホスティングプロセスの開始時に実行される Startup クラスを使用します。

  // Get the scopes from the configuration (appsettings.json)
  var initialScopes = Configuration.GetValue<string>("DownstreamApi:Scopes")?.Split(' ');

  public void ConfigureServices(IServiceCollection services)
  {
      // Add sign-in with Microsoft
      services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
        .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))

            // Add the possibility of acquiring a token to call a protected web API
            .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)

                // Enables controllers and pages to get GraphServiceClient by dependency injection
                // And use an in memory token cache
                .AddMicrosoftGraph(Configuration.GetSection("DownstreamApi"))
                .AddInMemoryTokenCaches();

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

      // Enables a UI and controller for sign in and sign out.
      services.AddRazorPages()
          .AddMicrosoftIdentityUI();
  }

AddAuthentication() メソッドは、Cookie ベースの認証を追加するようサービスを構成します。この認証は、ブラウザーのシナリオで使用されるほか、チャレンジを OpenID Connect に設定する際に使用されます。

.AddMicrosoftIdentityWebApp を含む行によって、Microsoft ID プラットフォーム認証がアプリケーションに追加されます。その後、appsettings.json 構成ファイルの AzureAD セクションにある次の情報に基づいてユーザーのサインインを処理するように構成されます。

appsettings.json のキー	説明
`ClientId`	Azure portal に登録されているアプリケーションのアプリケーション (クライアント) ID。
`Instance`	ユーザーが認証するためのセキュリティトークンサービス (STS) エンドポイント。通常、この値は、Azure パブリッククラウドを示す `https://login.microsoftonline.com/` です。
`TenantId`	テナントの名前またはテナント ID (GUID)。職場または学校アカウントあるいは Microsoft 個人アカウントを使用してユーザーをサインインする場合は `common`。

EnableTokenAcquisitionToCallDownstreamApi メソッドによって、アプリケーションは、保護された Web API を呼び出すためのトークンを取得できるようになります。 AddMicrosoftGraph によって、コントローラーまたは Razor ページは (依存関係の挿入によって) 直接 GraphServiceClient を取得でき、また、AddInMemoryTokenCaches メソッドによって、アプリはトークンキャッシュの恩恵を受けることができます。

Configure() メソッドには、app.UseAuthentication() と app.UseAuthorization() という 2 つの重要なメソッドが含まれており、それらの名前付き機能を有効にします。また、Configure() メソッドで、少なくとも 1 つの endpoints.MapControllerRoute() 呼び出し (または endpoints.MapControllers() 呼び出し) に、Microsoft Identity Web のルートを登録する必要があります。

app.UseAuthentication();
app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapRazorPages();
});

コントローラーまたはコントローラーのメソッドを保護する

コントローラーのクラスまたはそのメソッドは、[Authorize] 属性を適用することで保護することができます。この [Authorize] 属性は、認証されたユーザーのみを許可することでアクセスを制限します。ユーザーがまだ認証されていない場合、コントローラーにアクセスするための認証チャレンジを開始することができます。このクイックスタートでは、スコープを構成ファイルから読み取っています。

[AuthorizeForScopes(ScopeKeySection = "DownstreamApi:Scopes")]
public async Task<IActionResult> Index()
{
    var user = await _graphServiceClient.Me.Request().GetAsync();
    ViewData["ApiResult"] = user.DisplayName;

    return View();
}

ヘルプとサポート

次の手順

次の GitHub リポジトリには、このクイックスタートで引用した ASP.NET Core コードサンプルと、以下の実現方法を示すその他のサンプルが含まれています。

新しい ASP.NET Core Web アプリに認証を追加する。
Microsoft Graph、他の Microsoft API、またはユーザー独自の Web API を呼び出す。
承認を追加する。
国内クラウドで、またはソーシャル ID を使用してユーザーのサインインを処理する。

GitHub の ASP.NET Core Web アプリのチュートリアル

このクイックスタートでは、Node.js Web アプリで認可コードフローを使用してユーザーのサインインを処理する方法を示すコードサンプルをダウンロードして実行します。このコードサンプルでは、Microsoft Graph API を呼び出すためのアクセストークンを取得する方法も示します。

図については、「このサンプルのしくみ」を参照してください。

このクイックスタートでは、承認コードフローで Node.js 用 Microsoft Authentication Library (MSAL Node) を使用します。

前提条件

Azure サブスクリプション。 Azure サブスクリプションを無料で作成します。
Node.js
Visual Studio Code または別のコードエディター

クイックスタートアプリケーションを登録してダウンロードする

手順 1:アプリケーションの登録

Azure portal にサインインします。
複数のテナントにアクセスできる場合は、トップメニューの [ディレクトリとサブスクリプション] フィルターを使用して、アプリケーションを登録するテナントに切り替えます。
[管理] で [アプリの登録]>[新規登録] の順に選択します。
アプリケーションの [名前] を入力します。この名前は、アプリのユーザーに表示される場合があります。また、後で変更することができます。
[サポートされているアカウントの種類] で、 [この組織のディレクトリ内のアカウントのみ] を選択します。
[リダイレクト URI] の種類を [Web] に設定し、値を http://localhost:3000/auth/redirect に設定します。
[登録] を選択します。
後で使用するために、アプリの [概要] ページで、 [アプリケーション (クライアント) ID] の値を書き留めます。
[管理] で、[証明書とシークレット]>[クライアントシークレット]>[新しいクライアントシークレット] の順に選択します。説明を空白のままにし、既定の有効期限をそのままにして、 [追加] を選択します。
後で使用するために、 [クライアントシークレット] の値を書き留めます。

手順 2:プロジェクトのダウンロード

Node.js を使用して Web サーバーでプロジェクトを実行するために、コアプロジェクトファイルをダウンロードします。

手順 3:Node アプリの構成

プロジェクトを展開し、ms-identity-node-main フォルダーを開き、App フォルダーの下にある .env ファイルを開きます。上記の値を次のように置き換えます。

変数	説明	例
`Enter_the_Cloud_Instance_Id_Here`	アプリケーションが登録されている Azure クラウドインスタンス	`https://login.microsoftonline.com/` (末尾のスラッシュを含む)
`Enter_the_Tenant_Info_here`	テナント ID またはプライマリドメイン	`contoso.microsoft.com` または `cbe899ec-5f5c-4efe-b7a0-599505d3d54f`
`Enter_the_Application_Id_Here`	登録したアプリケーションのクライアント ID	`cbe899ec-5f5c-4efe-b7a0-599505d3d54f`
`Enter_the_Client_Secret_Here`	登録したアプリケーションのクライアントシークレット	`WxvhStRfDXoEiZQj1qCy`
`Enter_the_Graph_Endpoint_Here`	アプリが呼び出す Microsoft Graph API クラウドインスタンス	`https://graph.microsoft.com/` (末尾のスラッシュを含む)
`Enter_the_Express_Session_Secret_Here`	Express session cookie の署名に使用されるランダムな文字列	`WxvhStRfDXoEiZQj1qCy`

ファイルは次のようになります。

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=cbe899ec-5f5c-4efe-b7a0-599505d3d54f
CLIENT_ID=fa29b4c9-7675-4b61-8a0a-bf7b2b4fda91
CLIENT_SECRET=WxvhStRfDXoEiZQj1qCy

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

手順 4:プロジェクトを実行する

Node.js を使用してプロジェクトを実行します。

サーバーを起動するために、プロジェクトディレクトリ内から次のコマンドを実行します。
```
cd App
npm install
npm start
```
「 http://localhost:3000/ 」を参照してください。
サインインを選択して、サインインプロセスを開始します。

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

詳細情報

このサンプルのしくみ

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

MSAL Node

MSAL Node ライブラリは、ユーザーをサインインさせ、Microsoft ID プラットフォームによって保護された API へのアクセスに使用されるトークンを要求します。次のように Node.js Package Manager (npm) を使用して、最新バージョンをダウンロードできます。

npm install @azure/msal-node

次のステップ

Microsoft ID プラットフォームでサポートされている Web アプリのシナリオの詳細については、次を参照してください。

ユーザーをサインインさせる Web アプリのシナリオ

このクイックスタートでは、Node.js と Express を使用して構築された Web アプリケーションで OpenID Connect 認証を設定する方法を示すコードサンプルをダウンロードして実行します。サンプルは、任意のプラットフォームで動作するように設計されています。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
Node.js。

アプリケーションの登録

Azure portal にサインインします。
複数のテナントにアクセスできる場合は、トップメニューの [ディレクトリとサブスクリプション] フィルターを使用して、アプリケーションを登録するテナントに切り替えます。
Azure Active Directory を検索して選択します。
[管理] で [アプリの登録]>[新規登録] の順に選択します。
アプリケーションの名前を入力します (例: MyWebApp)。この名前は、アプリのユーザーに表示される場合があります。また、後で変更することができます。
[サポートされているアカウントの種類] セクションで、 [任意の組織のディレクトリ内のアカウントと、個人用の Microsoft アカウント (Skype、Xbox、Outlook.com など)] を選択します。

複数のリダイレクト URI がある場合は、アプリが正常に作成された後、 [認証] タブからこれらを追加してください。
[登録] を選択して、アプリを作成します。
アプリの [概要] ページで、 [アプリケーション (クライアント) ID] の値を見つけ、後で使用するために記録します。この値は、このプロジェクトで後からアプリケーションを構成するために必要になります。
[管理] で、 [認証] を選択します。
[プラットフォームの追加]>[Web] の順に選択します。
[リダイレクト URI] セクションで、「http://localhost:3000/auth/openid/return」と入力します。
[Front-channel logout URL](フロントチャネルログアウト URL) に「https://localhost:3000」を入力します。
このサンプルでは、ユーザーをサインインさせるために暗黙的な許可のフローが有効になっている必要があるため、 [暗黙的な許可およびハイブリッドフロー] セクションで [ID トークン] を選択します。
[構成] をクリックします。
[管理] で、[Certificates & secrets](証明書とシークレット)>[クライアントシークレット]>[新しいクライアントシークレット] の順に選択します。
キーの説明 (インスタンスアプリシークレット用) を入力します。
キーの有効期間として [1 年]、[2 年] 、または [有効期限なし] を選択します。
[追加] を選択します。キー値が表示されます。キー値をコピーし、後で使用できるように安全な場所に保存します。

サンプルアプリケーションとモジュールのダウンロード

次に、サンプルリポジトリを複製し、NPM モジュールをインストールします。

シェルまたはコマンドラインから:

$ git clone git@github.com:AzureADQuickStarts/AppModelv2-WebApp-OpenIDConnect-nodejs.git

$ git clone https://github.com/AzureADQuickStarts/AppModelv2-WebApp-OpenIDConnect-nodejs.git

プロジェクトルートディレクトリから、次のコマンドを実行します。

$ npm install

アプリケーションの構成

指示に従って、config.js の exports.creds にパラメーターを指定します。

exports.identityMetadata の <tenant_name> を、*.onmicrosoft.com という形式の Azure AD テナント名で更新します。
アプリの登録で書き留めておいたアプリケーション ID で exports.clientID を更新します。
アプリの登録で書き留めておいたアプリケーションシークレットで exports.clientSecret を更新します。
アプリの登録で書き留めておいたリダイレクト URI で exports.redirectUrl を更新します。

運用アプリのオプション構成:

別の post_logout_redirect_uri を使用する場合、config.js の exports.destroySessionUrl を更新します。
mongoDB または他の互換性のあるセッションストアを使用する場合、config.js の exports.useMongoDBSessionStore を true に設定します。このサンプルの既定のセッションストアは express-session です。デフォルト*のセッション* ストアは、運用環境には適していません。
mongoDB セッションストアと別のデータベース URI を使用する場合は、exports.databaseUri を更新します。
exports.mongoDBSessionMaxAge を更新します。ここでは、mongoDB でセッションを保持する期間を指定できます。単位は秒です。

アプリケーションの構築と実行

mongoDB サービスを開始します。このアプリ*で mongoDB セッション* ストアを使用している場合は、mongoDB をインストールして、まずサービス*を開始する必要があります。デフォルト*のセッション* ストアを使用している場合は、このステップ*をスキップ*できます。

コマンドラインで次のコマンドを使用して、アプリを実行します。

$ node app.js

サーバーの出力を理解しづらい場合: このサンプルのログ記録には bunyan を使用します。 bunyan をインストールして上記のようにサーバーを実行しながら bunyan バイナリでパイプする場合を除き、コンソールはあまり意味を持ちません。

$ npm install -g bunyan

$ node app.js | bunyan

以上で終わりです。

http://localhost:3000 でサーバー*が正常に実行*されます。

ヘルプとサポート

次のステップ

Microsoft ID プラットフォームでサポートされている Web アプリのシナリオの詳細については、次を参照してください。

ユーザーをサインインさせる Web アプリのシナリオ

このクイックスタートでは、Java Web アプリケーションでユーザーをサインインし、Microsoft Graph API を呼び出す方法を示すコードサンプルをダウンロードして実行します。 Azure Active Directory (Azure AD) 組織のユーザーはアプリケーションにサインインできます。

図については、「このサンプルのしくみ」を参照してください。

前提条件

このサンプルを実行するには、以下が必要です。

Java Development Kit (JDK) 8 以降。
Maven。

クイックスタートアプリを登録してダウンロードする

クイックスタートアプリケーションを開始する方法としては、簡易 (オプション 1) と手動 (オプション 2) の 2 つがあります。

オプション 1: アプリを登録して自動構成を行った後、コードサンプルをダウンロードする

Azure portal のアプリの登録クイックスタートエクスペリエンスに移動します。
アプリケーションの名前を入力し、 [登録] を選択します。
ポータルのクイックスタートエクスペリエンスの案内に従って、自動的に構成されたアプリケーションコードをダウンロードします。

オプション 2:アプリケーションを登録し、アプリケーションとコードサンプルを手動で構成する

手順 1:アプリケーションの登録

アプリケーションを登録し、それにアプリの登録情報を手動で追加するには、次の手順を実行します。

Azure portal にサインインします。
複数のテナントにアクセスできる場合は、トップメニューの [ディレクトリとサブスクリプション] フィルターを使用して、アプリケーションを登録するテナントに切り替えます。
Azure Active Directory を検索して選択します。
[管理] の [アプリの登録] を選択します。
[新規登録] を選択します。
自分のアプリケーションの名前を入力します (例: java-webapp)。アプリのユーザーには、この名前が表示されます。これは後で変更できます。
[登録] を選択します。
[概要] ページのアプリケーション (クライアント) ID とディレクトリ (テナント) ID をメモします。これらの値は後で必要になります。
[管理] で、 [認証] を選択します。
[プラットフォームの追加]>[Web] の順に選択します。
[リダイレクト URI] セクションで、「https://localhost:8443/msal4jsample/secure/aad」と入力します。
[構成] をクリックします。
[Web] セクションの [リダイレクト URI] に、2 つ目のリダイレクト URI として「https://localhost:8443/msal4jsample/graph/me」と入力します。
[管理] で、[証明書とシークレット] を選択します。 [クライアントシークレット] セクションで、 [新しいクライアントシークレット] を選択します。
キーの説明 ("アプリのシークレット" など) を入力し、既定の有効期限のままにして、 [追加] を選択します。
クライアントシークレットの値をメモします。この情報は後で必要になります。

手順 2:コードサンプルのダウンロード

コードサンプルをダウンロードします

手順 3:コードサンプルの構成

ZIP ファイルをローカルフォルダーに展開します。
任意。 統合開発環境を使用する場合は、その環境内でサンプルを開きます。
application.properties ファイルを開きます。これは、src/main/resources/ フォルダーにあります。 aad.clientId、aad.authority、および aad.secretKey フィールドの値を、それぞれアプリケーション ID、テナント ID、およびクライアントシークレットの値で置き換えます。例を次に示します。
```
 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=https://localhost:8443/msal4jsample/secure/aad
 aad.redirectUriGraph=https://localhost:8443/msal4jsample/graph/me
 aad.msGraphEndpointHost="https://graph.microsoft.com/"
```

上のコードでは、次のようになります。

Enter_the_Application_Id_here は、自分が登録したアプリケーションのアプリケーション ID です。
Enter_the_Client_Secret_Here は、登録済みアプリケーション用に [証明書とシークレット] で作成した [クライアントシークレット] です。
Enter_the_Tenant_Info_Here は、登録したアプリケーションのディレクトリ (テナント) ID 値です。

localhost で HTTPS を使用するには、server.ssl.key プロパティを指定します。自己署名証明書を生成するには、keytool ユーティリティ (JRE に含まれています) を使用します。

次に例を示します。

keytool -genkeypair -alias testCert -keyalg RSA -storetype PKCS12 -keystore keystore.p12 -storepass password

server.ssl.key-store-type=PKCS12
server.ssl.key-store=classpath:keystore.p12
server.ssl.key-store-password=password
server.ssl.key-alias=testCert

生成されたキーストアファイルを resources フォルダーに配置します。

手順 4:コードサンプルの実行

プロジェクトを実行するには、次のいずれかの手順を実行します。

埋め込みの Spring Boot サーバーを使用して IDE から直接実行する。
Maven を使用して WAR ファイルにパッケージ化したうえで、Apache Tomcat などの J2EE コンテナーソリューションにデプロイする。

IDE からのプロジェクトの実行

IDE から Web アプリケーションを実行するには、[実行] を選択し、プロジェクトのホームページに移動します。このサンプルでは、標準のホームページ URL は https://localhost:8443. です

前面のページで、 [ログイン] ボタンを選択してユーザーを Azure Active Directory にリダイレクトし、資格情報の入力を求めます。
ユーザーは認証後、https://localhost:8443/msal4jsample/secure/aad にリダイレクトされます。ユーザーがサインインしたので、ページにユーザーアカウントに関する情報が表示されます。サンプル UI には、次のボタンがあります。
- "サインアウト": 現在のユーザーをアプリケーションからサインアウトし、ホームページにリダイレクトします。
- Show User Info (ユーザー情報の表示) :Microsoft Graph のトークンを取得し、そのトークンを含む要求で Microsoft Graph を呼び出します。これにより、サインインしたユーザーに関する基本情報が返されます。

Tomcat からのプロジェクトの実行

Web サンプルを Tomcat にデプロイする場合は、ソースコードにいくつかの変更を加えます。

ms-identity-java-webapp/src/main/java/com.microsoft.azure.msalwebsample/MsalWebSampleApplication を開きます。

すべてのソースコードを削除し、こちらのコードで置き換えます。

 package com.microsoft.azure.msalwebsample;

 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.boot.builder.SpringApplicationBuilder;
 import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

 @SpringBootApplication
 public class MsalWebSampleApplication extends SpringBootServletInitializer {

  public static void main(String[] args) {
   SpringApplication.run(MsalWebSampleApplication.class, args);
  }

  @Override
  protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
   return builder.sources(MsalWebSampleApplication.class);
  }
 }

Tomcat の既定の HTTP ポートは 8080 ですが、ポート 8443 経由の HTTPS 接続が必要です。この設定を構成するには:

tomcat/conf/system.xml にアクセスします。

<connector> タグを検索し、既存のコネクタをこのコネクタで置き換えます。

<Connector
         protocol="org.apache.coyote.http11.Http11NioProtocol"
         port="8443" maxThreads="200"
         scheme="https" secure="true" SSLEnabled="true"
         keystoreFile="C:/Path/To/Keystore/File/keystore.p12" keystorePass="KeystorePassword"
         clientAuth="false" sslProtocol="TLS"/>

コマンドプロンプトウィンドウを開きます。このサンプルのルートフォルダー (pom.xml ファイルが配置されている場所) に移動し、mvn package を実行してプロジェクトをビルドします。
- このコマンドを実行すると、 /targets ディレクトリに msal-web-sample-0.1.0.war ファイルが生成されます。
- このファイルの名前を msal4jsample.war に変更します。
- Tomcat またはその他の J2EE コンテナーソリューションを使用して、WAR ファイルをデプロイします。
  - msal4jsample.war ファイルをデプロイするには、これを Tomcat インストールの下にある /webapps/ ディレクトリにコピーしてから、Tomcat サーバーを起動します。
ファイルがデプロイされたら、ブラウザーを使用して https://localhost:8443/msal4jsample に移動します。

重要

このクイックスタートアプリケーションでは、クライアントシークレットを使用して、それ自体を機密クライアントとして識別します。クライアントシークレットはプレーンテキストとしてプロジェクトファイルに追加されるため、セキュリティ上の理由から、アプリケーションを運用環境で使用する前に、クライアントシークレットの代わりに証明書を使用することをお勧めします。証明書の使用方法の詳細については、「アプリケーションを認証するための証明書資格情報」を参照してください。

詳細情報

このサンプルのしくみ

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

MSAL の取得

MSAL for Java (MSAL4J) は Java ライブラリであり、ユーザーをサインインさせるために使用されたり、Microsoft ID プラットフォームによって保護されている API へのアクセスに使用されるトークンの要求に使用されたりします。

Maven または Gradle を使用して、アプリケーションに MSAL4J を追加し、アプリケーションの pom.xml (Maven) または build.gradle (Gradle) ファイルに対して以下の変更を行うことで、依存関係を管理します。

pom.xml 内:

<dependency>
    <groupId>com.microsoft.azure</groupId>
    <artifactId>msal4j</artifactId>
    <version>1.0.0</version>
</dependency>

build.gradle 内:

compile group: 'com.microsoft.azure', name: 'msal4j', version: '1.0.0'

MSAL の初期化

MSAL4J を使用するファイルの先頭に次のコードを追加して、MSAL for Java への参照を追加します。

import com.microsoft.aad.msal4j.*;

ヘルプとサポート

次のステップ

Microsoft ID プラットフォームでユーザーをサインインさせる Web アプリの構築方法の詳細については、複数のパートから構成されるシナリオシリーズを参照してください。

シナリオ: ユーザーをサインインさせる Web アプリ

このクイックスタートでは、Python Web アプリケーションでユーザーをサインインし、Microsoft Graph API を呼び出す方法を示すコードサンプルをダウンロードして実行します。個人用 Microsoft アカウントまたは Azure Active Directory (Azure AD) 組織のアカウントを持つユーザーは、アプリケーションにサインインできます。

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

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

アプリケーションは identity パッケージを使用して、Microsoft ID プラットフォームからアクセストークンを取得します。
このアクセストークンは、Microsoft Graph API を呼び出すときにユーザーを認証するためのベアラートークンとして使用されます。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
Azure Active Directory (Azure AD) テナント。 Azure AD テナントの取得方法の詳細については、Azure AD テナントの取得方法に関するページを参照してください。
Python 3.7 以上

手順 1:アプリケーションの登録

Azure portal でアプリケーションを登録するには、次の手順のようにします。

Azure portal にサインインします。
複数のテナントにアクセスできる場合は、トップメニューの [ディレクトリとサブスクリプション] フィルターを使用して、アプリケーションを登録するテナントを選択します。
ポータルの [アプリの登録] ページに移動し、[新規登録] を選択します。
アプリケーションの [名前] を入力します (例: python-webapp)。
[サポートされているアカウントの種類] で、 [Accounts in any organizational directory and personal Microsoft accounts](任意の組織のディレクトリ内のアカウントと個人用の Microsoft アカウント) を選択します。
[リダイレクト URI] で、プラットフォームの [Web] を選択します。
リダイレクト URI として「http://localhost:5000/getAToken」と入力します。これは後で変更できます。
[登録] を選択します。

手順 2: クライアントシークレットを追加する

後で使用するために、アプリの [概要] ページで、 [アプリケーション (クライアント) ID] の値を書き留めます。
[管理] で [証明書とシークレット] を選択し、[クライアントシークレット] セクションで、[新しいクライアントシークレット] を選択します。
クライアントシークレットの説明を入力し、既定の有効期限のままにして、[追加] を選択します。
クライアントシークレットの値を安全な場所に保存します。この値は、コードを構成するために必要になります。後で取得することはできません。

手順 3: スコープを追加する

[管理] で、 [API のアクセス許可]>[アクセス許可の追加] の順に選択します。
[Microsoft API] タブが選択されていることを確認します。
[よく使用される Microsoft API] セクションで、 [Microsoft Graph] を選択します。
[委任されたアクセス許可] セクションで、[User.ReadBasic.All] が選択されていることを確認します。必要に応じて検索ボックスを使用します。
[アクセス許可の追加] を選択します.

手順 4. サンプルアプリをダウンロードする

Python コードサンプルをダウンロードするか、リポジトリを複製します。

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

統合開発環境を使用してフォルダーを開くこともできます。

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

アプリケーションフォルダーに移動します。
.env.sample をガイドとして使用して、プロジェクトのルートフォルダーに .env ファイルを作成します。
```
TENANT_ID=<tenant id>
CLIENT_ID=<client id>
CLIENT_SECRET=<client secret>
```
- TENANT_ID の値を、登録済みアプリケーションのディレクトリ (テナント) ID に設定します。概要ページでも使用できます。
- CLIENT_ID の値を、登録済みアプリケーションのアプリケーション (クライアント) ID に設定します。概要ページで使用できます。
- CLIENT_SECRET の値を、登録済みアプリケーション用に証明書 & シークレットで作成したクライアントシークレットに設定します。
環境変数は app_config.py で参照され、ソース管理から除外するために別の .env ファイルに保持されます。指定された .gitignore ファイルを使用すると、.env ファイルがチェックインされなくなります。

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

アプリの仮想環境を作成します。

Windows
macOS/Linux

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

python3 -m venv .venv
source .venv/bin/activate

pip を使用して要件をインストールします。
```
python3 -m pip install -r requirements.txt
```
リダイレクト URI に一致するホストとポートを指定して、コマンドラインからアプリを実行します。
```
python3 -m flask run --host=localhost --port=5000
```
重要

このクイックスタートアプリケーションは、クライアントシークレットを使用して、それ自体を機密クライアントとして識別します。クライアントシークレットはプロジェクトファイルにプレーンテキストとして追加されるため、セキュリティ上の理由から、アプリケーションを運用アプリケーションと見なす前に、クライアントシークレットの代わりに証明書を使用することをお勧めします。証明書の使用方法の詳細については、これらの手順を参照してください。

ヘルプとサポート

次のステップ

複数のパートで構成されるシナリオシリーズで、ユーザーのサインインを行う Web アプリの詳細について確認します。

シナリオ: ユーザーをサインインさせる Web アプリ

シナリオ: Web API を呼び出す Web アプリ

クイックスタート: Web アプリに Microsoft でサインインを追加する

前提条件

アプリを登録してダウンロードする

自動構成

手動構成

手順 1:アプリケーションの登録

手順 2:プロジェクトのダウンロード

手順 3:プロジェクトを実行する

詳細情報

このサンプルのしくみ

OWIN ミドルウェア NuGet パッケージ

OWIN スタートアップ クラス

認証チャレンジ

コントローラーまたはコントローラー アクションを保護するための属性

ヘルプとサポート

次のステップ

前提条件

クイック スタート アプリケーションを登録してダウンロードする

手順 1:アプリケーションの登録

手順 2:ASP.NET Core プロジェクトをダウンロードする

手順 3:ASP.NET Core プロジェクトの構成

手順 4: サンプル コードを ASP.NET Core 6.0 に更新する

手順 5: アプリケーションをビルドして実行する

詳細情報

このサンプルのしくみ

スタートアップ クラス

コントローラーまたはコントローラーのメソッドを保護する

ヘルプとサポート

次の手順

前提条件

クイック スタート アプリケーションを登録してダウンロードする

手順 1:アプリケーションの登録

手順 2:プロジェクトのダウンロード

手順 3:Node アプリの構成

手順 4:プロジェクトを実行する

詳細情報

このサンプルのしくみ

MSAL Node

次のステップ

前提条件

アプリケーションの登録

サンプル アプリケーションとモジュールのダウンロード

アプリケーションの構成

アプリケーションの構築と実行

以上で終わりです。

ヘルプとサポート

次のステップ

前提条件

クイック スタート アプリを登録してダウンロードする

オプション 1: アプリを登録して自動構成を行った後、コード サンプルをダウンロードする

オプション 2:アプリケーションを登録し、アプリケーションとコード サンプルを手動で構成する

手順 1:アプリケーションの登録

手順 2:コード サンプルのダウンロード

手順 3:コード サンプルの構成

手順 4:コード サンプルの実行

IDE からのプロジェクトの実行

Tomcat からのプロジェクトの実行

詳細情報

このサンプルのしくみ

MSAL の取得

MSAL の初期化

ヘルプとサポート

次のステップ

前提条件

手順 1:アプリケーションの登録

手順 2: クライアント シークレットを追加する

手順 3: スコープを追加する

手順 4. サンプル アプリをダウンロードする

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

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

ヘルプとサポート

次のステップ

その他のリソース

その他のリソース

OWIN スタートアップクラス

コントローラーまたはコントローラーアクションを保護するための属性

クイックスタートアプリケーションを登録してダウンロードする

手順 4: サンプルコードを ASP.NET Core 6.0 に更新する

スタートアップクラス

クイックスタートアプリケーションを登録してダウンロードする

サンプルアプリケーションとモジュールのダウンロード

クイックスタートアプリを登録してダウンロードする

オプション 1: アプリを登録して自動構成を行った後、コードサンプルをダウンロードする

オプション 2:アプリケーションを登録し、アプリケーションとコードサンプルを手動で構成する

手順 2:コードサンプルのダウンロード

手順 3:コードサンプルの構成

手順 4:コードサンプルの実行

手順 2: クライアントシークレットを追加する

手順 4. サンプルアプリをダウンロードする

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

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