Azure AD B2C サインイン時にリダイレクトのエラーが発生する際の解決策をまとめておきます。

実現したかったこと

Azure App Service にデプロイ済みのシングルページアプリケーション (SPA) で、Azure AD B2C を用いたサインインを行う。(ローカル環境でのテスト時には正常動作を確認済み)

エラー内容

The redirect URI 'https://xxxxx.azurewebsites.net/' specified in the request does not match the redirect URIs configured for the application '9cd1ccf6-xxxx-xxxx-xxxx-xxxxxxxxxx'. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

(意訳) リクエストに含まれているリダイレクトURIは、アプリケーション構成のリダイレクトURIs と一致しません。リクエストで送信されたリダイレクトURIが Azure Portal のアプリケーションに追加されているか、確認してください。この問題の解決方法の詳細はエラー AADSTS50011: 要求で指定されたリダイレクト URI が一致しませんをご覧ください。

解決方法

Azure Portal 上で Azure AD B2C リソースへアクセスして、対象のアプリケーションの認証ページより、リダイレクトURI を追加する。

まず、このエラーの最初に表記されているリダイレクトURIは、アプリケーション (ソースコード) 側で設定しているものになります。そして、このリダイレクトURIと一致していないとされているのが Azure AD B2C に登録されているアプリケーションのリダイレクトURIs です。Azure AD B2C 認証サーバーは、サインイン後リダイレクトURIに対して、認証コードやトークンを送信するため、Azure AD B2C アプリケーションに登録されているリダイレクト先にのみ、リダイレクトが許可される仕組みになっています。

Web アプリケーション側は @azure/msal-browser SDK を使用して、以下のように設定しています。

authConfig.ts

import { Configuration, PopupRequest } from "@azure/msal-browser";

export const msalConfig: Configuration = {
  auth: {
    clientId: "<Azure AD B2C アプリケーション(クライアント) ID>",
    authority: "https://login.microsoftonline.com/<ディレクトリ(テナント)ID>",
    redirectUri: "<リダイレクトURI>",
    postLogoutRedirectUri: "<ログアウト時のリダイレクトURI>"
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false
  }
};

今回の問題は、上記ソースコードで指定した redirectUri が Azure AD B2C アプリケーションのリダイレクト先URIとして登録されていないことが原因なので、早速登録をしていきたいと思います。

Azure Portal を開き、今回使用する Azure AD B2C リソースへアクセスします。ナビゲーションメニューから 管理 > アプリの登録 ページを開き、対象のアプリケーションを選択します。

アプリケーションページに遷移後、ナビゲーションメニューから 管理 > 認証 を選択します。

シングルページアプリケーション > リダイレクトURI > URI の追加ボタンを押して、Azure AD B2C アプリケーションにリダイレクト URI を追加します。(シングルページアプリケーション以外のプラットフォームの方は、プラットフォームを追加後に、同様の手順を行ってください。)

追加後、再度アプリケーションにサインインを行うと、無事にサインインすることができました。

参考文献