如何在React项目中配置Azure B2C多种登录方式

配置位置说明 #

Azure平台和React项目都需要配置，二者是配合关系：

• Azure端：作为身份服务的核心配置方，需要在Azure AD（Azure Active Directory）中注册应用，添加并启用多种身份提供者，同时配置回调URL、权限范围等核心参数。
• React端：通过Azure官方的前端SDK集成登录逻辑，修改项目配置文件定义支持的登录方式，并在UI层提供对应的登录入口。

常见登录方式的专业术语 #

• 企业内部账号登录：基于Azure AD的组织内部账号登录，适用于企业员工。
• 社交身份提供商登录（Social Identity Provider）：对接Google、Facebook、GitHub等第三方平台账号的登录方式。
• 联合身份验证（Federation）：将企业自有身份系统（如AD FS）与Azure AD做联合，用户可使用原有内部账号登录。
• Guest用户登录：允许外部组织的Azure AD用户访问应用的登录方式。
• 无密码登录（Passwordless Authentication）：通过短信验证码、FIDO2安全密钥等无需密码的方式完成登录。

核心配置步骤 #

Azure端操作 #

1. 登录Azure门户，进入Azure AD服务，完成应用注册（App Registration）。
2. 在注册应用的「Authentication」页面：
   • 添加Web平台并配置React项目的回调URL（如http://localhost:3000/auth-callback）；
   • 在「Identity providers」模块添加需要的第三方登录提供商（如Google），并完成对应平台的授权配置。
3. 在「API permissions」页面添加必要的权限（如User.Read），并完成管理员同意（若需）。

React端操作 #

1. 安装Azure官方依赖：npm install @azure/msal-react @azure/msal-browser
2. 创建配置文件（如msalConfig.js），填入Azure注册应用的clientId、authority（多租户/社交登录可设置为https://login.microsoftonline.com/common）等参数。
3. 在根组件中用MsalProvider包裹应用，注入MSAL实例。
4. 在登录页面通过useMsal钩子获取登录方法，针对不同身份提供者渲染对应按钮，比如调用loginPopup时指定loginRequest的额外参数，实现定向登录。

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