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

首先把鍋燒熱

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

Google

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

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

HTML

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

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

首先必須創建一個 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;
  });  
}

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的主控台看到成功登入的使用者

Facebook

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

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

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

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

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

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

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

<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;
    })
  }

就能夠使用臉書登入了

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

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

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

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