[ASP.net] 透過oAuth 與Google / Facebook 進行互動登入

有時寫External Application, 為簡化註冊程序, 有時會引入oAuth 將認證及登入等交給第三方處理 (如Facebook, Google / Linkedin 等). 而在ASP.net MVC 中, 亦已有相對應方法如下:

1. 建立一個ASP.net Web Application, 命名為PoC.OAuth.
   
2. 於Template 中選擇MVC, 而Authorization Method 則選擇Individual User Account.
    
3. 於Project 中right click, 並選擇Manager NuGet Package.
   
4. 確保oAuth 為最新以能夠正常使用, 選擇Microsoft.Owin, 然後按Update.
   
5. 大部份social media 都須要用使用SSL認證. 所以在project 中enable.
   於Project Property 中選取SSL Enable, 並選擇 True. 並記下SSL URL 以作之後的設定.
   
6. 開啟/Controllers/HoneController, 並於Method 中加入[RequestHttps] 確保SSL 能被使用.
   
7. 之後開啟Project Property, 選取Web, 於Servers 中ProjectUrl欄修改為剛才見到的SSL Url.
   
8. 之後嘗試Build and Run, 其間會詢問IIS Express 是否trust self-sign cert. 因為這是示範, 可以按Yes.
9. 進行安裝self-sign cert, 按yes 繼續.
   
10. 之後會開到Index page. 而URL 見到HTTPS 的話, 測試成功.
    
11. 開啟Google API, 並選擇Create Project.
    
12. 輸入Project 名字, 這裡validation 不能加入符號, 所以直接打PoCoAuth.
    
13. 因為須要利用Social media 做認證, 故選取Google+ API.
               
14. API 預設Disable, 故須要手動啟動它.
    於Google+ 主介面, 按Enable啟動.
    
15. 之後按Credentials, 於Where will you be calling the API from 選擇Web Browser (JavaScript)
     
16. 之後須要建立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. 
    
17. 設定Content screen, 在此可設定顯示內容. 在Product name shown to users 中輸入PoC.oAuth.
    
18. 之後Client key 便已經完成. 可以按Done 離開或者按Download 儲下來.
    
19. 於Project 中, 開啟/App_Start/Startup.Auth, 並於configAuth()中加入以下代碼以接駁Google+.

    app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
                {
                    ClientId = "<<Client ID>>",
                    ClientSecret = "<<Client Secret>>"
                });

     

20. 再次Debug project, 於右邊會多了Google 選項.
    
21. 按下後, 便會redirect 去Google 登入畫面.
    
22. 登入成功後, 會詢問使用權限, 按Allow 繼續.
    
23. 在登入後, 須要再按多一次登記, 以決定其relationship.
    
24. 利用Facebook 登入.
25. 登入Facebook 後進入Facebook Developer, 之後按Add a new App.
     
26. 輸入基本資料, 之後按Create App ID.
    
27. 輸入test code 後按Submit.
    
28. 之後建立Website, 按了Quick Start 後輸入SSL URL (https://localhost:44355) 之後按Save Change.
29. 開啟/App_Start/Startup.Auth.cs, 於ConfigAuth()中加入以下代碼:

     app.UseFacebookAuthentication(
                   appId: "<<App ID>>",
                   appSecret: "<<App secret>>");

30. 之後執行project, Login 時按Facebook button.
    
31. 之後會開啟Facebook 登入畫面, Login 繼續.
    
32. 登入成功後, 會查詢權限, 按Continue 繼續.
    
33. 之後會redirect 到登記畫面, 是為成功.
          

Reference

• OAuth 2.0, OAuth
• Code! MVC 5 App with Facebook, Twitter, LinkedIn and Google OAuth2 Sign-on (C#), Rick Anderson