Azure AD B2C を使用してサンプルのシングルページアプリケーションで認証を構成する

[アーティクル]
10/11/2024

この記事では、サンプルの JavaScript シングルページアプリケーション (SPA) を使用して、Azure Active Directory B2C (Azure AD B2C) 認証を SPA に追加する方法について説明します。

概要

OpenID Connect (OIDC) は、OAuth 2.0 を基盤にした認証プロトコルです。これを使用して、ユーザーはアプリケーションに安全にサインインできます。この SPA のサンプルでは、MSAL.js と OIDC PKCE フローを使用します。 Microsoft が提供する MSAL.js ライブラリを使用すると、認証と認可のサポートを SPA アプリに簡単に追加できます。

サインインフローでは、次の手順が実行されます。

ユーザーが Web アプリにアクセスして [サインイン] を選択します。
アプリによって認証要求が開始され、ユーザーが Azure AD B2C にリダイレクトされます。
ユーザーがサインアップまたはサインインし、パスワードをリセットします。ソーシャルアカウントを使用してサインインすることもできます。
ユーザーがサインインすると、Azure AD B2C からアプリに認可コードが返されます。
シングルページアプリケーションで、ID トークンが検証され、要求が読み取られ、保護されたリソースと API をユーザーが呼び出すことが許可されます。

アプリ登録の概要

アプリで Azure AD B2C を使用してサインインし、Web API を呼び出せるようにするには、Azure AD B2C ディレクトリに 2 つのアプリケーションを登録します。

Web アプリケーションの登録により、アプリでは Azure AD B2C を使用してサインインできるようになります。登録時に、"リダイレクト URI" を指定します。リダイレクト URI は、Azure AD B2C での認証が完了した後にユーザーが Azure AD B2C によってリダイレクトされるエンドポイントです。アプリの登録プロセスによって、アプリを一意に識別する "アプリケーション ID" ("クライアント ID" とも呼ばれます) が生成されます。
Web API の登録により、アプリではセキュリティで保護された Web API を呼び出すことができます。登録には、Web API の "スコープ" が含まれます。スコープを使用することで、Web API などの保護されたリソースへのアクセス許可を管理できます。 Web アプリケーションのアクセス許可を Web API のスコープに付与します。アクセストークンが要求されたら、アプリで必要なアクセス許可を要求の scope パラメーターに指定します。

アプリのアーキテクチャと登録について、次の図に示します。

Web API 呼び出しの登録とトークンが使用されている Web アプリの図。

Web API の呼び出し

認証が完了した後、ユーザーがアプリと対話すると、保護された Web API が呼び出されます。その Web API では、ベアラートークン認証が使用されます。ベアラートークンは、アプリによって Azure AD B2C から取得されたアクセストークンです。アプリでは、HTTPS 要求の Authorization ヘッダーでトークンを渡します。

Authorization: Bearer <access token>

アクセストークンのスコープが Web API のスコープと一致しない場合、認証ライブラリでは正しいスコープの新しいアクセストークンが取得されます。

サインアウトフロー

サインアウトフローには、次の手順が含まれます。

アプリから、ユーザーがサインアウトします。
アプリによってそのセッションオブジェクトがクリアされ、認証ライブラリによってそのトークンキャッシュがクリアされます。
アプリによってユーザーが Azure AD B2C サインアウトエンドポイントに移動し、Azure AD B2C セッションが終了されます。
ユーザーが再びアプリにリダイレクトされます。

前提条件

次が実行されているコンピューター:

Visual Studio Code、または別のコードエディター
Node.js ランタイム

手順 1: ユーザーフローを構成する

ユーザーがアプリにサインインしようとすると、ユーザーフローを介した承認エンドポイントへの認証要求がアプリによって開始されます。ユーザーフローによって、ユーザーのエクスペリエンスが定義および制御されます。ユーザーがユーザーフローを完了すると、Azure AD B2C によってトークンが生成され、ユーザーはアプリケーションにリダイレクトされます。

