获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

Introdução ao Firebase Authentication em sites

Você pode usar o Firebase Authentication para permitir que os usuários façam login no seu aplicativo usando um ou mais métodos de login, incluindo login por endereço de e-mail e senha, e provedores de identidade federada, como Login do Google e Login do Facebook. Este tutorial é uma introdução ao Firebase Authentication mostrando como adicionar o login de endereço de e-mail e senha ao seu aplicativo.

Adicionar e inicializar o SDK de autenticação

  1. Se ainda não o fez, instale o Firebase JS SDK e inicialize o Firebase .

  2. Adicione o SDK JS do Firebase Authentication e inicialize o Firebase Authentication:

Web version 9

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Web version 8

import firebase from "firebase/app";
import "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(Opcional) Protótipo e teste com o Firebase Local Emulator Suite

Antes de falar sobre como seu aplicativo autentica os usuários, vamos apresentar um conjunto de ferramentas que você pode usar para criar protótipos e testar a funcionalidade de autenticação: Firebase Local Emulator Suite. Se você estiver decidindo entre técnicas e provedores de autenticação, experimentar diferentes modelos de dados com dados públicos e privados usando Authentication e Firebase Security Rules ou criar protótipos de designs de IU de login, poder trabalhar localmente sem implantar serviços ao vivo pode ser uma ótima ideia .

Um emulador de autenticação faz parte do Local Emulator Suite, que permite que seu aplicativo interaja com o conteúdo e a configuração do banco de dados emulado, bem como opcionalmente com seus recursos de projeto emulados (funções, outros bancos de dados e regras de segurança).

Usar o emulador de autenticação envolve apenas algumas etapas:

  1. Adicionando uma linha de código à configuração de teste do seu aplicativo para se conectar ao emulador.
  2. A partir da raiz do diretório do projeto local, executando firebase emulators:start .
  3. Usando a IU do Local Emulator Suite para prototipagem interativa ou a API REST do emulador de autenticação para testes não interativos.

Um guia detalhado está disponível em Conecte seu aplicativo ao emulador de autenticação . Para obter mais informações, consulte a introdução do Local Emulator Suite .

Agora vamos continuar com como autenticar usuários.

Inscreva-se novos usuários

Crie um formulário que permita que novos usuários se registrem no seu aplicativo usando o endereço de e-mail e uma senha. Quando um usuário preencher o formulário, valide o endereço de e-mail e a senha fornecidos pelo usuário e, em seguida, passe-os para o método createUserWithEmailAndPassword :

Web version 9

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

Web version 8

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

Fazer login de usuários existentes

Crie um formulário que permita que os usuários existentes entrem usando seu endereço de e-mail e senha. Quando um usuário preencher o formulário, chame o método signInWithEmailAndPassword :

Web version 9

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

Web version 8

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

Defina um observador de estado de autenticação e obtenha dados do usuário

Para cada página do seu aplicativo que precisa de informações sobre o usuário conectado, anexe um observador ao objeto de autenticação global. Esse observador é chamado sempre que o estado de entrada do usuário é alterado.

Anexe o observador usando o método onAuthStateChanged . Quando um usuário entra com êxito, você pode obter informações sobre o usuário no observador.

Web version 9

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Web version 8

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Próximos passos

Saiba como adicionar suporte para outros provedores de identidade e contas de convidados anônimos: