Autenticar usuários com o Firebase

ID da região

O REGION_ID é um código abreviado que o Google atribui com base na região que você selecionou ao criar o aplicativo. O código não corresponde a um país ou estado, ainda que alguns IDs de região sejam semelhantes aos códigos de país e estado geralmente usados. Para apps criados após fevereiro de 2020, o REGION_ID.r está incluído nos URLs do App Engine. Para apps existentes criados antes dessa data, o ID da região é opcional no URL.

Saiba mais sobre IDs de região.

Adicione um fluxo de login do usuário ao seu serviço da Web que usa o Firebase Authentication.

Nesta etapa do guia, você atualiza o serviço da Web para autenticar usuários e para recuperar e exibir as informações de um usuário depois que elas são autenticadas. Para essa etapa, os tempos de solicitação do site ainda serão globais, e não específicos do usuário.

Antes de começar

Se você concluiu todas as etapas anteriores deste guia, pule esta seção. Caso contrário, conclua um dos procedimentos abaixo:

Adicionar métodos de autenticação do Firebase

O Firebase oferece métodos e variáveis do JavaScript que você pode usar para configurar o comportamento de login do seu serviço da Web. Para este serviço da Web, inclua uma função de saída, uma variável que configure a IU de login e uma função que controle o que muda quando um usuário faz login ou logout.

Para adicionar os comportamentos necessários para um fluxo de autenticação, substitua o método listener de evento atual do arquivo static/script.js pelo seguinte código:

window.addEventListener('load', function () {
  document.getElementById('sign-out').onclick = function () {
    firebase.auth().signOut();
  };

  // FirebaseUI config.
  var uiConfig = {
    signInSuccessUrl: '/',
    signInOptions: [
      // Comment out any lines corresponding to providers you did not check in
      // the Firebase console.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      //firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      //firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      //firebase.auth.GithubAuthProvider.PROVIDER_ID,
      //firebase.auth.PhoneAuthProvider.PROVIDER_ID

    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>'
  };

  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      // User is signed in, so display the "sign out" button and login info.
      document.getElementById('sign-out').hidden = false;
      document.getElementById('login-info').hidden = false;
      console.log(`Signed in as ${user.displayName} (${user.email})`);
      user.getIdToken().then(function (token) {
        // Add the token to the browser's cookies. The server will then be
        // able to verify the token against the API.
        // SECURITY NOTE: As cookies can easily be modified, only put the
        // token (which is verified server-side) in a cookie; do not add other
        // user information.
        document.cookie = "token=" + token;
      });
    } else {
      // User is signed out.
      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // Show the Firebase login button.
      ui.start('#firebaseui-auth-container', uiConfig);
      // Update the login state indicators.
      document.getElementById('sign-out').hidden = true;
      document.getElementById('login-info').hidden = true;
      // Clear the token cookie.
      document.cookie = "token=";
    }
  }, function (error) {
    console.log(error);
    alert('Unable to log in: ' + error)
  });
});

O método onAuthStateChanged(), que controla as alterações quando um usuário faz login ou logout, armazena o token de ID do usuário como um cookie. Esse token de código é exclusivo, o Firebase o gera automaticamente quando um usuário faz login com sucesso e ele é usado pelo servidor para autenticar o usuário.

Atualizar o serviço da Web para usar tokens

Agora, verifique os usuários no servidor usando seu token de código do Firebase exclusivo e, em seguida, descriptografe o token deles para que você possa imprimir os dados de volta para eles.

Para usar o token de código do Firebase, siga estas etapas:

  1. Recupere, verifique e descriptografe o token no método root do arquivo main.py:

    from flask import Flask, render_template, request
from google.auth.transport import requests
from google.cloud import datastore
import google.oauth2.id_token

firebase_request_adapter = requests.Request()
@app.route("/")
def root():
    # Verify Firebase auth.
    id_token = request.cookies.get("token")
    error_message = None
    claims = None
    times = None

    if id_token:
        try:
            # Verify the token against the Firebase Auth API. This example
            # verifies the token on each page load. For improved performance,
            # some applications may wish to cache results in an encrypted
            # session store (see for instance
            # http://flask.pocoo.org/docs/1.0/quickstart/#sessions).
            claims = google.oauth2.id_token.verify_firebase_token(
                id_token, firebase_request_adapter
            )
        except ValueError as exc:
            # This will be raised if the token is expired or any other
            # verification checks fail.
            error_message = str(exc)

        # Record and fetch the recent times a logged-in user has accessed
        # the site. This is currently shared amongst all users, but will be
        # individualized in a following step.
        store_time(datetime.datetime.now(tz=datetime.timezone.utc))
        times = fetch_times(10)

    return render_template(
        "index.html", user_data=claims, error_message=error_message, times=times
    )

  2. Verifique se o arquivo requirements.txt inclui todas as dependências necessárias:

    Flask==3.0.0
google-cloud-datastore==2.15.1
google-auth==2.17.3
requests==2.28.2

Testar seu serviço da Web

Teste seu serviço da Web executando-o localmente em um ambiente virtual:

  1. Execute os comandos a seguir no diretório principal do seu projeto para instalar novas dependências e executar o serviço da Web. Se você não configurou um ambiente virtual para testes locais, consulte Como testar o serviço da Web.

    pip install -r requirements.txt
python main.py

  2. Digite o seguinte endereço no navegador da Web para ver o serviço da Web:

    http://localhost:8080

Implantar o serviço da Web

Agora que a autenticação está funcionando localmente, é possível reimplantar o serviço da Web no App Engine.

Execute o seguinte comando no diretório raiz do projeto, em que o arquivo app.yaml está localizado:

gcloud app deploy

Todo o tráfego é roteado automaticamente para a nova versão implantada.

Para mais informações sobre como gerenciar versões, consulte Como gerenciar serviços e versões.

Ver seu serviço

Para iniciar rapidamente o navegador e acessar o serviço da Web em https://PROJECT_ID.REGION_ID.r.appspot.com, execute o seguinte comando:

gcloud app browse

Próximas etapas

Agora que você configurou a autenticação do usuário, está pronto para aprender como atualizar o serviço da Web a fim de personalizar dados para usuários autenticados.

Anterior
Adicionar Firebase
Próxima
Personalizar dados