ユーザーフローまたはカスタムポリシーの作成をまだ行っていない場合は、作成します。手順を繰り返して、次のように 3 つの個別のユーザーフローを作成します。

サインインとサインアップを結合したユーザーフロー (例:)susi。このユーザーフローでは、パスワードを忘れた 場合のエクスペリエンスもサポートされています。
プロファイル編集 ユーザーフロー (例: edit_profile) 。
パスワードのリセット ユーザーフロー (例: reset_password)。

Azure AD B2C は、 B2C_1_ ユーザーフロー名の前に付加されます。たとえば、susi が B2C_1_susi になります。

手順 2: SPA と API を登録する

この手順では、SPA と Web API アプリケーションの登録を作成し、Web API のスコープを指定します。

手順 2.1: Web API アプリケーションを登録する

Web API アプリの登録 (App ID: 2) を作成するには、次の手順に従います。

Azure portal にサインインします。
ご自分の Azure AD B2C テナントが含まれるディレクトリを必ず使用してください。ポータルツールバーの [Directories + subscriptions](ディレクトリ + サブスクリプション) アイコンを選択します。
[ポータルの設定] | [Directories + subscriptions](ディレクトリ + サブスクリプション) ページの [ディレクトリ名] の一覧で自分の Azure AD B2C ディレクトリを見つけて、 [切り替え] を選択します。
Azure portal で、 [Azure AD B2C] を検索して選択します。
[アプリの登録] を選択し、 [新規登録] を選択します。
アプリケーションの名前を入力します (my-api1 など)。 [リダイレクト URI] と [サポートされているアカウントの種類] を既定値のままにします。
[登録] を選択します。
アプリ登録が完了したら、 [概要] を選択します。
アプリケーション (クライアント) ID の値を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

手順 2.2: スコープを構成する

作成した my-api1 アプリケーション (App ID: 2) を選択して、その [概要] ページを開きます。
[管理] の [API の公開] を選択します。
[アプリケーション ID URI] の横にある [設定] リンクを選択します。既定値 (GUID) を一意の名前 (例: tasks-api) に置き換え、[保存] を選択します。

Web アプリケーションで Web API のアクセストークンを要求するときに、API に対して定義する各スコープのプレフィックスとしてこの URI を追加する必要があります。
[この API で定義されるスコープ] で、 [スコープの追加] を選択します。
API への読み取りアクセスを定義するスコープを作成するには:
1. [スコープ名] に tasks.read を入力します。
2. [管理者の同意の表示名] で、「Read access to tasks API」を入力します。
3. [管理者の同意の説明] で、「Allows read access to the tasks API」を入力します。
[スコープの追加] を選択します。
[Add a scope (スコープの追加)] を選択し、API への書き込みアクセスを定義するスコープを追加します。
1. [スコープ名] に「tasks.write」を入力します。
2. [管理者の同意の表示名] に、「Write access to tasks API」を入力します。
3. [管理者の同意の説明] に、「Allows write access to the tasks API」を入力します。
[スコープの追加] を選択します。

手順 2.3: SPA を登録する

SPA の登録を作成するには、次の手順のようにします。

Azure portal にサインインします。
複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
Azure AD B2C を検索して選択します。
[アプリの登録] を選択し、 [新規登録] を選択します。
アプリケーションの [名前] を入力します (MyApp など)。
[サポートされているアカウントの種類] で、 [Accounts in any identity provider or organizational directory (for authenticating users with user flows)]((ユーザーフローを使用してユーザーを認証するための) 任意の ID プロバイダーまたは組織のディレクトリのアカウント) を選択します。
[リダイレクト URI] で、 [Single-page application (SPA)](シングルページアプリケーション (SPA)) を選択し、URL ボックスに「http://localhost:6420」と入力します。
[アクセス許可] で、 [Grant admin consent to openid and offline access permissions](OpenID とオフラインのアクセス許可に管理者の同意を与える) チェックボックスをオンにします。
[登録] を選択します。

