使用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專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

留言

匿名表示…
請問一下大大:
照你說的步驟做下來,也順利取到token,在最後要取得用戶資訊的時候,他出現了401未授權的錯誤,
是不是我哪裡沒授權到呢?

這個網誌中的熱門文章

使用 Airtable 在小型需求上取代傳統資料庫

精彩(且驚人)的Semantic Kernel入門範例

使用Semantic Kernel 建立自然語言請假系統

在 LINE Bot 開發中使用Semantic Kernel建立自然語言請假系統

專業的價值...