教程:使用 Azure Active Directory B2C 在 Web 应用程序中启用身份验证Tutorial: Enable authentication in a web application using Azure Active Directory B2C

本教程介绍如何使用 Azure Active Directory (Azure AD) B2C 在 ASP.NET Web 应用程序中进行用户登录和注册。This tutorial shows you how to use Azure Active Directory (Azure AD) B2C to sign in and sign up users in an ASP.NET web application. 应用程序可以使用 Azure AD B2C 通过开放式标准协议对社交帐户、企业帐户和 Azure Active Directory 帐户进行身份验证。Azure AD B2C enables your applications to authenticate to social accounts, enterprise accounts, and Azure Active Directory accounts using open standard protocols.

本教程介绍如何执行下列操作:In this tutorial, you learn how to:

  • 在 Azure AD B2C 中更新此应用程序Update the application in Azure AD B2C
  • 将示例配置为使用此应用程序Configure the sample to use the application
  • 使用用户流进行登录Sign up using the user flow

如果没有 Azure 订阅,可在开始前创建一个试用帐户If you don't have an Azure subscription, create a trial account before you begin.

先决条件Prerequisites

更新应用程序Update the application

在按照先决条件完成的教程中,已在 Azure AD B2C 中添加了 Web 应用程序。In the tutorial that you completed as part of the prerequisites, you added a web application in Azure AD B2C. 若要与教程中的示例通信,需添加一个指向 Azure AD B2C 中的应用程序的重定向 URI。To enable communication with the sample in this tutorial, you need to add a redirect URI to the application in Azure AD B2C.

  1. 登录到 Azure 门户Sign in to the Azure portal.
  2. 请确保使用包含 Azure AD B2C 租户的目录,方法是单击顶部菜单中的“目录和订阅筛选器”,然后选择包含租户的目录 。Make sure you're using the directory that contains your Azure AD B2C tenant by clicking the Directory and subscription filter in the top menu and choosing the directory that contains your tenant.
  3. 选择 Azure 门户左上角的“所有服务”,然后搜索并选择“Azure AD B2C” 。Choose All services in the top-left corner of the Azure portal, and then search for and select Azure AD B2C.
  4. 选择“应用程序”,然后选择“webapp1”应用程序。 Select Applications, and then select the webapp1 application.
  5. 在“回复 URL”下添加 https://localhost:44316Under Reply URL, add https://localhost:44316.
  6. 选择“其他安全性验证” 。Select Save.
  7. 在属性页上,记录你在配置 Web 应用程序时要使用的应用程序 ID。On the properties page, record the application ID that you'll use when you configure the web application.
  8. 依次选择“密钥”、“生成密钥”、“保存”。 Select Keys, select Generate key, and select Save. 记录你在配置 Web 应用程序时要使用的密钥。Record the key that you'll use when you configure the web application.

配置示例Configure the sample

在本教程中,你将配置一个可从 GitHub 下载的示例。In this tutorial, you configure a sample that you can download from GitHub. 该示例使用 ASP.NET 提供简单的待办事项列表。The sample uses ASP.NET to provide a simple to-do list. 该示例使用 Microsoft OWIN 中间件组件The sample uses Microsoft OWIN middleware components. 从 GitHub 下载 zip 文件或克隆该示例。Download a zip file or clone the sample from GitHub. 确保将示例文件提取到文件夹中时,路径的总字符长度不到 260。Make sure that you extract the sample file in a folder where the total character length of the path is less than 260.

git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi.git

示例解决方案中包含以下两个项目:The following two projects are in the sample solution:

  • TaskWebApp - 创建和编辑任务列表。TaskWebApp - Create and edit a task list. 该示例使用注册或登录用户流来注册或登录用户。The sample uses the sign-up or sign-in user flow to sign up or sign in users.
  • TaskService - 支持创建、读取、更新和删除任务列表功能。TaskService - Supports the create, read, update, and delete task list functionality. 该 API 受 Azure AD B2C 的保护,由 TaskWebApp 调用。The API is protected by Azure AD B2C and called by TaskWebApp.

将示例更改为使用已在租户中注册的应用程序,包括前面记下的应用程序 ID 和密钥。You change the sample to use the application that's registered in your tenant, which includes the application ID and the key that you previously recorded. 此外,配置所创建的用户流。You also configure the user flows that you created. 该示例在 Web.config 文件中将配置值作为设置来定义。The sample defines the configuration values as settings in the Web.config file. 若要更改设置,请执行以下操作:To change the settings:

  1. 在 Visual Studio 中打开 B2C-WebAPI-DotNet 解决方案。Open the B2C-WebAPI-DotNet solution in Visual Studio.
  2. TaskWebApp 项目中打开 Web.config 文件。In the TaskWebApp project, open the Web.config file. ida:Tenant 的值替换为所创建租户的名称。Replace the value for ida:Tenant with the name of the tenant that you created. ida:ClientId 的值替换为所记录的应用程序 ID。Replace the value for ida:ClientId with the application ID that you recorded. ida:ClientSecret 的值替换为所记录的密钥。Replace the value of ida:ClientSecret with the key that you recorded.
  3. Web.config 文件中,将 ida:SignUpSignInPolicyId 的值替换为 b2c_1_signupsignin1In the Web.config file, replace the value for ida:SignUpSignInPolicyId with b2c_1_signupsignin1. ida:EditProfilePolicyId 的值替换为 b2c_1_profileediting1Replace the value for ida:EditProfilePolicyId with b2c_1_profileediting1. ida:ResetPasswordPolicyId 的值替换为 b2c_1_passwordreset1Replace the value for ida:ResetPasswordPolicyId with b2c_1_passwordreset1.

运行示例Run the sample

  1. 在解决方案资源管理器中,右键单击 TaskWebApp 项目,然后单击“设为启动项目”。 In Solution Explorer, right-click the TaskWebApp project, and then click Set as StartUp Project.
  2. F5Press F5. 默认浏览器将启动到本地网站地址 https://localhost:44316/The default browser launches to the local web site address https://localhost:44316/.

使用电子邮件地址注册Sign up using an email address

  1. 单击“注册/登录” ,注册为应用程序用户。Click Sign up / Sign in to sign up as a user of the application. 将使用 b2c_1_signupsignin1 用户流。The b2c_1_signupsignin1 user flow is used.

  2. Azure AD B2C 会显示带注册链接的登录页面。Azure AD B2C presents a sign-in page with a sign-up link. 由于你还没有帐户,因此请选择“立即注册”。 Since you don't have an account yet, select Sign up now. 注册工作流会显示一个页面,用于收集用户的标识并通过电子邮件地址对其进行验证。The sign-up workflow presents a page to collect and verify the user's identity using an email address. 注册工作流还收集用户的密码和请求的属性(在用户流中定义)。The sign-up workflow also collects the user's password and the requested attributes defined in the user flow.

  3. 请使用有效的电子邮件地址,并使用验证码进行验证。Use a valid email address and validate using the verification code. 设置密码。Set a password. 输入请求的属性的值。Enter values for the requested attributes.

    注册工作流

  4. 单击“创建”, 在 Azure AD B2C 租户中创建本地帐户。Click Create to create a local account in the Azure AD B2C tenant.

现在,用户可以使用其电子邮件地址登录并使用 Web 应用程序了。Now the user can use their email address to sign in and use the web application.

后续步骤Next steps

在本教程中,你已学习了如何执行以下操作:In this tutorial, you learned how to:

  • 在 Azure AD B2C 中更新此应用程序Update the application in Azure AD B2C
  • 将示例配置为使用此应用程序Configure the sample to use the application
  • 使用用户流进行登录Sign up using the user flow