アプリケーション (クライアント) ID を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

Web アプリケーション ID を記録するための Web アプリの [概要] ページのスクリーンショット。

手順 2.4: 暗黙的な許可のフローを有効にする

暗黙的な許可フローは、MSAL.jsバージョン 1.3 以前のバージョンを使用している場合、またはアプリ登録を使用してテスト目的でユーザーフローをテストする場合の 2 つの理由で有効にすることができます。

アプリの暗黙的な許可フローを有効にするには、次の手順を使用します。

作成したアプリの登録を選びます。
[管理] で、[認証] を選択します。
[暗黙的な許可およびハイブリッドフロー] で、[アクセストークン (暗黙的なフローに使用)] と [ID トークン (暗黙的およびハイブリッドフローに使用)] の両方のチェックボックスをオンにします。
[保存] を選択します。

Note

アプリで MSAL.js 2.0 以降を使用している場合は、MSAL.js 2.0 以降で OAuth 2.0 Authorization コードフロー (PKCE) がサポートされるため、暗黙的な許可フローを有効にしないでください。暗黙的な許可を有効にしてユーザーフローをテストする場合は、アプリを運用環境にデプロイする前に、暗黙的な許可フロー設定を無効にしてください。

手順 2.5: アクセス許可を付与する

アプリ (アプリ ID: 1) にアクセス許可を付与するには、次の手順をおこないます。

[アプリの登録] を選択し、作成したアプリを選択します (アプリ ID: 1)。
[管理] の下にある [API のアクセス許可] を選択します。
[構成されたアクセス許可] の下で [アクセス許可の追加] を選択します。
[自分の API] タブを選択します。
Web アプリケーションへのアクセス許可が必要な API を選択します (アプリ ID: 2)。たとえば、「my-api1」と入力します。
[アクセス許可] で、 [タスク] を展開し、前に定義したスコープを選択します(たとえば、tasks.read と tasks.write)。
[アクセス許可の追加] を選択します.
[<テナント名> に管理者の同意を与えます] を選択します。
[はい] を選択します。
[最新の情報に更新] を選択し、両方のスコープの [状態] に、Granted for ...(... に付与されました) と表示されていることを確認します。
[Configured permissions (構成済みのアクセス許可)] の一覧からスコープを選択し、スコープの完全な名前をコピーします。

手順 3: SPA のサンプルコードを取得する

このサンプルでは、シングルページアプリケーションでユーザーのサインアップとサインインに Azure AD B2C を使用する方法を示します。その後、アプリではアクセストークンを取得して、保護された Web API を呼び出します。

SPA サンプルコードは、次のいずれかの方法で入手できます。

zip ファイルをダウンロードします。
次のコマンドを実行して、GitHub からサンプルを複製します。
```
git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
```

手順 3.1: SPA のサンプルを更新する

SPA サンプルを入手したら、Azure AD B2C と Web API の値でコードを更新します。サンプルフォルダー内の App フォルダーにある、次の表の JavaScript ファイルを開き、それぞれの対応する値で更新します。

ファイル	Key	値
authConfig.js	clientId	手順 2.3 の SPA ID。
policies.js	names	ユーザーフロー、または手順 1 で作成したカスタムポリシー。
policies.js	authorities	B2C Azure ADフローまたはカスタムポリシー機関 ( `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>` など) 。 `your-sign-in-sign-up-policy`を手順 1 で作成したユーザーフローまたはカスタムポリシーに置き換えます
policies.js	authorityDomain	お使いの Azure AD B2C 機関ドメイン(`<your-tenant-name>.b2clogin.com`など)です。
apiConfig.js	b2cScopes	手順 2.2 で作成した Web API スコープ (例: `b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]`)。
apiConfig.js	webApi	Web API の URL (`http://localhost:5000/hello`)。

