代码之家 › 专栏 › 技术社区 › polina-c

如何使“忘记密码”在react aad msal中工作?

adal.js adal azure-active-directory azure reactjs

polina-c · 技术社区 · 7 年前

我正在使用 react-aad-msal 使用Azure AD B2C。我已经登录和注销工作。但是,当我单击“忘记密码”时,auth窗口消失,什么也没有发生。

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

有什么建议吗?

0 回复 | 直到 7 年前

ismatim 7 年前

我所做的是在我的应用程序中创建一条路线。js:

          <Route
            path="/forgot"
            component={() => {
              window.location.href = forgotPasswordUrl;
              return null;
            }}
          />

然后,在 constructor

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

这是可行的。

polina-c 7 年前

here .

使用本地帐户注册或登录用户流包括“忘记密码?”链接到体验的第一页。单击此链接不会自动触发密码重置用户流。

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

Ian Mercer 5 年前

使用 msal-react 和 msal-browser 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})
      }
    }
});

grumpyTofu 4 年前

您应该添加一个额外的条件,以防用户取消更改或重置其帐户凭据的尝试。通过这种方式,他们被重定向回登录,而不是卡在你的应用程序上。

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

};