React SPA对接Azure ADB2C密码重置流报authenticationScheme错如何解决

根因 #

msal的loginRedirect、loginPopup等交互方法不支持直接传入字符串类型的authority地址作为参数，要求传入符合规范的请求配置对象，你直接传策略URL字符串会导致msal尝试在字符串上挂载配置字段失败，抛出该类型错误。

解决步骤 #

1. 构造密码重置流的请求配置对象，将忘记密码的authority地址放到配置对象的authority字段下，scopes等配置和你原有登录请求的配置保持一致即可。
2. 替换原有事件回调中的触发逻辑，示例代码如下：

if (event.eventType === EventType.LOGIN_FAILURE) {
  if (event.error && event.error.errorMessage.indexOf("AADB2C90118") > -1) {
    // 构造密码重置请求配置
    const resetRequest = {
      authority: b2cPolicies.authorities.forgotPassword,
      scopes: ["openid", "offline_access"] // 补充你业务需要的其他scopes即可
      // 其他你登录请求用到的配置如redirectUri也可以同步加在这里
    };

    if (event.interactionType === InteractionType.Redirect) {
      instance.loginRedirect(resetRequest);
    } else if (event.interactionType === InteractionType.Popup) {
      instance.loginPopup(resetRequest).catch(e => {});
    }
  }
}

修改后重新触发忘记密码流程，即可正常跳转到B2C的密码重置页面，不会再抛出该类型错误。

内容的提问来源于stack exchange，提问作者Vivere