結果のコードは次のサンプルのようになります。

authConfig.js:

const msalConfig = {
    auth: {
      clientId: "<your-MyApp-application-ID>", // This is the ONLY mandatory field; everything else is optional.
      authority: b2cPolicies.authorities.signUpSignIn.authority, // Choose sign-up/sign-in user-flow as your default.
      knownAuthorities: [b2cPolicies.authorityDomain], // You must identify your tenant's domain as a known authority.
      redirectUri: "http://localhost:6420", // You must register this URI on Azure Portal/App Registration. Defaults to "window.location.href".
    },
    cache: {
      cacheLocation: "sessionStorage",  
      storeAuthStateInCookie: false, 
    },
    system: {
      loggerOptions: {
        loggerCallback: (level, message, containsPii) => {
          if (containsPii) {
            return;
          }
          switch (level) {
            case msal.LogLevel.Error:
              console.error(message);
              return;
            case msal.LogLevel.Info:
              console.info(message);
              return;
            case msal.LogLevel.Verbose:
              console.debug(message);
              return;
            case msal.LogLevel.Warning:
              console.warn(message);
              return;
          }
        }
      }
    }
  };
};

const loginRequest = {
  scopes: ["openid", ...apiConfig.b2cScopes],
};

const tokenRequest = {
  scopes: [...apiConfig.b2cScopes],  // e.g. ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"]
  forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
};

policies.js:

const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_reset",
        },
        editProfile: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile"
        }
    },
    authorityDomain: "your-tenant-name.b2clogin.com"
}

apiConfig.js:

const apiConfig = {
  b2cScopes: ["https://your-tenant-name.onmicrosoft.com/tasks-api/tasks.read"],
  webApi: "http://localhost:5000/hello"
};

手順 4: Web API のサンプルコードを取得する

Web API を登録し、そのスコープを定義したので、Azure AD B2C テナントで動作するように Web API コードを構成します。

Web API のサンプルコードは、次のいずれかの方法で入手できます。

*.zip アーカイブをダウンロードします。
次のコマンドを実行して、GitHub からサンプル Web API プロジェクトを複製します。
```
git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git
```
また、GitHub で Azure-Samples/active-directory-b2c-javascript-nodejs-webapi プロジェクトに直接アクセスすることもできます。

手順 4.1: Web API を更新する

コードエディターで config.json ファイルを開きます。
前に作成したアプリケーション登録で変数の値を変更します。前提条件の一部として作成したユーザーフローを使用して、policyName を更新します (例: b2c_1_susi)。
```
"credentials": {
    "tenantName": "<your-tenant-name>",
    "clientID": "<your-webapi-application-ID>"
},
"policies": {
    "policyName": "b2c_1_susi"
},
"resource": {
    "scope": ["tasks.read"] 
},
```

手順 4.2: CORS を有効にする

シングルページアプリケーションに Node.js Web API の呼び出しを許可するには、Web API でクロスオリジンリソース共有 (CORS) を有効にする必要があります。運用アプリケーションでは、どのドメインによって要求が行われているかに注意してください。この例では、どのドメインからの要求も許可します。

CORS を有効にするには、次のミドルウェアを使用します。ダウンロードした Node.js の Web API コードサンプルでは、index.js ファイルに既に追加されています。

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
});

手順 5: SPA と Web API を実行する

これで、シングルページアプリケーションの API へのスコープ付きアクセスをテストする準備ができました。ローカルマシンで Node.js Web API とサンプル JavaScript シングルページアプリケーションの両方を実行します。次に、シングルページアプリケーションにサインインし、 [Call API](API の呼び出し) ボタンを選択して、保護されている API に対する要求を開始します。

Node.js Web API を実行する

