iT邦幫忙

2023 iThome 鐵人賽

DAY 17
1
SideProject30

用 React 和 Firebase 打造一個完整 side project 吧!系列 第 17

Day17:開啟 Firebase 的 Google 與 Facebook 之登入與註冊功能

  • 分享至 

  • xImage
  •  

我們在上一個篇章中完成了信箱的驗證設定後,今天就可以接著進行 Google 與 Facebook 的部分,設定完成後即可讓使用者以自己 Google 與 Facebook 的電子郵件地址和密碼註冊。

首先一樣開啟 Firebase console 控制台,點選「新增供應商」。
https://ithelp.ithome.com.tw/upload/images/20231002/20140920uVsptZeFqG.png

Google 之登入與註冊功能

  1. 於新增供應商的彈出視窗中,選擇「Google」。
  2. 啟用 Google 服務,會有兩個值需要填寫,第一個欄位是專案公開名稱,它是未來會顯示於 Google 登入彈出視窗中的應用程式名稱、第二個則是你目前登入的 Google 帳號信箱(這個欄位是下拉選單,只會有你目前登入的帳號)。一開始它會預設專案名稱為此專案的ID。

https://ithelp.ithome.com.tw/upload/images/20231002/20140920qtmCZ3tdaR.png

已 Udemy 的網站為例

https://ithelp.ithome.com.tw/upload/images/20231003/20140920uXzOvggutw.png

  1. 送出後就完成了!
    https://ithelp.ithome.com.tw/upload/images/20231002/20140920acxNYdwvlq.png

  2. 測試功能是否已正常開啟
    我知道!大家一定想說怎麼那麼快?!沒錯,就是這樣這麼簡單快速又直覺。如果要在 Firebase console 控制台中測試,可以切換到 Users 分頁,點選「新增使用者」,輸入一組你自己其他的 Google 帳號信箱與密碼,新增成功即代表你的功能已開啟啦~
    https://ithelp.ithome.com.tw/upload/images/20231002/20140920T5bMOvCkVP.png

Facebook 之登入與註冊功能

  1. 首先先到 Meta for Developers 頁面,點選「建立應用程式」。
    https://ithelp.ithome.com.tw/upload/images/20231002/20140920ODlfnui4TK.png
  2. 下一步選擇「允許用戶使用 Facebook 帳號登入」。
    https://ithelp.ithome.com.tw/upload/images/20231002/20140920dYKjNLXw4Z.png
  3. 設定此專案的相關資訊後,點選「建立應用程式」按鈕。此時會需要你確認身分,登入自己的帳號密碼。
    https://ithelp.ithome.com.tw/upload/images/20231002/20140920YU1pIYYuE0.png
  4. 到 Firebase console 控制台,重複同樣的動作後,進到設定的彈出視窗中,將剛剛建立的應用程式 ID 和密鑰輸入並點選儲存。

Facebook 應用程式 ID 和密鑰可至應用程式設定的基本資料中查看。

https://ithelp.ithome.com.tw/upload/images/20231002/20140920ml3YyQEfLD.png

小結

參考資料:Facebook 登入


上一篇
Day16:串接 Firebase 的資料庫與設定信箱驗證
下一篇
Day18:在 React 專案中使用 Firebase Authentication 實作會員管理(一)
系列文
用 React 和 Firebase 打造一個完整 side project 吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言