前往
大廳
主題

第三方登入系統 - Google

老爸爸 | 2021-09-04 16:51:31 | 巴幣 0 | 人氣 607

第三方登入系統 - Google 登入

利用 Firebase 來儲存登入的資料,且可以直接從 Firebase SDK 中的 function 來取得會員資料。

建立 Firebase 專案

進入 Firebase 的頁面並且登入帳號,即可新增專案。


專案新增完後,首頁上將會看到新增應用程式的訊息,點選表示「網頁」的 icon 就會開始新增網頁應用程式


輸入完應用程式暱稱並新增完成後,就會看見我們所要在網頁上要引用的 Firebase SDK 了


照著說明複制這一段的程式碼至 HTML 檔案中的 <body> 的最下方處


開通 Google Authentication 功能

Firebase 專案及應用程式建立完後,從左側選單點選「Authentication」,接著右側會出現「設定登入方式」的按鈕


接著點選「Google」,來進行設定


除了「Google登入」還有許多的登入方式,可進行設定


頁面再往下拉,出現「已授權網域」的列表


在以下的網域才可以進行使用 Firebase Auth 的功能,如果不在這份列表內的網域一律會報錯,如果要新增網域,點選右上角的「新增網域」,即可新增網域

目前為止引用了 SDK ,開啟了 Auth 功能以及設定可使用的網域,接著就要寫程式碼來使用了

Google 登入

Google 的登入有二種模式,一種是跳出一個 Popup 的視窗,在視窗中讓使用者登入自己的 Google 帳號;另一種是原頁跳轉到 Google 的登入頁面,登入後回到原始頁面用 function 去取得使用者資料,我所使用的是使用 Popup 的視窗來進行登入

Popup 介面


Popup 範本


user 是使用者的資料,可以將一部分資料抓下來儲存到資料庫當中


介面

因為我只用 Google 登入,所以需要的標籤比較少。

登入
只有一個使用 Google 登入的按鈕,但是看起來有點空虛,所以又加了兩個不能用的輸入框來美化介面



登入成功
歡迎標題、用戶資訊、登出 / 刪除帳號鈕,這邊有的東西就比較多了,更詳細的程式碼後面會寫到



函數
總共要做三種功能:登入、登出、刪除帳號

登入
由 Popup 的範本再做延伸


登出


刪除帳號


查看目前註冊人數

回到在 firebase 所新增的專案,點選「Authentication」中的「Users」,即可查看目前所註冊的人數及資料

送禮物贊助創作者 !
0
留言

創作回應

更多創作