firebase-authenticationfirebase-authentication入门


备注

本节概述了firebase身份验证的内容以及开发人员可能希望使用它的原因。

它还应该提到firebase-authentication中的任何大型主题,并链接到相关主题。由于firebase-authentication的文档是新的,因此您可能需要创建这些相关主题的初始版本。

如何创建基于密码的用户

您可以使用Firebase身份验证让您的用户使用他们的电子邮件地址和密码对Firebase进行身份验证,并管理您应用的基于密码的帐户。

在此示例中,我们使用这些步骤为我们的基于JavaScript的Android项目设置它。

但在此之前,这是以前需要完成的事情:

  1. 将Firebase添加到JavaScript项目中。
  2. 如果尚未将应用程序连接到Firebase项目,请从Firebase控制台执行此操作。
  3. 启用电子邮件/密码登录:在Firebase控制台中,打开“身份验证”部分。在“登录方法”选项卡上,启用“电子邮件/密码登录”方法,然后单击“保存”。

使用displayName创建基于密码的用户需要2个auth方法,即.createUserWithEmailAndPassword和.updateProfile。我已经嵌套后者并创建了一个函数,它可以触发这两种方法以方便使用。

  function registerPasswordUser(email,displayName,password,photoURL){
    var user = null;
    //NULLIFY EMPTY ARGUMENTS
    for (var i = 0; i < arguments.length; i++) {
      arguments[i] = arguments[i] ? arguments[i] : null;
    }
    auth.createUserWithEmailAndPassword(email, password)
    .then(function () {
      user = auth.currentUser;
      user.sendEmailVerification();
    })
    .then(function () {
      user.updateProfile({
        displayName: displayName,
        photoURL: photoURL
      });
    })
    .catch(function(error) {
      console.log(error.message,7000);
    });
    console.log('Validation link was sent to ' + email + '.');
  }
 

安装或设置

概要

在此处查看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

    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文件中更新hrefsrcbackground: url ,具体取决于您的Web主机文件夹结构。
      1. 使用“查找”功能搜索hrefsrc 并根据需要进行更新。
      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. 你能查看私人数据吗?