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

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

この記事では、シングルページアプリケーション (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) 構成オブジェクトを見つけて、authorities と knownAuthorities を実際のカスタムドメイン名とテナント 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 関数で、authenticationResult オブジェクトの id_token を解析して id_token 変数に格納します。

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

signOut 関数で、logoutRequest オブジェクトに 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 を介してサインインしたすべてのアプリケーションに対してログアウト要求が行われます。

これらのログアウト要求は、Azure AD B2C のログアウトページから、非表示の Iframe で行われます。ログイン時に Azure AD B2C によって記録されたアプリに登録されたすべてのフロントチャネルログアウトエンドポイントに対して、Iframe から 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 トークン ヒントを渡す