Azure AD B2C（二）使用Azure AD B2C為ASP.NET Core 應用設置社交帳戶（郵箱）登錄/註冊

20200624更新

sorry，上周剛換了電腦，開發工具還沒裝好，導致代碼遲遲沒有上傳！

————-我是分割線————

github：https://github.com/yunqian44/Azure.Active.DirectoryB2C.WebApp.git

一，引言

　　上次關於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 Active AD B2C 租戶”

 　　輸入 “組織名稱”,”域名”，“區域”，“資源組”等名稱

　　Organization name：CnBate B2C

　　Initial domain name：cnbateb2c

 

　　繼續選擇 ”Azure Active Directory B2C “，選擇 ”Link an existing Azure AD B2C to my Azure subscription“ 連接Azure AD B2C租戶到當前自己的訂閱 

 　　選擇剛剛註冊的 B2C 租戶，

　　Resource group      ：CnBate_RG      

　　點擊 ”create“

 　　將Azure AD B2C 添加到左側菜單，在“所有服務” 搜索框中，搜索“Azure AD B2C” ，將鼠標懸停在搜索結果上，然後在工具提示中選擇星形圖標。 “Azure AD B2C”現在會显示在 Azure 門戶中的“收藏夾”下。

 

 

 2.2，註冊應用程序

　　在門戶工具欄中選擇“目錄 + 訂閱”圖標，然後選擇包含 Azure AD B2C 租戶的目錄，切換成功后，在Azure Portal的左側菜單上選擇 ”Azure AD B2C“，在 Azure AD B2C 頁面選擇 ” 應用程序（舊版）“,點擊 ” 添加按鈕“

—————–敲黑板了———————-

（這裏先說一下，一定要選擇”應用程序（舊版）“，文章的最後會說明為什麼）

　　輸入應用程序的名稱。 例如，“WebApp”；包含Web應用/Web API和運行隱式流，選擇 ”是“；回復URL，暫時先填寫 ”https://jwt.ms“，因為此時我們還沒有新建ASP.NET Core 的web應用，此地址是用來檢查令牌的，可以用來測試。（截圖裡面填寫的 ”http://localhost:9020/sign-oidc“ 是因為我之前運行demo，我自己本地的一個Web應用的地址，所以大家暫時忽略這個）

 

 2.3，創建用戶流 

　　選擇 ”策略“-》”用戶流”，點擊 ”新建用戶流“

 

 

　　在“建議”選項卡上選擇“註冊和登錄”用戶流。

 

　　輸入該用戶流的名稱 ”B2C_1_signupsignin1“；標識提供者 勾選 ”郵件註冊“；用戶特性和聲明 收集特性和返回聲明勾選 ”姓“，”名“，”城市“，用戶特性和聲明勾選的選項意思是在註冊期間要從用戶收集併發送的聲明和屬性。 例如，“城市”和“姓”，”名“ 所對應的屬性和聲明。

 

 　　選擇運行流，選擇前面已註冊的名為 WebApp 的 Web 應用程序。

 　　此時，我們可以看到一個標準模板的登錄註冊的頁面，點擊 ”Sign up now“，進行註冊。

 

 　　輸入有效的电子郵件地址，單擊“發送驗證碼”，輸入收到的驗證碼，然後選擇“驗證代碼”。

 　　查看驗證碼，並且對驗證碼進行校驗，並且輸入相應的 ”姓“，”名“，”城市“，以及 ”登錄密碼“，點擊 ”Create“

 

 

 令牌將返回到 https://jwt.ms 並显示出來。

 2.4，創建ASP.NET Core Web 應用

 安裝：Microsoft.AspNetCore.Authentication.AzureADB2C.UI

　　需要註冊驗證服務，這個地方默認的是 “AzureADB2C”，AddAzureADB2C方法綁定Azure AD B2C身份驗證終結點，回調地址，租戶所在的自定義域，客戶端Id，以及登錄/註冊，重置密碼，編輯信息的策略Id，其實也就是剛剛在B2C租戶中新建工作流的名稱。

 　　註冊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.cn/tfp",
"ClientId": "<web-app-application-id>",
"Domain": "<your-b2c-domain>"
"CallbackPath": "/signin-oidc",
"SignUpSignInPolicyId": "B2C_1_test",
"ResetPasswordPolicyId": "",
"EditProfilePolicyId": ""

 

 

 　　HomeController=》about 方法加上 [Authorize] 

　　修改項目啟動端口

 再回到 Azure Portal，為剛剛註冊的Azure AD B2C租戶裏面的WebApp應用設置新的回調地址 “http://localhost:9020/signin-oidc”

 

 

 

 

 

 

 

 

 大功告成！

三，問題匯總

問題1，B2C 應用註冊可以選擇 “應用註冊”，而不是“應用註冊舊版”嗎？

　　不可以，Run user flow 中不能選擇 “應用註冊” 裏面的應用，目前在中國區B2C使用應用註冊(預覽)支持以下2種類型的account type, 這2種賬號類型是用於devops場景，因此，不應該使用user flow 來驗證這個類型的用戶。因此，Run user flow中不能選擇應用註冊(預覽)裏面的應用，這是by design的。

問題2，應用註冊的終結點為什麼當前註冊的B2C租戶的域不一致？例如下圖，一個是 com結尾，一個是 “cn”結尾

 答，這是azure 中國區的一個bug，我在4月份就反饋過類似的問題，之前他們是把終結點鏈接的域名後綴寫成com了，但是5月份他們更新的時候，應該沒有注意域名後面的當前租戶的鏈接地址

四，結尾

 今天的文章大概介紹了如果在我們的Web項目中集成Azure AD B2C，通過使用第三方的社交賬號 “郵箱”進行註冊，登陸。下一篇繼續介紹如何使用Azure AD B2C 保護的API資源。

代碼稍等，我會整理一下，上傳到github中

github:https://github.com/yunqian44/Azure.Active.DirectoryB2C.WebApp.git

作者：Allen 

版權：轉載請在文章明顯位置註明作者及出處。如發現錯誤，歡迎批評指正。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※帶您來了解什麼是 USB CONNECTOR  ?

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!

※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※教你寫出一流的銷售文案?