iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
0
Cloud

Xamarin.Forms, ASP.NET Core WEB API搭配AZURE的網站服務與資料庫服務整合應用實例系列 第 15

Day15- Azure Active Directory B2C Part3 ASP.NET Core測試

  • 分享至 

  • xImage
  •  

利用Day12建立好的ASP.NET CORE環境來測試, 首先新增一個View的資料夾
http://ithelp.ithome.com.tw/upload/images/20161222/20103333dpsHtCjtPJ.png

在Views目錄下, 新增一個MVC View Start Page, 檔名採預設如下所示
http://ithelp.ithome.com.tw/upload/images/20161222/20103333QUuO1m5Riz.png

一樣在Views目錄下, 新增一個MVC View Import Page, 檔名採預設如下所示
http://ithelp.ithome.com.tw/upload/images/20161222/20103333VhJ4k4sWDE.png

在_ViewImports.cshtml加入底下程式碼,
...
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
...
http://ithelp.ithome.com.tw/upload/images/20161222/20103333FMss46NTVj.png

接下來在View的資料夾下載新增一個Shared資料夾
http://ithelp.ithome.com.tw/upload/images/20161222/201033332QUTFj6gz3.png

新增一個_Layout.cshtml檔案
http://ithelp.ithome.com.tw/upload/images/20161222/20103333BdtkUwZ3pB.png

在_Layout.cshtml加入底下程式碼, 而_Layout.cshtml可以視作樣板, 每一個View都會套用這個設定, 類似WEB FORM的MaterPage, 而@RenderBody(), 就是可以拿來客製的內容
http://ithelp.ithome.com.tw/upload/images/20161222/20103333RkXvUGZl3W.png
http://ithelp.ithome.com.tw/upload/images/20161222/20103333ebj4pi3CFz.png

View設定完成後, 接著設定Controller, 在Controllers的目錄下, 新增一個AppController.cs
http://ithelp.ithome.com.tw/upload/images/20161222/20103333Hoo7ardWP9.png

打開AppController.cs如下, 在預設Index()會回傳一個View到前端, 接下就是要建Index的View
http://ithelp.ithome.com.tw/upload/images/20161222/20103333rCEZrZYvEX.png

回到View的資料夾, 再新增一個App的資料夾, 並新增Index.cshtml如下圖所示
http://ithelp.ithome.com.tw/upload/images/20161222/20103333JsMOxNoELY.png

打開Index.cshtml
http://ithelp.ithome.com.tw/upload/images/20161222/20103333m6eP7clOcB.png

再來就是試跑看看Index Page是否能正常執行? 到根目錄下找到project.json, 並打開來, 加入底下紅框的參考
...
"Microsoft.AspNetCore.Mvc.TagHelpers": "1.0.1",
"Microsoft.AspNetCore.StaticFiles": "1.0.1",
"Microsoft.AspNetCore.Authentication.Cookies": "1.0.1",
"Microsoft.AspNetCore.Authentication.OpenIdConnect": "1.0.1"
...
http://ithelp.ithome.com.tw/upload/images/20161222/201033332kNyzMA5Fg.png

到根目錄下找到Startup.cs, 找到Configure函式修改如下
http://ithelp.ithome.com.tw/upload/images/20161222/20103333l5EZ9LZsM8.png

接著到專案屬性的Debug頁籤, 設定起始位置, 如下圖所示
http://ithelp.ithome.com.tw/upload/images/20161222/20103333qxAxx2KAIG.png

測試成功如下圖,
http://ithelp.ithome.com.tw/upload/images/20161222/20103333SXPQhK54dH.png

接著到App目錄下新增一個About.cshtml的MVC View Page, 用來測試頁面授權
http://ithelp.ithome.com.tw/upload/images/20161222/20103333XgqNv1rGY5.png

打開About.cshtml, 輸入底下程式碼
http://ithelp.ithome.com.tw/upload/images/20161222/20103333TfCKl7IBgo.png

再來回到Startup.cs, 設定Azure Active Directory B2C 相關配置, 先加入底下Namespace
...
using Microsoft.IdentityModel.Protocols.OpenIdConnect;
using Microsoft.IdentityModel.Tokens;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Http;
...
http://ithelp.ithome.com.tw/upload/images/20161222/20103333PJdJlKtZ3J.png

