如何让 'forgot password' 在 react-aad-msal 中与 Azure AD B2C 一起工作?

How do I make 'forgot password' working in react-aad-msal with Azure AD B2C?

我正在使用 react-aad-msal 和 Azure AD B2C。我有登录和注销工作。但是,当我单击 'Forgot your password?' 时,auth window 消失了,什么也没有发生。

看来我需要指定我的 'forgot password' 政策的名称,但我不知道放在哪里。

根据 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}
    />;
    }

我看到点击"Forgot password?"后,条件为真,出现了return。但是,密码重置的 window 没有显示,我被重定向回我的应用程序 URL。

有什么建议吗?

在 Azure B2C 中使用组合 sign-up/sign-in 策略时,用户必须自己处理忘记密码的情况。您可以找到更详细的评论 here.

使用本地帐户注册或登录的用户流程在体验的第一页上包含 "Forgot password?" link。单击此 link 不会自动触发密码重置用户流程。

相反,错误代码 AADB2C90118 返回给您的应用程序。您的应用程序需要通过 运行 重置密码的特定用户流程来处理此错误代码。要查看示例,请查看演示 link 用户流的 simple ASP.NET sample

我所做的是在 App.js:

中创建一条路线
          <Route
            path="/forgot"
            component={() => {
              window.location.href = forgotPasswordUrl;
              return null;
            }}
          />

然后,在 constructor

if (window.location.hash.indexOf('AADB2C90118') >= 0) {
  history.push('/forgot');
}

那行得通。

使用 msal-reactmsal-browser 我能够使用以下代码显示 Azure AD B2C 密码重置页面(假设您创建了一个名为 B2C_1_RESET 的密码重置用户流):

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

....

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

// MSAL Logging
//instance.setLogger(new Logger(loggerCallback));

const callbackId = instance.addEventCallback((message) => {
    if (message.eventType === EventType.LOGIN_FAILURE){
      if (message.error.errorMessage.includes("AADB2C90118")) { // The user has forgotten their password.
        const authority = "https://<your_domain>.b2clogin.com/crowdalert.onmicrosoft.com/B2C_1_RESET";
        instance.loginRedirect({authority: authority})
      }
    }
});

感谢 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

};