iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0
Modern Web

穢土轉生之術~ 重構那些自己寫的Code ~系列 第 26

[day26]-不會後端的前端救星之firebase Authentication小小Demo

firebase Authentication Demo


新篇章

由於我在商業化驗證檢核沒有過關被刷下來了,最後一個商業化募資階段就沒有內容可以寫了....
不過這個side project還是會持續做下去,就和此系列文的主題引言說的

2017 年 - 為了證明自己的實力,我參加了經濟部工業局所舉辦的「資料創新應用競賽」,並以平日工作休息之餘做出 Side Project:『Give me Find (幫我找)-促進寵物福利協尋平台』獲得 複選優等;
2018 年 - 心中推廣動物福利的夢還未完成!就趁這個機會把網站重構,審視有哪些地方可以改進,並紀錄與分享參賽歷程。

在比賽階段沒做好的地方,現在開始慢慢完成.../images/emoticon/emoticon12.gif

firebase Authentication

今天要小小Demo的是firebase Authentication
說實在因為我不是本科系出身的,對於後端資料庫的部分不是很了解....
但是網站又要規劃會員的服務,資料處理需要資料庫的support,
後來找到了firebase,大大的舒緩了前端不會後端的困境啊....

為了要實現會員的這個功能,去年有小小研究一下Firebase,有實現出

  • 使用FaceBook註冊、登入
  • 使用Google帳號註冊、登入
  • 使用自己的mail註冊、登入

以上的功能,但是就在寫文章的剛剛我發現到一件事情.....

就是我太久沒進去Facebook的開發應用那邊,隱私權政策改了沒有申請被撤除權限了/images/emoticon/emoticon04.gif
還有剛剛firebase也是太久沒有用,登進去整個也改版了....(悲劇)

現在只剩下使用自己的mail註冊、登入可以Demo給大家看了...../images/emoticon/emoticon10.gif

那個不多說了...就放影片Demo一下 Give me Find網站的新功能

firebase Authentication
註冊Demo

Yes

firebase Authentication
登入Demo

Yes


串Firebase API 的隨手筆記

這個是去年(2017年)我在部落格發表的隨手筆記,現在有可能api改了,僅供參考
連結:King 學習前端之人生-〔筆記〕串Firebase API 之隨手筆記

API名稱:onAuthStateChanged
用法:登入後的狀態
範例:

login_btn.addEventListener("click",function(){
  console.log(acc_user_L.value);
  firebase.auth().signInWithEmailAndPassword(acc_user_L.value, psw_user_L.value).catch(function(error) {
    // Handle Errors here.
    console.log(error);
    var errorCode = error.code;
    var errorMessage = error.message;
    console.log(errorMessage);
  })
  firebase.auth().onAuthStateChanged(function(user) {
    console.log(user);    //這裡會印出User的資訊
    if (user) {
      // User is signed in.
    }
  });
},false);

img

這個API怎麼用勒?

firebase.auth().onAuthStateChanged(function(user) {←//這邊帳號登入後,登入的狀態產生變化
    console.log(user);
//上圖的firebase.UserInfo#displayName的"UserInfo"就是指function(user){}函式裡的user
//所以官方文件裡就寫firebase.UserInfo可以取User的XXX,指的是配合大函式回傳的東西
    if (user) {
      // User is signed in.
      console.log(user.uid);
      console.log(user.providerId); 
      // console.log(user.email);
      // displayName
      // emailVerified
      // phoneNumber
      // photoURL
      // providerData
    }
  });
},false);

img

今天週六夜先寫到這邊了....Orz

希望大家有什麼想知道的內容,歡迎在底下留言讓我知道,感激不盡!

文後


該學的逃不掉,公司叫我用PHP去寫前後端,現在後端也要慢慢碰一點了....
其實我不是完全不會後端語言啦...只是PHP連接資料庫那一部分不會罷了/images/emoticon/emoticon20.gif


團隊主題連結

CssCoke - Amos 老師

塔塔默



上一篇
[day25]-商業化驗證結果!媽 我不在這了TAT
下一篇
[day27]-假日分享系列之優質前端技術分享直播頻道
系列文
穢土轉生之術~ 重構那些自己寫的Code ~30

尚未有邦友留言

立即登入留言