iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
2

延續昨天的文章,
firebase還提供了透過Google、Facebook、Twitter 和 GitHub帳號的登入功能,
今天就用較為普遍的 Google和 Facebook

首先把鍋燒熱

一樣於firebase的左方面板選擇 authentication
點選登入方式 並且將 google 和 facebook的登入方式打開

panel

Google

Google的很容易 只要啟用並選擇專案支援電子郵件便能啟用
google

今天一樣用一個陽春到不行的介面來做

HTML

<button id = "singUpPopup">使用google註冊(Popup)</button>
<button id = "singUpRedirect">使用google註冊(Redirect)</button>

為了不要看起來太過寂寞加了一點樣式
google

首先必須創建一個 provider object

var provider = new firebase.auth.GoogleAuthProvider();

接著在 button 綁上 onclick 事件

Popup

var btnGooglePopup = document.getElementById('googleSingUpPopup');

btnGooglePopup.onclick = function() {
  firebase.auth().signInWithPopup(provider).then(function(result) {
    // 可以獲得 Google 提供 token,token可透過 Google API 獲得其他數據。  
    var token = result.credential.accessToken;
    var user = result.user;
  });  
}

pop

Redirect

var btnGoogleRedirect = document.getElementById('googleSingUpRedirect');

btnGoogleRedirect.onclick = function() {
  firebase.auth().signInWithRedirect(provider).then(function(result) {    
    var token = result.credential.accessToken;
    var user = result.user;
  });
 }

成功後一樣可以在firebase的主控台看到成功登入的使用者

google


Facebook

Facebook較為麻煩一點
必須在臉書頁面中進入開發人員頁面
fb

在我的應用程式中選擇新增應用程式
FB

輸入名稱及密碼後就可以創建應用程式
並進入主控版
點選主控版左方的 設定>基本資料
就可以取得應用程式編號應用程式密鑰

fb

複製貼回 firebase的主控版
並將firebase提供的連結複製下來

firebase

回到facebook的頁面
選擇 產品+ >facebook 登入

fb

點選設定後將連結貼到
有效的 OAuth 重新導向 URI
儲存

FB

就可以開始使用了
接著一樣一個陽春的介面

<button id="facebookSingUpPopup" class="fb">使用facebook註冊(Popup)</button>
<button id="facebookSingUpRedirect" class="fb">使用facebook註冊(Redirect)</button>

並且與前面Google一樣綁定onclick的事件

  var providerF = new firebase.auth.FacebookAuthProvider();

  var btnFacebookPopup = document.getElementById('facebookSingUpPopup');

  btnFacebookPopup.onclick = function() {
    firebase.auth().signInWithPopup(providerF).then(function(result) {
      var token = result.credential.accessToken;      
      var user = result.user;
    })
  }

  var btnFacebookRedirect = document.getElementById('facebookSingUpRedirect');

  btnFacebookRedirect.onclick = function() {
    firebase.auth().signInWithRedirect(providerF).then(function(result) {
      var token = result.credential.accessToken;      
      var user = result.user;
    })
  }

就能夠使用臉書登入了
firebase

附上codepen
如果不小心註冊了,周末我們來刪除XD


下面是 firebase authentication Google和Facebook 註冊的技術總結
第一、在firebase主控台 authentication 登入方式的下方有一個授權網域,預設是localhost和 專案名稱.firebaseapp.com,如果要在codepen或是JSbin遊玩,記得將它們加入,不然沒辦法使用。

domain

第二、在 codepen和 JSbin中無法使用redirect,chrome developer tools會告訴你是因為 X-Frame-Options被設定為 sameorigin,要怎麼改善呢?關注紫禁城的繡女,將來學到告訴你!

firebase authentication Google和Facebook 註冊的技術總結完畢
關注紫禁城的繡女 這裏總有一個步驟你忘了怎麼做


上一篇
[03] firebase 使用帳號密碼註冊
下一篇
[05] firebase 獲取、修改user資料
系列文
我在繡房繡小主常服的日子-- 初入前端工程師的第一個小挑戰30

1 則留言

我要留言

立即登入留言