如何基于Azure AD B2C实现自定义登录注册表单的用户认证方案？

完全自定义登录注册表单、前端直接通过API/SDK完成认证注册的需求是可实现的，以下是具体可行路径： #

核心实现方案 #

1. 资源所有者密码凭证（ROPC）流（入门级方案，适配全端场景） #

Azure AD B2C 原生支持ROPC OAuth2流，无需跳转弹窗或webview，完全由你控制前端表单逻辑：

• 适配范围：同时支持React.js和React Native端，所有用户操作都在你自研的原生/前端组件内完成，无跳转体验。
• 调用方式：
  • React.js端可使用@azure/msal-react SDK，直接调用acquireTokenByUsernamePassword方法传入用户输入的账号密码，即可直接获取id_token、access_token和refresh_token。
  • React Native端可使用@azure/msal-react-native SDK，对应方法逻辑完全一致，不需要嵌套任何webview。
• 局限：仅支持账号密码登录/注册，不支持MFA、第三方社交登录等场景，适合仅需账号体系的简单业务。

2. 自定义策略（Identity Experience Framework, IEF）+ 直接API调用（进阶方案，全场景支持） #

如果需要支持MFA、社交登录、自定义验证逻辑等复杂需求，可使用自定义策略方案：

• 你可以完全自研前端表单，将用户提交的注册/登录参数传给自定义策略暴露的API端点，全程无页面跳转。
• 可自定义注册完成后的返回字段，所有你需要的用户属性都可以嵌入返回的token中，前端可直接解析获取，不存在拿不到回调返回值的问题。

API connectors 用途说明 #

你提到的API connectors可完美补充上述方案的业务扩展需求：
你可以在用户流或自定义策略的「注册前」「注册后」节点配置你自己的业务API端点，B2C会在对应节点自动将用户的输入信息发送到你的接口：

• 注册前可实现自定义校验逻辑，比如校验手机号是否已在你的业务系统存在，不符合要求直接返回错误给前端。
• 注册后可实现用户信息同步到自有业务库、自定义属性追加等逻辑，追加的属性会自动写入返回的token中。

生产环境注意事项 #

• 若使用ROPC流，必须全程走HTTPS协议，禁止在前端本地存储用户明文密码。
• 若需要支持第三方社交登录，ROPC流无法覆盖，可自己实现第三方登录逻辑拿到身份凭证后，再调用B2C API创建/关联本地用户。

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