利用 Firebase 達成 Facebook 第三方登入

日期：
第三方登入在目前的網站系統中已經是廣泛被使用的功能了。
如果你跟我一樣每次實作 Facebook 登入都會遇到奇怪的問題的話～不妨可以試試看利用 Firebase 實作。










第一步仍然是要記得載入 Firebase 的環境：
這個我就不多說了



接著就是在 Firebase 上的設定了，請依照上圖指示動作。至於應用程式ＩＤ和應用程式密鑰是指 Facebook 那邊的應用程式設定，請記得在 Facebook 那邊申請。最後記得將重新導向 URI 新增到應用程式設定。


接著


我們要來去設定重新導向網域，這樣才可以開始實作（Facebook 彷彿就不用特別設定應用程式網址了，改用上一張圖的重新導向 URI ）


接著就是實作的 code

文件在此




function login(){
    var provider = new firebase.auth.FacebookAuthProvider();
    provider.setCustomParameters({
      'display': 'page'
    });
    // provider.addScope('user_birthday');
    // provider.addScope('email');
    firebase.auth().signInWithRedirect(provider).then(function(result) {
     console.log(result);
      // This gives you a Facebook Access Token. You can use it to access the Facebook API.
      var token = result.credential.accessToken;

      // The signed-in user info.
      var user = result.user;
      console.log(user);
      // ...
    }).catch(function(error) {
     console.log(error);
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      // The email of the user's account used.
      var email = error.email;
      // The firebase.auth.AuthCredential type that was used.
      var credential = error.credential;
      // ...
    });
   }


基本上，要實現登入這件事情只需要用到這樣即可。其中這段跟範例不同。
provider.setCustomParameters({
      'display': 'page'
    });



我會建議不要用 popup 的方式（因為瀏覽器會擋），呼叫 signInWithRedirect 這個也跟範例中的 signInWithPopup 不同也是因為瀏覽器的關係

留言

張貼留言