使用Google登入做Web應用程式單一登入身分驗證(SSO)

你本以為今生不會再在.NET WebForm開發的旅途上用到Google Account做網站SSO的身分驗證，但時代的巨輪就是這麼幽默…

這一篇很快地談怎麼用C#做Google帳號的SSO(Single Sign On)，依照我們前面曾介紹過關於OAuth與SSO的資訊，你應該已經知道用OAuth做網頁SSO需要兩個重要資訊，就是Client ID與Client Secret，在GCP平台上，你可以透過 https://console.cloud.google.com 這網站來建立一個應用程式(專案)，建立後第一件事情就會引導你到底下畫面：

要我們選擇? 毫無懸念的我們選擇OAuth用戶端ID，接著會要求你先在OAuth同意畫面上做一些設定。

什麼叫做OAuth同意畫面? 就是那個你的網站要求人家用Google帳號登入時，跟人家要求權限存取他的資訊，請他按下『同意』的那個畫面，而該頁面中的相關資訊就是在底下設定的：

最主要的是設定應用程式名稱，這個畫面設定完之後，底下有幾個按鈕，按下儲存之後(順帶一提，Google要求你正式啟用前要申請驗證，否則只能測試)，會跳出底下畫面：

我們的SSO是做給網站用的，上圖A的部分理當選Web應用程式，然後底下B和C你應該樣知道怎麼填，最主要的就是C的redirect_uri，請特別注意，即使是以lcoalhost進行測試的階段，你還是要正確地填寫這個redirect_uri，一般來說測試階段很可能是類似底下這樣localhost的url:

http://localhost:63577/SSOcallback.aspx

這個位置是指，你的用戶完成Google登入後，要導回你網站的哪一頁。完成之後按下建立，我們的目標是拿到底下兩組key:

前置作業完成無誤後，我們要撰寫一個登入頁面，也就是你的網頁要讓Google用戶登入的那個引導頁面，例如我們範例中是：

按下這個按鈕，網頁會被引導到Google做的登入畫面，我們有了剛才建立好的Client ID，要組一個這樣的redirect登入url不難，程式碼如下：

上面這段javascript，從14-22行就是組出將用戶轉向Google登入的url，然後redirect過去，其中19行的client_id，當然就是我們剛才在GCP平台上申請個半天的應用程式Client ID，而redirect_uri當然也非得與剛才我們在GCP後台設定的完全相同不可。

設定完成後，當上面這個頁面被執行後，你應該會發現，只要用戶點選了該按鈕，就被導引到Google登入畫面：

用戶在這個畫面上，可以選擇用已經登入過的Google帳號登入，或是用其他Google帳號，選擇好並完成Google登入與身分驗證之後，瀏覽器會被導回我們一開始在Google後台登記的http://localhost:63577/SSOcallback.aspx頁面，當執行到我們在該頁面早就寫好的程式碼(如後)之後，即可從QueryString取得code(19行)，並且呼叫GetTokenFromCode()來換得token(第23行)：

取得token之後，你就可以做任何事情了，像是拿token取得用戶的email或照片，底下Button1中的程式碼就是這樣做：

取得後的資料大概長底下這樣：

好啦，就這樣，知道OAuth的原理之後，其實一切都非常簡單。你的網站已經可以輕鬆的讓用戶以Google帳號登入了。

完整source code位於: https://github.com/isdaviddong/GoogleSSO 
注意：測試本範例你必須把default.aspx以及SSOcallback.aspx頁面中的所有ClientID與ClientSecret與redirecr_uri換成你自己申請的，否則將無法正確執行("Unauthorized")。

hope it helps.

--------------------------------------------------------------
如果需要詢問問題或即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。