Google Firebase Authentication 初試啼聲

Firebase 俾 Google 買咗之後,Google 最近結合 Google Cloud Messaging 重新推出,叫 Firebase Cloud Messaging,增多咗好多功能,我係 Google 粉絲,又有用開 Google Cloud Services 當然要幫襯下,我打算用兩項:Authentication 同 Cloud Messaging,今次就先講講 Authentication。

Firebase 有咩玩?睇圖:

 

firebase

使唔使錢?有免費版(SPARK):

Screen Shot 2016-08-05 at 9.08.49 AM

如果係 project 仔就應該夠用,超出嘅話,俾多少都好應該吖,當然,唔使俾就永遠都係最好嘅! 😀

開波:

Screen Shot 2016-08-05 at 9.11.52 AM Screen Shot 2016-08-05 at 9.12.41 AM Screen Shot 2016-08-05 at 9.13.01 AM
Login 你個 Google Gmail account,去:console.firebase.google.com Click CREATE NEW PROJECT,輸入你想個 project 叫咩,選埋地理位置。 Dashboard(Welcome screen),左邊可以見到個 project 可以使用嘅 Firebase 服務。
Screen Shot 2016-08-05 at 9.13.30 AM Screen Shot 2016-08-05 at 9.13.56 AM Screen Shot 2016-08-05 at 9.14.07 AM
Click 右邊嘅 Add Firebase to your web app,要抄低彈出嚟嘅 codes,好重要! 左邊,喺個 project 名右邊,有隻 icon 叫 Settings。 Click 一下會出現兩個選項。
Screen Shot 2016-08-05 at 9.14.28 AM Screen Shot 2016-08-05 at 9.15.25 AM Screen Shot 2016-08-05 at 9.15.44 AM
Project Settings 入面有好多 settings 可以揀,第日會經常入嚟,記住點搵 project settings 喇。 Click 右邊嘅 Auth,畫面會顯示目前有幾多人登記咗,我試咗三個,兩個用 email(自選 password),一個用 Google Gmail account。 你可以 manual 加 users,不過衹可以加 email 登記用戶。
Screen Shot 2016-08-05 at 9.16.18 AM Screen Shot 2016-08-05 at 9.16.28 AM Screen Shot 2016-08-05 at 9.17.56 AM
你仲可以 copy 個 user ID 嚟用,有咩情況要咁用?你見我整黑咗啲 user ID 就知,佢有幾重要!😜 另外仲有三個功能俾你用,不過,你諗下,如果有幾百個 users,你話係咪冇咩理由喺度搞呀? 輪到 SIGN-IN METHOD,Firebase 支持幾種熱門嘅第三方認證,你用邊個都得,enable 咗先。
Screen Shot 2016-08-05 at 9.18.13 AM Screen Shot 2016-08-05 at 9.18.25 AM Screen Shot 2016-08-05 at 9.20.46 AM
Enable email 冇難度,最簡單。 Enable Google 就會多啲手續,先喺哩度 enable 咗。 再去你個 Google Cloud Platform,我因為係用同一個 Google user account,所以個畫面己經顯示咗我個 Firebase project 名。
Screen Shot 2016-08-05 at 9.23.42 AM Screen Shot 2016-08-05 at 9.24.38 AM Screen Shot 2016-08-05 at 9.24.55 AM
Click 中間個 Go to APIs overview,或者用個 pull-down menu 都得,去 API Manager。 Click ENABLE API 或者右邊嘅 Library 都得,再 click Google+ API 返番去個 Dashboard 會見到 Google+ API 已經出現。
Screen Shot 2016-08-05 at 9.26.39 AM  Screen Shot 2016-08-05 at 9.29.23 AM
Click 右邊嘅 Credentials,會見到一個 OAuth 2.0 client ID,佢就係話俾 Google 聽,你有個 web app 會用 Google 嘅 OAuth 2.0 Double click 哩個 item 會顯示佢嘅詳細內容。個 URL 有 localhost 因為我用 localhost 嚟測試,如果 deploy 就要入嚟更新一下。 搞掂啲設定,依家搞軟件,去 Firebase 攞啲 SAMPLES 嚟用,我要 Authentication 入面嘅 web app。
Screen Shot 2016-08-05 at 9.29.54 AM Screen Shot 2016-08-05 at 9.31.52 AM Screen Shot 2016-08-05 at 9.33.11 AM
Redirect 你去 Github 下載。 Download 完就用你嘅至愛 editor 打開,我用 Mac WebStorm。 Edit email.html,將二樓第一張相提及嘅 codes 抄到 TODO… 之下(35 至 45 行)。
Screen Shot 2016-08-05 at 9.33.46 AM Screen Shot 2016-08-05 at 9.34.54 AM Screen Shot 2016-08-05 at 9.35.53 AM
Edit 埋 google-popup.html。 Launch 哩個 web app,我就好簡單,right click indx.html 然後揀 Open in Browser > Firefox,用 Mac 啦,Linux 都得,PC 就麻煩多多!😎 成功 launch。
Screen Shot 2016-08-05 at 9.36.03 AM Screen Shot 2016-08-05 at 9.37.07 AM Screen Shot 2016-08-05 at 9.36.31 AM
Click Email/Password,SIGN IN 同 SIGN UP 一個畫面做哂。 成功登入! 再試 Google 登入。
Screen Shot 2016-08-05 at 9.39.18 AM
Popup,請用 Gmail account 登入。

 

非常好!我就係要咁:

  • 用 email 加 password 做登入
    User 用 browser 訪問你個 web app,你問佢想用咩方法登入,佢選咗,你再問佢 user name 同 password,你個 web app 將啲答案收咗,發俾 Firebase,Firebase 確認之後,回覆你個 web app。
  • 用 Google Gmail account 做登入
    User 用 browser 訪問你個 web app,你問佢想用咩方法登入,佢選咗,Firebase 轉問 Google,Google 就請 user login 一下,成功 login,Firebase 確認之後,回覆你個 web app。

其他 Social Logins(例如 Facebook)唔搞囉,一里通百里明!