你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn

快速入门:使用 Azure Active Directory B2C 为单页应用设置登录

重要

自 2025 年 5 月 1 日起,Azure AD B2C 将不再可供新客户购买。 在我们的常见问题解答中了解详细信息

Azure Active Directory B2C(Azure AD B2C)提供云标识管理,使应用程序、业务和客户受到保护。 Azure AD B2C 使应用程序能够使用开放标准协议对社交帐户和企业帐户进行身份验证。

在本快速入门中,你将使用单页应用程序通过社交标识提供者登录,并调用受 Azure AD B2C 保护的 Web API。

先决条件

运行应用程序

  1. 通过从 Node.js 命令提示符运行以下命令来启动服务器:

    npm install
    npm update
    npm start
    

    通过 server.js 启动的服务器会显示其侦听的端口:

    Listening on port 6420...
    
  2. 请访问应用程序的 URL。 例如,http://localhost:6420

浏览器窗口中显示的单页应用程序示例应用程序的屏幕截图。

使用您的账户登录

  1. 选择 Sign In (登录) 以开始用户旅程。

  2. Azure AD B2C 为示例 Web 应用程序提供了一个名为“Fabrikam”的虚构公司的登录页。 若要使用社交标识提供者进行注册,请选择要使用的标识提供者按钮。

    显示身份提供商按钮的“登录”或“注册”页面的屏幕截图

    使用社交帐户凭据进行身份验证(登录),并授权应用程序从社交帐户读取信息。 通过授予访问权限,应用程序可以从社交帐户(如姓名和城市)检索个人资料信息。

  3. 完成标识提供者的登录进程。

访问受保护的 API 资源

选择调用 API,将使 Web API 返回您的显示名称作为 JSON 对象。

浏览器窗口的示例应用程序中显示的 Web API 响应的屏幕截图。

示例单页应用程序在对受保护 Web API 资源的请求中包含访问令牌。

后续步骤