有時寫External Application, 為簡化註冊程序, 有時會引入oAuth 將認證及登入等交給第三方處理 (如Facebook, Google / Linkedin 等). 而在ASP.net MVC 中, 亦已有相對應方法如下:
- 建立一個ASP.net Web Application, 命名為PoC.OAuth.
- 於Template 中選擇MVC, 而Authorization Method 則選擇Individual User Account.
- 於Project 中right click, 並選擇Manager NuGet Package.
- 確保oAuth 為最新以能夠正常使用, 選擇Microsoft.Owin, 然後按Update.
- 大部份social media 都須要用使用SSL認證. 所以在project 中enable.
於Project Property 中選取SSL Enable, 並選擇 True. 並記下SSL URL 以作之後的設定.
- 開啟/Controllers/HoneController, 並於Method 中加入[RequestHttps] 確保SSL 能被使用.
- 之後開啟Project Property, 選取Web, 於Servers 中ProjectUrl欄修改為剛才見到的SSL Url.
- 之後嘗試Build and Run, 其間會詢問IIS Express 是否trust self-sign cert. 因為這是示範, 可以按Yes.
- 進行安裝self-sign cert, 按yes 繼續.
- 之後會開到Index page. 而URL 見到HTTPS 的話, 測試成功.
- 開啟Google API, 並選擇Create Project.
- 輸入Project 名字, 這裡validation 不能加入符號, 所以直接打PoCoAuth.
- 因為須要利用Social media 做認證, 故選取Google+ API.
- API 預設Disable, 故須要手動啟動它.
於Google+ 主介面, 按Enable啟動.
- 之後按Credentials, 於Where will you be calling the API from 選擇Web Browser (JavaScript)
- 之後須要建立Client ID
在Name 中輸入Poc.oAuth, 而Restriction 中則輸入caller 的網址. 在示範中, 輸入project 的SSL URL (http://localhost:44355). 而於Authorized redirect URL 設定當登入去會redirect 去的路徑, MVC 中已經設定了可以redirect 去signin-google 中, 故須於URL 中設定 (http://localhot:44355/signin-google).
之後按Create client ID.
- 設定Content screen, 在此可設定顯示內容. 在Product name shown to users 中輸入PoC.oAuth.
- 之後Client key 便已經完成. 可以按Done 離開或者按Download 儲下來.
- 於Project 中, 開啟/App_Start/Startup.Auth, 並於configAuth()中加入以下代碼以接駁Google+.
app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() { ClientId = "<<Client ID>>", ClientSecret = "<<Client Secret>>" });
- 再次Debug project, 於右邊會多了Google 選項.
- 按下後, 便會redirect 去Google 登入畫面.
- 登入成功後, 會詢問使用權限, 按Allow 繼續.
- 在登入後, 須要再按多一次登記, 以決定其relationship.
- 利用Facebook 登入.
- 登入Facebook 後進入Facebook Developer, 之後按Add a new App.
- 輸入基本資料, 之後按Create App ID.
- 輸入test code 後按Submit.
- 之後建立Website, 按了Quick Start 後輸入SSL URL (https://localhost:44355) 之後按Save Change.
- 開啟/App_Start/Startup.Auth.cs, 於ConfigAuth()中加入以下代碼:
app.UseFacebookAuthentication( appId: "<<App ID>>", appSecret: "<<App secret>>");
- 之後執行project, Login 時按Facebook button.
- 之後會開啟Facebook 登入畫面, Login 繼續.
- 登入成功後, 會查詢權限, 按Continue 繼續.
- 之後會redirect 到登記畫面, 是為成功.
Reference
- OAuth 2.0, OAuth
- Code! MVC 5 App with Facebook, Twitter, LinkedIn and Google OAuth2 Sign-on (C#), Rick Anderson
Leave a Reply