接著設定靜態字串的連接參數
http://ithelp.ithome.com.tw/upload/images/20161222/20103333qH0NraDltk.png

到ConfigureServices注入認證服務, 如下所示
...
services.AddAuthentication(sharedOptions => sharedOptions.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme);
...
http://ithelp.ithome.com.tw/upload/images/20161222/20103333UlXyWfRg4F.png

新增一個CreateOptionsFromPolicy函式如下, 等等在Configure函式裡叫用
http://ithelp.ithome.com.tw/upload/images/20161222/20103333JHNEW7gkil.png

到Configure函式新增底下程式碼
...
app.UseCookieAuthentication(new CookieAuthenticationOptions());
app.UseOpenIdConnectAuthentication(CreateOptionsFromPolicy(SignUpPolicyId));
app.UseOpenIdConnectAuthentication(CreateOptionsFromPolicy(SignInPolicyId));
...
http://ithelp.ithome.com.tw/upload/images/20161222/20103333p2faFOOhSK.png

最後到AppController.cs, 新增底下程式碼, 完成之後編譯一下專案看有無任何錯誤
http://ithelp.ithome.com.tw/upload/images/20161222/20103333JGNbNIKrhZ.png
http://ithelp.ithome.com.tw/upload/images/20161222/20103333bzKsJVslvx.png

按下Debug, 點選About, 測試是否會因設定了[Authorize]的宣告進入驗證畫面
http://ithelp.ithome.com.tw/upload/images/20161222/20103333eqv1PRKDVp.png

進入驗證畫面如下
http://ithelp.ithome.com.tw/upload/images/20161222/20103333BzOn2YwoIb.png

一旦驗證便會導回About頁面如下, 此時就可以看到名字有被抓到, 然後Log Out也出現, 到這邊應該算是大功告成
http://ithelp.ithome.com.tw/upload/images/20161222/20103333DhqyEYqX2o.png

等等好像漏測了甚麼?/images/emoticon/emoticon19.gif 應該拿自己建的Azure Active Directory B2C來試一下,
回到Startup.cs將Tenant與clientId, 換成自己的版本, 立馬測試一下
http://ithelp.ithome.com.tw/upload/images/20161222/20103333LETCilYSXF.png

結果按下About, Sign in, Sign out都是畫面閃一下, 有連到驗證網址如下, 但是沒有驗證畫面
http://ithelp.ithome.com.tw/upload/images/20161222/20103333BtQy5uI3bj.png

當下覺得被玩了/images/emoticon/emoticon04.gif, 又要打怪, 這隻怪花了我足足三天, 然後是因為自己英文太爛沒注意到, 英文真的很重要, 很重要, 很重要對程式猿或是攻城獅來說/images/emoticon/emoticon02.gif, 解法在底下網站
https://azure.microsoft.com/zh-tw/resources/samples/active-directory-dotnet-webapp-openidconnect-aspnetcore-b2c/
最關鍵的一段話, 真是有看沒有懂系列之一
http://ithelp.ithome.com.tw/upload/images/20161222/20103333S1JL38zlnN.png

後來靜下心想, 不會是在Azure Portal做設定吧, 回到Application設定如下
http://ithelp.ithome.com.tw/upload/images/20161222/201033330kF0m7sk8v.png

之後再跑一次站台, 成功畫面如下
http://ithelp.ithome.com.tw/upload/images/20161222/20103333YPN8YI6l7c.png

本文與Source Code主要參考
https://docs.microsoft.com/en-us/aspnet/core/tutorials/
https://github.com/Azure-Samples/active-directory-dotnet-webapp-openidconnect-aspnetcore-b2c

後記: 透過這個實測, 大概對ASP.NET Core開發方式有點概念了, 跟WEB FORM真的是大相逕庭, 而且沒想到最後還被ASP.NET Core出了個暗招/images/emoticon/emoticon46.gif


上一篇
Day14- Azure Active Directory B2C Part2 配置測試
下一篇
Day16 - Azure Blob storage Part1 本地端上傳檔案測試
系列文
Xamarin.Forms, ASP.NET Core WEB API搭配AZURE的網站服務與資料庫服務整合應用實例32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言