一,引言

  上次关于Azure AD B2C 讲到一些概念,有介绍到,Azure AD B2C 也是一种身份验证的解决方案,但是它运行客户使用其首选的社交,企业或者本地账户标识对应用程序和API进行单一登录访问。同样,Azure AD B2C 使用基于标准的身份验证协议,包括 OpenID Connect、OAuth 2.0 和 SAML。 它与大多数第三方的 idp 进行集成。今天,介绍如何使用 Azure Active Directory B2C (Azure AD B2C) 在 ASP.NET Web 应用程序中进行用户登录和注册。 应用程序可以使用 Azure AD B2C 通过开放式标准协议对社交帐户、企业帐户和 Azure Active Directory 帐户进行身份验证。

二,正文

2.1,创建B2C租户

  Azure Portal 左侧菜单 点击“创建资源”,同时搜索框中输入 “ Azure Active Directory B2C”。

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  点击 “创建” 按钮

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  选择 “创建新的 Azure Active AD B2C 租户”

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  输入 “组织名称”,"域名",“区域”,“资源组”等名称

  Organization name:CnBate B2C

  Initial domain name:cnbateb2c

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  继续选择 ”Azure Active Directory B2C “,选择 ”Link an existing Azure AD B2C to my Azure subscription“ 连接Azure AD B2C租户到当前自己的订阅

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  选择刚刚注册的 B2C 租户,

  Resource group      :B2C_RG

  点击 ”create“

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  将Azure AD B2C 添加到左侧菜单,在“所有服务” 搜索框中,搜索“Azure AD B2C” ,将鼠标悬停在搜索结果上,然后在工具提示中选择星形图标。 “Azure AD B2C”现在会显示在 Azure 门户中的“收藏夹”下。

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

2.2,注册应用程序

  在门户工具栏中选择“目录 + 订阅”图标,然后选择包含 Azure AD B2C 租户的目录,切换成功后,在Azure Portal的左侧菜单上选择 ”Azure AD B2C“,在 Azure AD B2C 页面选择 ” 应用程序(旧版)“,点击 ” 添加按钮“

-----------------敲黑板了----------------------

(这里先说一下,一定要选择”应用程序(旧版)“,文章的最后会说明为什么)

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  输入应用程序的名称。 例如,“WebApp”;包含Web应用/Web API和运行隐式流,选择 ”是“;回复URL,暂时先填写 ”https://jwt.ms“,因为此时我们还没有新建ASP.NET Core 的web应用,此地址是用来检查令牌的,可以用来测试。(截图里面填写的 ”http://localhost:9020“ 是因为我之前运行demo,我自己本地的一个Web应用的地址,所以大家暂时忽略这个)

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

2.3,创建用户流

  选择 ”策略“-》"用户流",点击 ”新建用户流“

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  在“建议”选项卡上选择“注册和登录”用户流。

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  输入该用户流的名称 ”B2C_1_signupsignin1“;标识提供者 勾选 ”邮件注册“;用户特性和声明 收集特性和返回声明勾选 ”姓“,”名“,”城市“,用户特性和声明勾选的选项意思是在注册期间要从用户收集并发送的声明和属性。 例如,“城市”和“姓”,”名“ 所对应的属性和声明。

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  选择运行流,选择前面已注册的名为 WebApp 的 Web 应用程序。

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  此时,我们可以看到一个标准模板的登录注册的页面,点击 ”Sign up now“,进行注册。

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  输入有效的电子邮件地址,单击“发送验证码”,输入收到的验证码,然后选择“验证代码”。

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  查看验证码,并且对验证码进行校验,并且输入相应的 ”姓“,”名“,”城市“,以及 ”登录密码“,点击 ”Create“

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

令牌将返回到 https://jwt.ms 并显示出来。Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

2.4,创建ASP.NET Core Web 应用

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

安装:Microsoft.AspNetCore.Authentication.AzureADB2C.UI

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  需要注册验证服务,这个地方默认的是 “AzureADB2C”,AddAzureADB2C方法绑定Azure AD B2C身份验证终结点,回调地址,租户所在的自定义域,客户端Id,以及登录/注册,重置密码,编辑信息的策略Id,其实也就是刚刚在B2C租户中新建工作流的名称。

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  注册Azure AD B2C 认证服务

services.AddAuthentication(AzureADB2CDefaults.AuthenticationScheme)
.AddAzureADB2C(options=> {
options.Instance = Appsettings.app("Azure_AD_B2C", "Instance");
options.ClientId = Appsettings.app("Azure_AD_B2C", "ClientId");
options.CallbackPath = Appsettings.app("Azure_AD_B2C", "CallbackPath");
options.Domain = Appsettings.app("Azure_AD_B2C", "Domain");
options.SignUpSignInPolicyId = Appsettings.app("Azure_AD_B2C", "SignUpSignInPolicyId");
options.ResetPasswordPolicyId = Appsettings.app("Azure_AD_B2C", "ResetPasswordPolicyId");
options.EditProfilePolicyId = Appsettings.app("Azure_AD_B2C", "EditProfilePolicyId");
});

  开启认证中间件服务

// open authentication middleware
app.UseAuthentication();

  appsettings.json的配置文件

{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*",
"Azure_AD_B2C": {
"Instance": "https://cnbateb2c.b2clogin.cn/tfp",
"ClientId": "39280bbe-bfda-46b8-91c4-f96376f363d9",
"CallbackPath": "/signin-oidc",
"Domain": "cnbateb2c.partner.onmschina.cn",
"SignUpSignInPolicyId": "B2C_1_signupsignin1",
"ResetPasswordPolicyId": "",
"EditProfilePolicyId": ""
}
}
"Instance": "https://<your-tenant-name>.b2clogin.com",
"ClientId": "<web-app-application-id>",
"Domain": "<your-b2c-domain>"
"CallbackPath": "/signin-oidc",
"SignUpSignInPolicyId": "B2C_1_test",
"ResetPasswordPolicyId": "",
"EditProfilePolicyId":
""

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

  HomeController=》about 方法加上 [Authorize] 

  修改项目启动端口

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

再回到 Azure Portal,为刚刚注册的Azure AD B2C租户里面的WebApp应用设置新的回调地址 “http://localhost:9020/signin-oidc

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

大功告成!

三,问题汇总

问题1,B2C 应用注册可以选择 “应用注册”,而不是“应用注册旧版”吗?

  不可以,Run user flow 中不能选择 “应用注册” 里面的应用,目前在中国区B2C使用应用注册(预览)支持以下2种类型的account type, 这2种账号类型是用于devops场景,因此,不应该使用user flow 来验证这个类型的用户。因此,Run user flow中不能选择应用注册(预览)里面的应用,这是by design的。

问题2,应用注册的终结点为什么当前注册的B2C租户的域不一致?例如下图,一个是 com结尾,一个是 “cn”结尾

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

答,这是azure 中国区的一个bug,我在4月份就反馈过类似的问题,之前他们是把终结点链接的域名后缀写成com了,但是5月份他们更新的时候,应该没有主要域名后面的当前租户的地址

Azure AD B2C(二)使用Azure AD B2C为ASP.NET Core 应用设置社交帐户(邮箱)登录/注册-LMLPHP

四,结尾

今天的文章大概介绍了如果在我们的Web项目中集成Azure AD B2C,通过使用第三方的社交账号 “邮箱”进行注册,登陆。下一篇继续介绍如何使用Azure AD B2C 保护的API资源。

代码稍等,我会整理一下,上传到github中

作者:Allen

版权:转载请在文章明显位置注明作者及出处。如发现错误,欢迎批评指正。

05-11 04:53