Msal 2.0 - 如何使用 Azure B2C 生成注册 link？

Question

在我的 angular 应用程序中，我使用 Azure AD B2C 进行身份验证，并使用 MSAL.js 2.0 库来处理它。我在主页上有一个“登录”按钮，这很简单。但我还需要一个“注册”按钮，这样用户将被直接重定向到 Azure B2C 'Sign Up' 页面。这可能吗？

Answer 1

通过创建个人登录和注册策略并进行以下更改，可以直接重定向到 Azure AD B2C 注册页面。单点登录注册策略将无法实现。

在应用程序中 config.ts 添加以下更改

export const b2cPolicies = {
    names: {
    SignIn: "b2c_1_SignIn",
    signup: "B2C_1_signup",
        resetPassword: "b2c_1_reset",
    },
    authorities: {
        SignIn: {
        authority: "https://fabrikamb2c.com/fabrikamb2c.onmicrosoft.com/B2C_1_SignIn"
      },
      signup: {
        authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_signuptest"
      },
        resetPassword: {
            authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_reset"
        } 
    }
}

创建注册按钮并添加注册点击功能

 signup() {
    this.authService.loginPopup(b2cPolicies.authorities.signup)
  }

Answer 2

我们可以使用单点登录注册策略和单点登录或注册策略。

此方法用于显示注册登录策略：

export const msalConfig = {
  auth: {
    clientId: "your app client id",
    authority:
    "https://XXX.b2clogin.com/XXX.onmicrosoft.com/<b2c policy name>",
    redirectUri: AZURE_REDIRECT_URI,
    postLogoutRedirectUri: "/",
    knownAuthorities: [
      "https://XXX.b2clogin.com/XXX.onmicrosoft.com/<b2c policy name>",
    redirectUri: AZURE_REDIRECT_URI",
    ],
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true,
  },
};

export const loginRequest = {
  scopes: ["https://XXX.onmicrosoft.com/api/XXX"],
};

//Click on login 
const handleLogin = () => {
    instance.loginPopup(loginRequest);
  };

此方法用于显示个人注册政策：

const handleSignup = () => {
    instance.loginPopup({
      authority:
        "https://XXX.b2clogin.com/tfp/XXX.onmicrosoft.com/<b2c policy name>",
      clientId: "your app client id",
      redirectUri: AZURE_REDIRECT_URI,
      postLogoutRedirectUri: "/",
      knownAuthorities: [
        "XXX.b2clogin.com/rentpundit1.onmicrosoft.com/<b2c policy name>",
      ],
      protocolMode: "OIDC",
    });

Msal 2.0 - 如何使用 Azure B2C 生成注册 link？

Msal 2.0 - how to generate Sign Up link with Azure B2C?

azure-active-directory

azure-ad-b2c

msal

msal.js