[ASP.NET Core] OAuth驗證後進行本地註冊的身分驗證範例

本篇範例展示如何在ASP.NET Core裡,使用OAuth驗證後要求用戶進行本地註冊,註冊完成才允許登入的身分驗證機制。(已註冊過直接登入)

範例原碼:https://github.com/Clark159/CLK.AspNetCoreLab

範例專案:OAuthToRegisterAuthenticationLab

環境準備:

- Google OAuth
 1. 至Google建立專案,並申請OAuth2.0用戶端。(https://console.cloud.google.com/home)
 2. 於申請OAuth頁面的「已授權的重新導向URI」欄位,輸入https://localhost:44311/Account/Google-OAuth-SignIn
 3. 於申請OAuth頁面取得ClientId、ClientSecret。
 4. 將上一個步驟取得的ClientId、ClientSecret,填寫至Startup.cs的AddGoogle程式碼區塊內。

- Facebook OAuth
 1. 至Facebook建立應用程式,並申請Facebook登入。(https://developers.facebook.com/apps/)
 2. 於申請Facebook登入頁面的「有效的 OAuth 重新導向 URI」欄位,輸入https://localhost:44311/Account/Facebook-OAuth-SignIn
 3. 於設定\基本資料頁面取得ClientId、ClientSecret。
 4. 將上一個步驟取得的ClientId、ClientSecret,填寫至Startup.cs的AddFacebook程式碼區塊內。
 
測試步驟:

- OAuth登入後進行註冊,狀態:用戶資料未註冊
 1. 於LocalHost網站的Account.Login頁面點擊LoginByGoogle按鈕,執行Account.ExternalLogin,並開啟Google網站進行OAuth的登入及授權。
 2. (背景作業)Google完成OAuth的登入及授權後,重新導向至https://localhost:44311/Account/Google-OAuth-SignIn。
 3. (背景作業)LocalHost網站將Google回傳的OAuth授權資料,儲存至ExternalCookie,並導頁至Account.ExternalSignIn。
 4. (背景作業)LocalHost網站執行Account.ExternalSignIn,使用ExternalCookie的OAuth授權資料,確認用戶沒有註冊資訊後,導頁至Account.Register。
 5. 於LocalHost網站的Account.Register頁面,填寫註冊資料後點擊Register按鈕完成用戶註冊後,將用戶資訊儲存至ApplicationCookie並轉頁至Home.Index頁面。(已登入)
 6. 於LocalHost網站的Home.Index頁面,可以看到目前登入的用戶資訊。:已登入,使用Google-OAuth。
 7. 於LocalHost網站的Home.Index頁面點擊Logout按鈕,進行登出後完成測試。

- OAuth登入後無須註冊,狀態:用戶資料已註冊
 1. 於LocalHost網站的Account.Login頁面點擊LoginByGoogle按鈕,執行Account.ExternalLogin,並開啟Google網站進行OAuth的登入及授權。
 2. (背景作業)Google完成OAuth的登入及授權後,重新導向至https://localhost:44311/Account/Google-OAuth-SignIn。
 3. (背景作業)LocalHost網站將Google回傳的OAuth授權資料,儲存至ExternalCookie,並導頁至Account.ExternalSignIn。
 4. (背景作業)LocalHost網站執行Account.ExternalSignIn,使用ExternalCookie的OAuth授權資料,確認用戶擁有註冊資訊後,將用戶資訊儲存至ApplicationCookie並轉頁至Home.Index頁面。(已登入)
 5. 於LocalHost網站的Home.Index頁面,可以看到目前登入的用戶資訊:已登入,使用Google-OAuth。
 6. 於LocalHost網站的Home.Index頁面點擊Logout按鈕,進行登出後完成測試。
 
- Password登入後無須註冊,狀態:用戶資料已註冊
 1. 於LocalHost網站的Account.Login頁面點擊LoginByPassword按鈕,執行Account.PasswordSignIn。
 2. (背景作業)LocalHost網站執行Account.PasswordSignIn,確認用戶密碼(Hash)後,將用戶資訊儲存至ApplicationCookie並轉頁至Home.Index頁面。(已登入)
 3. 於LocalHost網站的Home.Index頁面,可以看到目前登入的用戶資訊:已登入,使用Password。
 4. 於LocalHost網站的Home.Index頁面點擊Logout按鈕,進行登出後完成測試。

期許自己
能以更簡潔的文字與程式碼,傳達出程式設計背後的精神。
真正做到「以形寫神」的境界。