如何将来自 Azure AD B2C 的编辑配置文件与 React Web 应用程序中的 react-aad-msal 库集成

问题描述

我正在将 azure AD B2C 集成到我的 React 应用程序中，并且我正在使用库 react-add-msal（文档链接：https://www.npmjs.com/package/react-aad-msal）

按照他们的文档，我成功地非常简单地集成了注册和登录。 所以我有 authProvider.js 文件

import { MsalAuthProvider,LoginType } from 'react-aad-msal'
const tenant = 'mytenant'
const signInPolicy = 'mysigninpolicy'
const editPolicy = 'myeditpolicy'
const applicationID = 'myid'
const reactRedirectUri = 'http://localhost:3000'
const tenantSubdomain = tenant.split('.')[0]
const instance = `https://${tenantSubdomain}.b2clogin.com/tfp/`
const signInAuthority = `${instance}${tenant}/${signInPolicy}`
const editAuthority = `${instance}${tenant}/${editPolicy}`
// Msal Configurations
const signInConfig = {
    auth: {
        authority: signInAuthority,clientId: applicationID,redirectUri: reactRedirectUri,validateAuthority: false
    },cache: {
        cacheLocation: 'localStorage',storeAuthStateInCookie: true
    }
}

const editConfig = {
    auth: {
        authority: editAuthority,storeAuthStateInCookie: true
    }
}
// Authentication Parameters
const authenticationParameters = {
    scopes: [
        'https://graph.microsoft.com/Directory.Read.All',' https://rictatechb2c.onmicrosoft.com/api-1/user_impersonation'
    ]
}
// Options
const options = {
    loginType: LoginType.Redirect,tokenRefreshUri: window.location.origin + '/index.html'
}
export const signInAuthProvider = new MsalAuthProvider(
    signInConfig,authenticationParameters,options,)

在我的索引 js 中，我是这样包装的：

<AzureAD provider={authProvider} forceLogin={true}>
  {
    ({login,logout,authenticationState,error,accountInfo}) => {
      switch (authenticationState) {
        case AuthenticationState.Authenticated:
          return (
            <p>
              <span>Welcome,{accountInfo.account.name}!</span>
              <button onClick={logout}>logout</button>
            </p>
          );
        case AuthenticationState.Unauthenticated:
          return (
            <div>
              {error && <p><span>An error occured during authentication,please try again!</span></p>}
              <p>
                <span>hey stranger,you look new!</span>
                <button onClick={login}>Login</button>
              </p>
            </div>
          );
        case AuthenticationState.InProgress:
          return (<p>Authenticating...</p>);
      }
    }
  }
</AzureAD>

是否有人在此库中编辑个人资料并忘记密码？

我找不到任何地方如何在 React.js 中将编辑配置文件和忘记密码与此库集成，我将不胜感激。

我分享了我的代码，所以您可以看到我尝试放置编辑策略而不是登录策略，但我不知道如何在按钮上而不是自动调用它。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）