安裝或設定

概要

可在此處檢視 Firebase v3 Web 身份驗證的完整功能演示。使用 Facebook，Github，Google，Twitter，基於密碼和匿名帳戶登入。 Github 上提供的程式碼易於閱讀和遵循，並且有詳細記錄。重點是全功能的身份驗證系統。

基於密碼的使用者將收到驗證連結。他們還可以更改他們的電子郵件地址和密碼 - 這兩個事件都會傳送驗證電子郵件作為額外的安全措施。

最後，演示了通過 Firebase 實時資料庫安全規則保護的身份驗證，客戶端授權和伺服器端授權之間的區別。

1. 先決條件

   1. Firebase Web 專案。自由！
   2. 一個 IDE。什麼是 IDE？試試 Cloud9 。自由！
   3. Github，Google，Facebook 和 Twitter 帳戶。自由！
   4. 兩個電子郵件帳戶自由！

2. 配置 IDE

   2. 建立一個 HTML5 專案。
   3. 安裝 Firebase 工具。npm install -g firebase-tools
   4. 使用 Firebase Tools 命令列，登入 Firebase 專案。firebase login --no-localhost
   5. 使用 Firebase Tools 命令列，在當前目錄中設定 Firebase 專案。firebase init
   6. 將這組檔案和資料夾克隆到 IDE。git clone https://github.com/rhroyston/firebase-auth.git
   7. 使用 Firebase Tools 命令列，將 IDE 專案推送到 Firebase 專案。firebase deploy
   8. 在瀏覽器中檢視 Firebase 專案。任何破損的影象或錯誤？在下面輕鬆修復。
   9. 你可能需要在所有 JS，CSS 和所有 HTML 檔案中更新 href，src 和 background: url，具體取決於你的 Web 主機資料夾結構。
      1. 使用查詢功能搜尋 href 和 src，並根據需要進行更新。
      2. 瀏覽器控制檯將顯示任何剩餘的錯誤路徑錯誤
      3. 注意 script.js 行 781 privateLink.href = "../firebase-auth/private" .. 似乎是必需的。
      4. 從 Firebase 託管中正確呈現所有頁面（沒有損壞的影象或控制檯錯誤）後，繼續。

3. 配置 Firebase

   1. 啟用所有 6 種形式的身份驗證。按照配置社交媒體網站設定的說明進行操作。
   2. 自定義電子郵件操作處理程式 URL 以指向你的 Firebase Web 應用程式 URL +’/ ack’，例如 https://my-app-1234/ack。

4. 登入 Web 應用程式

   1. 使用 oAuth 提供程式登入。
   2. 在瀏覽器命令列中，使用公開的 demo.update('mynode','myKey','myValue') 方法將安全標記新增到實時資料庫。
      1. 成功訊息將顯示在瀏覽器控制檯中。
      2. 你可能需要更新 href 路徑以匹配你的資料夾結構。

   demo.update("markup","secureData","<div class=\"mdl-card__title\"> <h1 class=\"mdl-card__title-text mdl-color-text--white\">Secured Data</h1> </div><div class=\"mdl-card__supporting-text mdl-typography--headline\"> <p>This is a secure card. The HTML markup that renders this card is secured in the Realtime Database.  Access is determined server side so no matter what you do with JavaScript on your browser you will not be able to view this card unless you are authorized to.</p><p>Secured data can be markup, JSON, strings, numbers, etc. Your imagination is the limit!</p></div><div class=\"mdl-card__actions mdl-card--border intro-card-actions\"> <a class=\"mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect\" href=\"../firebase-auth/\">Home</a></div>");
   

Firebase v3 身份驗證和授權演示演練

1. 使用每個 oAuth 提供程式登入

   1. 請注意，更新電子郵件地址或密碼選項不在你的帳戶頁面中。
   2. 請注意側邊選單抽屜中的任何額外連結？
   3. 嘗試刪除你的帳戶。怎麼了？

2. 註冊為基於密碼的使用者

   1. 你收到驗證郵件嗎？
   2. 你是否可以在點選驗證連結之前檢視私人資料？
   3. 你能改變密碼嗎？
   4. 你能改變你的電子郵件地址嗎？
   5. 你可以通過單擊電子郵件更改通知電子郵件 revokation 連結來撤消電子郵件更改嗎？

3. 登出

   1. 側邊選單抽屜中有哪些連結？
   2. 你可以訪問私人資料嗎？
   3. 你能檢視私人資料嗎？