利用 Firebase 達成 Facebook 第三方登入

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










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



接著就是在 Firebase 上的設定了,請依照上圖指示動作。至於應用程式ID和應用程式密鑰是指 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 不同也是因為瀏覽器的關係

留言

這個網誌中的熱門文章

解決PHP JSON 中文亂碼的問題

PHPExcel 用PHP匯出成EXCEL

讓 PHP 接收 post 的 json 資料