如何使用 Azure AD B2C 在 react-aad-msal 中使用“忘記密碼”？

Question

我在 Azure AD B2C 中使用react-aad-msal 。 我有登錄和注銷工作。 但是，當我單擊“忘記密碼？”時，身份驗證窗口消失並且沒有任何反應。

似乎我需要指定我的“忘記密碼”策略的名稱，但我不知道把它放在哪里。

根據 Tony 的回答，將此代碼添加到我的應用程序的渲染中：

if (window.location.href.indexOf("error_description=AADB2C90118") >= 0)
    {
      return <AzureAD
      provider={
        new MsalAuthProviderFactory({
          authority: 'https://login.microsoftonline.com/tfp/x5aaas.onmicrosoft.com/B2C_1_PwdReset', 
          clientID: 'a1568977-3095-4bf6-a6d6-c10c87658488',
          scopes: ['https://x5aaas.onmicrosoft.com/ui/use'],
          type: LoginType.Redirect,
          postLogoutRedirectUri: window.origin,
        })
      }
      unauthenticatedFunction={this.unauthenticatedFunction}
      userInfoCallback={this.userJustLoggedIn}
      authenticatedFunction={this.authenticatedFunction}
    />;
    }

我看到在單擊“忘記密碼？”后，條件為真，返回發生。 但是，密碼重置窗口沒有出現，我被重定向回我的應用程序 URL。

有什么建議？

Answer 1

我在Azure AD B2C中使用react-aad-msal 。 我有登錄和注銷的功能。 但是，當我單擊“忘記密碼？”時，身份驗證窗口消失並且什么也沒有發生。

似乎我需要指定“忘記密碼”策略的名稱，但我不知道將其放在何處。

根據Tony的回答，將此代碼添加到我的應用的渲染器中：

if (window.location.href.indexOf("error_description=AADB2C90118") >= 0)
    {
      return <AzureAD
      provider={
        new MsalAuthProviderFactory({
          authority: 'https://login.microsoftonline.com/tfp/x5aaas.onmicrosoft.com/B2C_1_PwdReset', 
          clientID: 'a1568977-3095-4bf6-a6d6-c10c87658488',
          scopes: ['https://x5aaas.onmicrosoft.com/ui/use'],
          type: LoginType.Redirect,
          postLogoutRedirectUri: window.origin,
        })
      }
      unauthenticatedFunction={this.unauthenticatedFunction}
      userInfoCallback={this.userJustLoggedIn}
      authenticatedFunction={this.authenticatedFunction}
    />;
    }

我看到單擊“忘記密碼？”后，情況才成立，然后返回。 但是，密碼重置窗口沒有顯示，我被重定向回我的應用程序URL。

有什么建議么？

Answer 2

我在Azure AD B2C中使用react-aad-msal 。 我有登錄和注銷的功能。 但是，當我單擊“忘記密碼？”時，身份驗證窗口消失並且什么也沒有發生。

似乎我需要指定“忘記密碼”策略的名稱，但我不知道將其放在何處。

根據Tony的回答，將此代碼添加到我的應用的渲染器中：

if (window.location.href.indexOf("error_description=AADB2C90118") >= 0)
    {
      return <AzureAD
      provider={
        new MsalAuthProviderFactory({
          authority: 'https://login.microsoftonline.com/tfp/x5aaas.onmicrosoft.com/B2C_1_PwdReset', 
          clientID: 'a1568977-3095-4bf6-a6d6-c10c87658488',
          scopes: ['https://x5aaas.onmicrosoft.com/ui/use'],
          type: LoginType.Redirect,
          postLogoutRedirectUri: window.origin,
        })
      }
      unauthenticatedFunction={this.unauthenticatedFunction}
      userInfoCallback={this.userJustLoggedIn}
      authenticatedFunction={this.authenticatedFunction}
    />;
    }

我看到單擊“忘記密碼？”后，情況才成立，然后返回。 但是，密碼重置窗口沒有顯示，我被重定向回我的應用程序URL。

有什么建議么？

Answer 3

我在Azure AD B2C中使用react-aad-msal 。 我有登錄和注銷的功能。 但是，當我單擊“忘記密碼？”時，身份驗證窗口消失並且什么也沒有發生。

似乎我需要指定“忘記密碼”策略的名稱，但我不知道將其放在何處。

根據Tony的回答，將此代碼添加到我的應用的渲染器中：

if (window.location.href.indexOf("error_description=AADB2C90118") >= 0)
    {
      return <AzureAD
      provider={
        new MsalAuthProviderFactory({
          authority: 'https://login.microsoftonline.com/tfp/x5aaas.onmicrosoft.com/B2C_1_PwdReset', 
          clientID: 'a1568977-3095-4bf6-a6d6-c10c87658488',
          scopes: ['https://x5aaas.onmicrosoft.com/ui/use'],
          type: LoginType.Redirect,
          postLogoutRedirectUri: window.origin,
        })
      }
      unauthenticatedFunction={this.unauthenticatedFunction}
      userInfoCallback={this.userJustLoggedIn}
      authenticatedFunction={this.authenticatedFunction}
    />;
    }

我看到單擊“忘記密碼？”后，情況才成立，然后返回。 但是，密碼重置窗口沒有顯示，我被重定向回我的應用程序URL。

有什么建議么？

Answer 4

感謝 Ian 的提示。

您應該添加一個額外條件，以防用戶取消更改重置其帳戶憑據的嘗試。 這樣他們就被重定向回登錄而不是卡在你的應用程序上。

import { useMsal } from "@azure/msal-react";

export default MyComponent = () => {

// other code

const { instance, accounts, inProgress } = useMsal();

instance.addEventCallback((message: any) => {
    if (message.eventType === EventType.LOGIN_FAILURE && message.error.errorMessage.includes("AADB2C90118")) {
      // The user has forgotten their password.
      instance.loginRedirect(passwordResetRequest);
    } else if (message.eventType === EventType.HANDLE_REDIRECT_END && inProgress === InteractionStatus.None) {
      instance.loginRedirect(loginRequest);
    }
  });

// rest of component

};