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

2025-05-08

重要

2025 年 5 月 1 日より、Azure AD B2C は新規のお客様向けに購入できなくなります。詳細については、FAQ を参照してください。

この記事では、シングルページアプリケーション (SPA) の Azure Active Directory B2C (Azure AD B2C) 認証エクスペリエンスをカスタマイズおよび強化する方法について説明します。

開始する前に、サンプル Web アプリケーションで認証を構成する方法に関する記事を理解しておいてください。

カスタムドメインの使用

カスタムドメインを使用すると、認証 URL を完全にブランド化できます。ユーザーの観点からは、ユーザーは Azure AD B2C b2clogin.com ドメイン名にリダイレクトされるのではなく、認証プロセス中もドメインに残ります。

URL 内の "b2c" へのすべての参照を削除するには、認証要求 URL の B2C テナント名 (contoso.onmicrosoft.com) をテナント ID GUID に置き換えることもできます。たとえば、 https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ を https://account.contosobank.co.uk/<tenant ID GUID>/ に変更できます。

認証 URL でカスタムドメインとテナント ID を使用するには、「カスタムドメインを有効にする」のガイダンスに従います。 Microsoft Authentication Library (MSAL) 構成オブジェクトを検索し、カスタムドメイン名とテナント ID を使用するように機関と 既知の認証を 変更します。

次の JavaScript コードは、変更前の MSAL 構成オブジェクトを示しています。

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

次の JavaScript コードは、変更後の MSAL 構成オブジェクトを 示しています。

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.___domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.___domain.com"],
      ...
    },
  ...
}

サインインユーザー体験中に、アプリが特定のユーザーをターゲットにしている可能性があります。アプリがユーザーを対象とする場合は、承認要求で、ユーザーのサインイン名を使用して login_hint クエリパラメーターを指定できます。 Azure AD B2C によってサインイン名が自動的に設定され、ユーザーはパスワードのみを指定する必要があります。

サインイン名を事前に入力するには、次の操作を行います。

カスタムポリシーを使用している場合は、「直接サインインの設定」の説明に従って、必要な入力要求を追加します。
login_hintを格納するオブジェクトを作成し、このオブジェクトを MSAL loginPopup() メソッドに渡します。
```
let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);
```

ID プロバイダーを事前選択する

Facebook、LinkedIn、Google などのソーシャルアカウントを含むようにアプリケーションのサインイン体験を構成した場合は、 domain_hint パラメーターを指定できます。このクエリパラメーターは、サインインに使用するソーシャル ID プロバイダーに関するヒントを Azure AD B2C に提供します。たとえば、アプリケーションが domain_hint=facebook.comを指定した場合、サインインフローは Facebook サインインページに直接移動します。

ユーザーを外部 ID プロバイダーにリダイレクトするには、次の操作を行います。

外部 ID プロバイダーのドメイン名を確認します。詳細については、「サインインをソーシャルプロバイダーにリダイレクトする」を参照してください。
extraQueryParameters を格納するオブジェクトを作成し、このオブジェクトを MSAL loginPopup() メソッドに渡します。
```
let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);
```

UI 言語を指定する

Azure AD B2C での言語のカスタマイズにより、ユーザーフローは顧客のニーズに合わせてさまざまな言語に対応できます。詳細については、「言語のカスタマイズ」を参照してください。

優先する言語を設定するには、次の操作を行います。

言語のカスタマイズを構成します。
extraQueryParameters を格納するオブジェクトを作成し、このオブジェクトを MSAL loginPopup() メソッドに渡します。
```
let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);
```

カスタムクエリ文字列パラメーターを渡す

カスタムポリシーでは、カスタムクエリ文字列パラメーターを渡すことができます。適切なユースケースの例として、ページコンテンツを動的に変更する場合があります。

カスタムクエリ文字列パラメーターを渡すには、次の操作を行います。

ContentDefinitionParameters 要素を構成します。
extraQueryParameters を格納するオブジェクトを作成し、このオブジェクトを MSAL loginPopup() メソッドに渡します。
```
let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);
```

ID トークンヒントを渡す

証明書利用者アプリケーションは、OAuth2 承認要求の一部として受信 JSON Web トークン (JWT) を送信できます。受信トークンは、ユーザーまたは承認要求に関するヒントです。 Azure AD B2C はトークンを検証し、要求を抽出します。

認証要求に ID トークンヒントを含めるには、次の操作を行います。

カスタムポリシーで、 ID トークンヒント技術プロファイルを定義します。
extraQueryParameters を格納するオブジェクトを作成し、このオブジェクトを MSAL loginPopup() メソッドに渡します。
```
let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);
```

ログアウトのリダイレクトをセキュリティで保護する

ログアウト後、ユーザーは、アプリケーションに指定された応答 URL に関係なく、 post_logout_redirect_uri パラメーターで指定された URI にリダイレクトされます。ただし、有効な id_token_hint が渡され、ログアウト要求で ID トークンが必要な場合、Azure AD B2C は、 post_logout_redirect_uri の値が、リダイレクトを実行する前に、アプリケーションの構成済みのリダイレクト URI のいずれかに一致することを確認します。アプリケーションに一致する応答 URL が構成されていない場合は、エラーメッセージが表示され、ユーザーはリダイレクトされません。

セキュリティで保護されたログアウトリダイレクト URI をサポートするには、次の手順に従います。

グローバルにアクセスできる変数を作成して、 id_tokenを格納します。
```
let id_token = "";
```

MSAL handleResponse関数で、id_token オブジェクトのauthenticationResultをid_token変数に解析します。

function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

signOut関数で、id_token_hint オブジェクトにパラメーターを追加します。

function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

上記の例では、ログアウト要求に渡される post_logout_redirect_uri は次の形式になります: https://your-app.com/。この URL は、アプリケーション登録の応答 URL に追加する必要があります。

単一ログアウトを有効にする

Azure AD B2C のシングルログアウトでは、OpenId Connect のフロントチャネルログアウトを使用して、ユーザーが Azure AD B2C 経由でサインインしたすべてのアプリケーションにログアウト要求を行います。

これらのログアウト要求は、非表示の Iframe の Azure AD B2C ログアウトページから行われます。 Iframe は、Azure AD B2C がログイン中として記録したアプリに登録されているすべてのフロントチャネルログアウトエンドポイントに HTTP 要求を行います。

各アプリケーションのログアウトエンドポイントは 、MSAL logout() メソッドを呼び出す必要があります。また、 allowRedirectInIframe を true に設定して、このシナリオで Iframe 内で実行するように MSAL を明示的に構成する必要があります。

次のコードサンプルでは、 allowRedirectInIframe を trueに設定します。

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

次のステップ

MSAL.js 構成オプションの詳細を確認します。

次の方法で共有

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

カスタム ドメインの使用

サインイン名を事前に入力する

ID プロバイダーを事前選択する

UI 言語を指定する

カスタム クエリ文字列パラメーターを渡す

ID トークン ヒントを渡す