AAD B2C-(2) 體驗oAuth 保護WEB APP

本文參照微軟如下官方文檔,且均使用ASP.NET作爲示例代碼,主要是演示AAD B2C對WEB APP的保護流程,給大家一個直觀的感受,在後續的內容章節中,我們會介紹其他語言如何通過AAD B2C 進行保護。

1.使用 Azure Active Directory B2C 在 Web 應用程序中啓用身份驗證

https://docs.azure.cn/zh-cn/active-directory-b2c/tutorial-web-app-dotnet?tabs=applications

 

第一個案例:

主要介紹了一個WEB APP網站,使用ASP.NET開發,該網站使用AAD B2C進行認證授權,用戶在瀏覽器可以直接調用AAD B2C的用戶流(也就是使用AAD B2C提供的UI)完成用戶註冊/登錄/修改密碼的基本功能,同時,用戶登錄後,將TOKEN信息返回到這個WEB APP的頁面中。

視頻介紹:

您可以在B站觀看視頻:https://www.bilibili.com/video/BV1Cc411h7fM/

 

圖文介紹:

詳細步驟如下:

1. 下載示例代碼;

2. 創建AAD B2C 租戶;

3. 創建應用程序和密鑰;

4.設置用戶流;

5.修改web app 的配置文件;

6. 運行web app ,體驗用戶流;

 

示例代碼:https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi

在本例中,只使用 TaskWebAPP即可:

img-9cae3390-246d-4ce8-997f-6c5e51f7e1c9.png

 

在用戶流中創建如下三個用戶流:

注意,用戶流的名稱可以與本文不一致,但要求後續的配置文件中,需要匹配。

用戶流的詳細創建過程可參見本文視頻。

img-a6f97ccc-d363-4bb5-8b39-246eae4ae11f.png

在應用程序中創建一個新的應用程序:

其中 回覆URL必須爲:https://localhost:44316, 注意,本例中必須爲這個值,因爲WEB網站運行起來後,就是這個路徑。

img-ee1db3e7-30a3-46f9-a7d5-3e9847d36eb4.png

修改 配置文件中的參數:

本文視頻中詳細介紹了每個字段可以從Azure Portal上的哪些位置找到, 具體可見視頻08:35秒左右的詳細介紹。

img-fa4f699a-9538-4def-9443-90a5e99d7456.png

 

啓動應用程序,可以點擊Sign in/Sign up 調用AAD B2C的用戶流UI 完成用戶註冊,登錄:

img-59357781-47a3-4480-8a64-55248fdf188c.png

如下圖是修改用戶的基本資料的頁面,該頁面可定製樣式,且由AAD B2C提供:

img-c597fa80-5dea-4aa5-9ffa-01e55e4e4779.png

登錄成功後,可以在Claims頁面看到聲明信息:

img-2cfdd912-4598-4d10-a3e2-602424bd666c.png

 

 

至此,本節內容結束!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章