コンソールウィンドウを開き、Node.js Web API サンプルが含まれるディレクトリに移動します。次に例を示します。
```
cd active-directory-b2c-javascript-nodejs-webapi
```
次のコマンドを実行します。
```
npm install && npm update
node index.js
```
コンソールウィンドウには、アプリケーションがホストされている場所のポート番号が表示されます。
```
Listening on port 5000...
```

シングルページアプリを実行する

別のコンソールウィンドウを開き、JavaScript SPA サンプルが含まれるディレクトリに移動します。次に例を示します。
```
cd ms-identity-b2c-javascript-spa
```
次のコマンドを実行します。
```
npm install && npm update
npm start
```
コンソールウィンドウには、アプリケーションがホストされている場所のポート番号が表示されます。
```
Listening on port 6420...
```
アプリケーションを表示するには、ブラウザーで http://localhost:6420 にアクセスします。
サインインアップまたはサインインプロセスを完了します。正常にログインすると、"User <ユーザー名> logged in" というメッセージが表示されます。
[Call API] ボタンを選択します。 SPA では、要求内のアクセストークンを保護された Web API に送信します。それによって、ログインしているユーザーの表示名が返されます。

アプリケーションをデプロイする

運用アプリケーションでは、アプリ登録のリダイレクト URI は通常、アプリが実行されているパブリックにアクセス可能なエンドポイント (https://contoso.com/signin-oidc など) です。

お使いの登録済みアプリケーションでは、いつでもリダイレクト URI を追加したり、変更したりすることができます。リダイレクト URI には、次の制限があります。

応答 URL は、スキーム https で始まる必要があります。
応答 URL では大文字と小文字が区別されます。大文字と小文字の区別は、実行中のアプリケーションの URL パスの場合と一致している必要があります。

次のステップ

この記事で説明した概念の詳細については、以下を参照してください。

次の方法で共有

Azure AD B2C を使用してサンプルのシングルページアプリケーションで認証を構成する

概要

アプリ登録の概要

Web API の呼び出し

サインアウトフロー

前提条件

手順 1: ユーザーフローを構成する

手順 2: SPA と API を登録する

手順 2.1: Web API アプリケーションを登録する

手順 2.2: スコープを構成する

手順 2.3: SPA を登録する

手順 2.4: 暗黙的な許可のフローを有効にする

手順 2.5: アクセス許可を付与する

手順 3: SPA のサンプルコードを取得する

手順 3.1: SPA のサンプルを更新する

手順 4: Web API のサンプルコードを取得する

手順 4.1: Web API を更新する

手順 4.2: CORS を有効にする

手順 5: SPA と Web API を実行する

Node.js Web API を実行する

シングルページアプリを実行する

アプリケーションをデプロイする

次のステップ

フィードバック

その他のリソース

次の方法で共有

Azure AD B2C を使用してサンプルのシングルページ アプリケーションで認証を構成する

概要

サインイン フロー

アプリ登録の概要

Web API の呼び出し

サインアウト フロー

前提条件

手順 1: ユーザー フローを構成する

手順 2: SPA と API を登録する

手順 2.1: Web API アプリケーションを登録する

手順 2.2: スコープを構成する

手順 2.3: SPA を登録する

手順 2.4: 暗黙的な許可のフローを有効にする

手順 2.5: アクセス許可を付与する

手順 3: SPA のサンプル コードを取得する

手順 3.1: SPA のサンプルを更新する

手順 4: Web API のサンプル コードを取得する

手順 4.1: Web API を更新する

手順 4.2: CORS を有効にする

手順 5: SPA と Web API を実行する

Node.js Web API を実行する

シングルページ アプリを実行する

アプリケーションをデプロイする

次のステップ

フィードバック

その他のリソース

Azure AD B2C を使用してサンプルのシングルページアプリケーションで認証を構成する

サインインフロー

サインアウトフロー

手順 1: ユーザーフローを構成する

手順 3: SPA のサンプルコードを取得する

手順 4: Web API のサンプルコードを取得する

シングルページアプリを実行する