Aan de slag met Firebase Authentication op websites

U kunt Firebase Authentication gebruiken om gebruikers in staat te stellen zich aan te melden bij uw app via een of meer aanmeldingsmethoden, waaronder aanmelding via een e-mailadres of wachtwoord, en via providers met een gedeelde identiteit, zoals Google Sign-in en Facebook Login. Deze handleiding helpt u aan de slag te gaan met Firebase Authentication door te laten zien hoe u emailadres- en wachtwoordaanmelding toevoegt aan uw app.

Sluit uw app aan op Firebase

Installeer de Firebase SDK. Zorg ervoor dat u de configuratiecode in uw webpagina plakt zoals beschreven.

(Optioneel) Prototype en test met Firebase Local Emulator Suite

Voordat we het hebben over hoe uw app gebruikers authentiseert, introduceren we een set hulpmiddelen die u kunt gebruiken om een prototype te maken en de authenticatiefunctionaliteit te testen:Firebase Local Emulator Suite. Als u een keuze maakt tussen authenticatie technieken en aanbieders, het uitproberen van verschillende datamodellen met openbare en prive-gegevens met behulp van Authenticatie en Firebase Security Rules, of het prototypen van sign-in UI ontwerpen, in staat zijn om lokaal te werken zonder inzet van live services kan een geweldig idee zijn.

Een Authenticatie emulator is onderdeel van de Local Emulator Suite, die uw app in staat stelt om te communiceren met geëmuleerde database-inhoud en config, evenals optioneel uw geëmuleerde project middelen (functies, andere databases, en beveiligingsregels). Merk op dat de Local Emulator Suite nog geen ondersteuning biedt voor geëmuleerde opslag.

Het gebruik van de Authenticatie-emulator omvat slechts een paar stappen:

1. Het toevoegen van een regel code aan de test config van uw app om verbinding te maken met de emulator.
2. Vanuit de root van uw lokale project directory, het uitvoeren van firebase emulators:start.
3. Het gebruik van de Local Emulator Suite UI voor interactieve prototyping, of deAuthentication emulator REST API voor niet-interactieve testen.

Een gedetailleerde handleiding is beschikbaar op Sluit uw app aan op de Authenticatie-emulator.Voor meer informatie, zie de Local Emulator Suite introductie.

Nu laten we verder gaan met hoe gebruikers te authenticeren.

Nieuwe gebruikers aanmelden

Maak een formulier waarmee nieuwe gebruikers zich kunnen registreren bij uw app met behulp van hun e-mailadres en een wachtwoord. Wanneer een gebruiker het formulier invult, valideert u het e-mailadres en wachtwoord van de gebruiker en geeft u ze door aan de methodecreateUserWithEmailAndPassword:

Intekenen bestaande gebruikers

Maak een formulier waarmee bestaande gebruikers zich kunnen aanmelden met hun e-mailadres en wachtwoord. Wanneer een gebruiker het formulier invult, roept u de methodesignInWithEmailAndPassword op:

Set an authentication state observer and get user data

Voor elk van de pagina’s van uw app die informatie over de aangemelde gebruiker nodig hebben, koppelt u een observer aan het globale authenticatie-object. Deze waarnemer wordt aangeroepen wanneer de aanmeldstatus van de gebruiker verandert.

Breng de waarnemer aan met de onAuthStateChanged methode. Wanneer een gebruiker zich succesvol aanmeldt, kunt u informatie over de gebruiker in de waarnemer krijgen.

Leer hoe u ondersteuning voor andere identiteitsproviders en anonieme gastaccounts kunt toevoegen:

• Google Sign-in
• Facebook Login
• Twitter Login
• GitHub Login
• Anonieme sign-in