安装或设置

Created: November-22, 2018

概要

可在此处查看 Firebase v3 Web 身份验证的完整功能演示。使用 Facebook，Github，Google，Twitter，基于密码和匿名帐户登录。 Github 上提供的代码易于阅读和遵循，并且有详细记录。重点是全功能的身份验证系统。

基于密码的用户将收到验证链接。他们还可以更改他们的电子邮件地址和密码 - 这两个事件都会发送验证电子邮件作为额外的安全措施。

最后，演示了通过 Firebase 实时数据库安全规则保护的身份验证，客户端授权和服务器端授权之间的区别。

先决条件
1. Firebase Web 项目。自由！
2. 一个 IDE。什么是 IDE？试试 Cloud9 。自由！
3. Github，Google，Facebook 和 Twitter 帐户。自由！
4. 两个电子邮件帐户自由！
配置 IDE
1. 创建一个 HTML5 项目。
2. 安装 Firebase 工具。npm install -g firebase-tools
3. 使用 Firebase Tools 命令行，登录 Firebase 项目。firebase login --no-localhost
4. 使用 Firebase Tools 命令行，在当前目录中设置 Firebase 项目。firebase init
5. 将这组文件和文件夹克隆到 IDE。git clone https://github.com/rhroyston/firebase-auth.git
6. 使用 Firebase Tools 命令行，将 IDE 项目推送到 Firebase 项目。firebase deploy
7. 在浏览器中查看 Firebase 项目。任何破损的图像或错误？在下面轻松修复。
8. 你可能需要在所有 JS，CSS 和所有 HTML 文件中更新 href，src 和 background: url，具体取决于你的 Web 主机文件夹结构。
  1. 使用查找功能搜索 href 和 src，并根据需要进行更新。
  2. 浏览器控制台将显示任何剩余的错误路径错误
  3. 注意 script.js 行 781 privateLink.href = "../firebase-auth/private" .. 似乎是必需的。
  4. 从 Firebase 托管中正确呈现所有页面（没有损坏的图像或控制台错误）后，继续。
配置 Firebase
1. 启用所有 6 种形式的身份验证。按照配置社交媒体网站设置的说明进行操作。
2. 自定义电子邮件操作处理程序 URL 以指向你的 Firebase Web 应用程序 URL +’/ ack’，例如 https://my-app-1234/ack。

登录 Web 应用程序

使用 oAuth 提供程序登录。
在浏览器命令行中，使用公开的 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 身份验证和授权演示演练

使用每个 oAuth 提供程序登录
1. 请注意，更新电子邮件地址或密码选项不在你的帐户页面中。
2. 请注意侧边菜单抽屉中的任何额外链接？
3. 尝试删除你的帐户。怎么了？
注册为基于密码的用户
1. 你收到验证邮件吗？
2. 你是否可以在点击验证链接之前查看私人数据？
3. 你能改变密码吗？
4. 你能改变你的电子邮件地址吗？
5. 你可以通过单击电子邮件更改通知电子邮件 revokation 链接来撤消电子邮件更改吗？
登出
1. 侧边菜单抽屉中有哪些链接？
2. 你可以访问私人数据吗？
3. 你能查看私人数据吗？