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 を使用して、以下のように設定しています。
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 を追加します。(シングルページアプリケーション以外のプラットフォームの方は、プラットフォームを追加後に、同様の手順を行ってください。)
追加後、再度アプリケーションにサインインを行うと、無事にサインインすることができました。