本篇範例展示如何在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按鈕,進行登出後完成測試。
能以更簡潔的文字與程式碼,傳達出程式設計背後的精神。
真正做到「以形寫神」的境界。