[day30]-雪恥戰終章！成功雪恥Firebase Authentication結合Facebook登入 && 完賽感言

2019 iT 邦幫忙鐵人賽

DAY 30

Modern Web

穢土轉生之術～重構那些自己寫的Code ～系列第 30 篇

2019鐵人賽

King Tzeng

團隊阿莫斯の推坑教

2018-11-14 15:00:29

2843 瀏覽

分享至

Facebook登入結合Firebase Authentication

昨天把環境設定好之後已經去了半條命了....
但是努力是有代價的，今天早上終於串成功啦～！！
來看看我怎麼弄的吧

使用ngrok建立https環境

今天我想想不要在花時間在SSL的設定上了，於是我選擇B方案：使用ngrok來當SSL的開發環境，照著官網的設定之後在要開啟的資料夾底下輸入，開啟連線。

./ngrok http 80

開啟網頁後居然有顯示錯誤！
「錯誤訊息：Failed to complete tunnel connection」

後來查到：Failed to complete tunnel connection #478，解決方法是本地的server要一起開著，關關難過關關過啊....Orz

使用fb登入結合firebase

根據上回([day28]-雪恥戰！Firebase Authentication結合Facebook登入（上）)在雙方的主控版設定好之後，接下來就是進行程式的撰寫。

引入Firebase SDK
在網頁的body裡引入相關Firebase的js

<!-- Firebase App is always required and must be first -->
<!-- Firebase App 這一隻js一定要掛在前面 -->
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<!-- 其他看你要用到哪些功能，就選擇掛載哪隻js，這邊只用到auth&database -->
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase-database.js"></script>

接下來是將firebase初始化設定

<script type="text/javascript">

// Initialize Firebase
var config = {
    apiKey: "這邊填寫申請firebase api的key",
    authDomain: "你的服務名稱.firebaseapp.com",
    databaseURL: "https://你的服務名稱.firebaseio.com",
    projectId: "你的服務ID",
    storageBucket: "你的服務名稱.appspot.com",
    messagingSenderId: "產品的訊息id"
};
firebase.initializeApp(config); //啟動初始化

</script>

這邊設定檔不用擔心，firebase會自動幫你產生

按下「 + 新增應用程式 」
選擇web平台
直接產生firebase設定檔，直接貼在html裡即可

引入facebook初始化設定

/******** FB SDK載入 ********/
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'Facebook的應用程式編號',
      xfbml      : true,
      version    : 'v3.2'
    });
    FB.AppEvents.logPageView(); //
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

到這邊已經完成百分之87趴了....

接下來用Firebase的new firebase.auth.FacebookAuthProvider();呼叫FB Login並寫入至firebase裡

/******** FB Login ********/
//firebase 提供的functino-.auth.FacebookAuthProvider
var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(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;
  var displayName = result.user.displayName;
  var email = result.user.email;

  console.log("msg");
  console.log(user);
  console.log(result);
  console.log(displayName);
  console.log(email)
  // ...
}).catch(function(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;
  // ...
  console.log("msg2")
  console.log(error);
});

完成後會像這樣，進入網頁後會彈跳出登入視窗