Primeros pasos con la autenticación de base de fuego

Cómo crear un usuario basado en contraseña

Puede usar Firebase Authentication para permitir que sus usuarios se autentiquen con Firebase usando sus direcciones de correo electrónico y contraseñas, y para administrar las cuentas basadas en contraseñas de su aplicación.

En este ejemplo, utilizamos estos pasos para configurarlo para nuestro proyecto de Android que se basa en JavaScript.

Pero antes de hacerlo, esto es lo que debe hacerse antes:

  1. Agregue Firebase a su proyecto de JavaScript.
  2. Si aún no ha conectado su aplicación a su proyecto de Firebase, hágalo desde la consola de Firebase.
  3. Habilite el inicio de sesión con correo electrónico/contraseña: En Firebase console, abra la sección Auth. En la pestaña Método de inicio de sesión, habilite el método de inicio de sesión con correo electrónico/contraseña y haga clic en Guardar.

Se requieren 2 métodos de autenticación para crear un usuario basado en contraseña con displayName, a saber, .createUserWithEmailAndPassword y .updateProfile. Anidé este último y creé una sola función que activa ambos métodos para facilitar su uso.

  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 + '.');
  }

Instalación o configuración

Sinopsis

Una demostración completamente funcional de la autenticación web de Firebase v3 se puede ver [aquí] (http://rack.pub/firebase-auth). Inicie sesión con Facebook, Github, Google, Twitter, cuentas anónimas y basadas en contraseña. El código, disponible en Github, es fácil de leer y seguir y está bien documentado. La atención se centra en el sistema de autenticación completamente funcional.

A los usuarios basados ​​en contraseña se les envía un enlace de validación. También pueden cambiar su dirección de correo electrónico y contraseña; ambos eventos envían un correo electrónico de verificación como medida de seguridad adicional.

Por último, se demuestra la diferencia entre la autenticación, la autorización del lado del cliente y la autorización del lado del servidor asegurada a través de las reglas de seguridad de la base de datos en tiempo real de Firebase.

  1. Requisitos previos

    1. A Firebase Web project. FREE!
    2. An IDE. What’s an IDE? Try Cloud9. FREE!
    3. A Github, Google, Facebook, and Twitter account. FREE!
    4. Two email accounts. FREE!
  2. Configura tu IDE 2. Create an HTML5 project. 3. Install Firebase Tools. npm install -g firebase-tools 4. Using Firebase Tools command line, login to your Firebase project. firebase login --no-localhost 5. Using Firebase Tools command line, setup a Firebase project in the current directory. firebase init 6. Clone this set of files and folders to your IDE. git clone https://github.com/rhroyston/firebase-auth.git 7. Using Firebase Tools command line, push your IDE project to your Firebase project. firebase deploy 8. View Firebase project in your browser. Any broken images or errors? Easy fix below. 8. You may need to update href, src, and background: url in all JS, CSS, and all HTML files depending on your Web hosting folder structure . 1. Use Find feature to search for both href and src and update as necessary. 2. Browser Console will display any remaining incorrect paths errors. 3. Note script.js line 781 privateLink.href = "../firebase-auth/private" the .. seems to be required. 4. Once all pages render properly from Firebase Hosting (no broken images or console errors), continue.

  3. Configurar base de fuego

    1. Enable all 6 forms of authentication. Follow the instructions on configuring social media site settings.
    2. Customize the Email Action Handler URL to point to your Firebase Web app URL + ‘/ack’, e.g. https://my-app-1234/ack.
  4. Iniciar sesión en la aplicación web

    1. Login using an oAuth provider.
    2. From the browser command line, use the exposed demo.update('mynode','myKey','myValue') method to add secure markup to your Realtime Database.
      1. A success message will show up in your browser console.
      2. You may need to update the href path to match your folder structure.
    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>");
    

Tutorial de demostración de autenticación y autorización de Firebase v3

  1. Inicie sesión con cada proveedor de oAuth

    1. Notice that updating email address or password options are not present in your Account page.
    2. Notice any extra links in the side menu drawer?
    3. Try Deleting your account. What Happens?
  2. Registrarse como usuario basado en contraseña

    1. Did you get a verification email?
    2. Can you view private data until you clicked the verification link?
    3. Can you change your password?
    4. Can you change your email address?
    5. Can you undo the email change by clicking the email change notification email revokation link?
  3. Cerrar sesión

    1. What links are present in the side menu drawer?
    2. Can you access private data?
    3. Can you view private data?