Google 的第三方登入(web 前端實作) - 《Chris 技術筆記》

2024-11-13

文章推薦指數： 80 %

投票人數：10人

Google 的第三方登入(web 前端實作) ¶概念介紹要實現第三方登入，有兩種方式做在前端← 這一篇要講的是這個做在後端¶前端的第三方登入#sequence-0 ... Google的第三方登入(web前端實作)概念介紹前端的第三方登入設定實作Googleinitial繪製Button登出 ¶Google的第三方登入(web前端實作) ¶概念介紹要實現第三方登入，有兩種方式做在前端←這一篇要講的是這個做在後端 ¶前端的第三方登入兩者之間的差別在於，前端實作，不需要redirecturl後端實作的話，需要。

(慎選套件) 這一篇，介紹的是做在前端。

這次是要介紹如何妥善安排程式碼在Vue裡面。

¶設定先到Google設定第三方登入的憑證到這個頁面如果畫面和我不一樣的話，請先開一個專案我們要的功能在「憑證」裡面在憑證裡面，建立一個「OAuth用戶端ID」允許第三方登入點擊OAuth用戶端ID之後因為要要做的是web所以選「網頁應用程式」設定URI可以用ngrok先用一個臨時的來測試。

(在此就用http://127.0.0.1:8080做代表) 好了就按下「建立」成功的時候，Google就會提供用戶端ID(clientId)和用戶端密碼，我們只要clientId 按下確定，就可以來實作程式囉 ¶實作官方網站 public/index.html 需要載入Google的SDK[1] ¶Googleinitial 在頁面初始的過程，需要在gapi.load時初始化或自動登入[2] examplecode varstartApp=function(){gapi.load('auth2',function(){//RetrievethesingletonfortheGoogleAuthlibraryandsetuptheclient.auth2=gapi.auth2.init({client_id:'YOUR_CLIENT_ID.apps.googleusercontent.com',cookiepolicy:'single_host_origin',//Requestscopesinadditionto'profile'and'email'//scope:'additional_scope'});attachSignin(document.getElementById('customBtn'));});}; 在vue上實作，必須將這一段放在main.js確保不管已登入，還是未登入，在每一次開啟頁面，都會正確初始化 123456789101112131415161718importVuefrom'vue';importAppfrom'./App';importrouterfrom'./router';Vue.config.productionTip=false;newVue({created(){//GoogleSign-ininitialwindow.gapi.load('auth2',()=>{window.gapi.auth2.init({client_id:'YOUR_CLIENT_ID.apps.googleusercontent.com',});});},router,render:h=>h(App)}).$mount('#app'); ¶繪製Button 可以使用gapi.signin2.render自訂義繪製時機點 examplecode gapi.signin2.render('my-signin2',{'scope':'profileemail','width':240,'height':50,'longtitle':true,'theme':'dark','onsuccess':onSuccess,'onfailure':onFailure}); src/components/googleSigninButton.vue 直接將googlesign-inbutton做成一個按鈕。

並且在mounted時繪制 Note 用這種內建的方式繪製，它只會在網頁初始時繪製按鈕。

但是登出時會出問題: 按下登出後，會跳轉到登入頁，照理需要繪製登入按鈕因為這並不是在初始過程，所以不會繪製。

登入method的綁定方式，要配合GoogleAPI的做法在此，目的是為了傳給後端id_token所以輸出只emit出id_token而已。

這部份可以依需求修改。

1234567891011121314151617181920212223242526272829303132333435363738 使用GoogleSignInButtoncomponent 1234567891011121314151617181920212223242526272829 ¶登出若你想要在登出時，同時斷開使用者給予的授權，就可以增加這一段。

[3] examplecode Signout src/views/navigation.vue 123456789101112131415161718192021222324252627282930313233343536 participantWebApp\nClientasclient participantWebApp\nServerasserver participantGoogle授權畫面aspage participantGoogleAPIServerasgoogle Noteoverclient:GoogleSDK載入、初始完成 Noteoverclient:GoogleSDK畫出Google登入按鈕 Noteoverclient:使用者點擊「Google登入」 client->google:呼叫GoogleServer使用第三方登入服務 Noteovergoogle:- google->page:呼叫登入頁面 Noteoverpage:- page->client:提供登入頁面給使用者授權 Noteoverclient:看見新開的頁面 Noteoverclient:未授權=>同意授權\n已授權=>頁面在轉動 Noteoverclient,google:完成前端授權 client->server:提供id_token給後端 Noteoverserver:- server->google:使用id_token再做一次身份認證 Noteovergoogle:確認授權 Noteoverclient,google:完成後端授權 google->server:確認身份是否正確 Noteoverserver:- server->client:跟前端說「正確哦」並提供server的token使用 Noteoverclient:登入成功{"theme":"simple","scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12} 加載Google平台庫-將GoogleSign-In集成到您的網絡應用程序中)↩︎ 使用自定義圖形構建按鈕-構建自定義Google登錄按鈕|網站的Google登錄↩︎ 註銷用戶-將GoogleSign-In集成到您的網絡應用程序中↩︎ 發表於 2021-06-15 tags: {google} {sign-in} {OAuth} {vue} 同系列文章還有... JestforVuewithVueRouter演練¶JestforVuewithVueRouter演練這次測試，要測試的是模仿使用者操作。

隨著網址的變化，畫面也要變化到指定的Component 這次的JestforVue發送API用axios¶JestforVue發送API用axios 承JestforVuewithVuex實戰的進度。

這次，希望可以測試axios得到的JSJestforVuewithVuex演練¶JestforVuewithVuex演練這次測試，要測試的是模仿使用者操作。

在畫面顯示的變化要出現這次的練習，是由TestingVuexincVueComponent技巧-共用Form¶VueComponent技巧-共用Form 本文會大量使用Component一詞，但是它會有兩個意思，在此先進行名詞定義: Vuecomponen好想工作室裡的天瓏書目(持續更新) @keyframesfade-in{ 0%{ opacity:0; } 100%{ opacity:1; } } .bovue-router遇到無窮循環route¶vue-router遇到無窮循環route ¶源起錯誤訊息並不是指向自己的程式碼而是指向框架的錯誤所以，算是一個不直覺處理的bug ¶錯誤訊息截圖文