Como 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:

Como 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.

Como 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
    

Como testar o 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
    

Como 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.

Como ver o 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.