firebase-authenticationAan de slag met firebase-authenticatie


Opmerkingen

Deze sectie biedt een overzicht van wat firebase-authenticatie is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook alle grote onderwerpen binnen firebase-authenticatie vermelden en een link naar de gerelateerde onderwerpen bevatten. Aangezien de documentatie voor firebase-authenticatie nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

Hoe een op een wachtwoord gebaseerde gebruiker te maken

U kunt Firebase-verificatie gebruiken om uw gebruikers te laten authenticeren met Firebase met behulp van hun e-mailadressen en wachtwoorden, en om de op wachtwoorden gebaseerde accounts van uw app te beheren.

In dit voorbeeld gebruiken we deze stappen om het in te stellen voor ons Android-project dat is gebaseerd op JavaScript.

Maar voordat u dit doet, moet u dit eerst doen:

  1. Voeg Firebase toe aan uw JavaScript-project.
  2. Als u uw app nog niet hebt verbonden met uw Firebase-project, doet u dit via de Firebase-console.
  3. Aanmelden via e-mail / wachtwoord inschakelen: open in de Firebase-console de sectie Auth. Schakel op het tabblad Aanmeldmethode de aanmeldmethode voor e-mail / wachtwoord in en klik op Opslaan.

Er zijn 2 verificatiemethoden vereist om een wachtwoordgebaseerde gebruiker met displayName te maken, namelijk .createUserWithEmailAndPassword en .updateProfile. Ik heb de laatste genest en een enkele functie gecreëerd die beide methoden activeert voor gebruiksgemak.

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

Installatie of instellingen

Korte inhoud

Een volledig functionele demo van Firebase v3 webverificatie die hier kan worden bekeken. Log in met Facebook, Github, Google, Twitter, op wachtwoord gebaseerde en anonieme accounts. De code, beschikbaar op Github , is gemakkelijk te lezen en te volgen en is goed gedocumenteerd. De focus ligt op het volledig functionele authenticatiesysteem.

Op wachtwoord gebaseerde gebruikers ontvangen een validatielink. Ze kunnen ook hun e-mailadres en wachtwoord wijzigen. Beide evenementen verzenden een verificatie-e-mail als extra beveiligingsmaatregel.

Ten slotte wordt het verschil aangetoond tussen authenticatie, client-side autorisatie en server-side autorisatie beveiligd via Firebase Realtime Database Security Rules.

  1. voorwaarden

    1. Een Firebase Web-project. VRIJ!
    2. Een IDE. Wat is een IDE? Probeer Cloud9 . VRIJ!
    3. Een Github-, Google-, Facebook- en Twitter-account. VRIJ!
    4. Twee e-mailaccounts. VRIJ!
  2. Configureer uw IDE

    1. Maak een HTML5-project.
    2. Installeer Firebase Tools. npm install -g firebase-tools
    3. Meld u aan met uw Firebase-project via de opdrachtregel van Firebase Tools. firebase login --no-localhost
    4. Gebruik de opdrachtregel van Firebase Tools om een Firebase-project in de huidige map op te zetten. firebase init
    5. Kloon deze set bestanden en mappen naar uw IDE. git clone https://github.com/rhroyston/firebase-auth.git
    6. Gebruik de opdrachtregel van Firebase Tools om uw IDE-project naar uw Firebase-project te verplaatsen. firebase deploy
    7. Bekijk Firebase-project in uw browser. Eventuele kapotte afbeeldingen of fouten? Gemakkelijke oplossing hieronder.
    8. Mogelijk moet u href , src en background: url in alle JS-, CSS- en HTML-bestanden bijwerken, afhankelijk van de structuur van uw webhostmappen.
      1. Gebruik de zoekfunctie om zowel href als src en indien nodig bij te werken.
      2. Browser Console geeft resterende fouten in onjuiste paden weer.
      3. Opmerking script.js regel 781 privateLink.href = "../firebase-auth/private" de .. lijkt verplicht te zijn.
      4. Zodra alle pagina's correct worden weergegeven vanuit Firebase Hosting (geen gebroken afbeeldingen of consolefouten), gaat u verder.
  3. Firebase configureren

    1. Schakel alle 6 vormen van authenticatie in. Volg de instructies voor het configureren van site-instellingen voor sociale media.
    2. Pas de URL van de Email Action Handler aan zodat deze verwijst naar de URL van uw Firebase-webapp + '/ ack', bijvoorbeeld https://my-app-1234/ack .
  4. Log in op de web-app

    1. Meld u aan met een oAuth-provider.
    2. Gebruik vanaf de opdrachtregel van de browser de zichtbare demo.update('mynode','myKey','myValue') om veilige markup toe te voegen aan uw Realtime-database.
      1. Er verschijnt een succesbericht in uw browserconsole.
      2. Mogelijk moet u het href pad bijwerken zodat het overeenkomt met uw mapstructuur.
    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 Authenticatie en autorisatie Demo Walkthrough

  1. Meld u aan met elke oAuth-provider

    1. Merk op dat het bijwerken van e-mailadres of wachtwoordopties niet aanwezig is op uw accountpagina.
    2. Ziet u extra links in de zijmenulade?
    3. Probeer uw account te verwijderen. Wat gebeurt er?
  2. Registreer als een op wachtwoord gebaseerde gebruiker

    1. Heb je een verificatie-e-mail ontvangen?
    2. Kun je privégegevens bekijken totdat je op de verificatielink hebt geklikt?
    3. Kun je je wachtwoord wijzigen?
    4. Kun je je e-mailadres wijzigen?
    5. Kunt u de e-mailwijziging ongedaan maken door te klikken op de link e-mailwijziging e-mailherroepingslink?
  3. Uitloggen

    1. Welke links zijn er in de zijmenulade?
    2. Heb je toegang tot privégegevens?
    3. Kun je privégegevens bekijken?