Como autenticar usuários no App Engine usando o Firebase

Como clonar o app de amostra

Para fazer o download do exemplo na máquina local:

1. Clone o repositório de aplicativos de exemplo na máquina local:

   git clone https://github.com/GoogleCloudPlatform/python-docs-samples.git

   Também é possível fazer o download do exemplo como um arquivo zip e extraí-lo.

2. Navegue até o diretório que contém o código de exemplo:

   cd python-docs-samples/appengine/standard/firebase/firenotes
   

   Para configurar o FirebaseUI e ativar provedores de identidade:

3. Siga as seguintes etapas para adicionar o Firebase ao seu app:

   1. Crie um projeto do Firebase no Console do Firebase.
      • Se você não tiver um projeto do Firebase atual, clique em Adicionar projeto e insira um nome de projeto atual do Google Cloud ou um novo nome de projeto.
      • Se você tiver um projeto do Firebase que gostaria de usar, selecione-o no console.
   2. Na página de visão geral do projeto, clique em Adicionar o Firebase ao seu aplicativo da Web. Se seu projeto já tiver um aplicativo, selecione Adicionar aplicativo na página de visão geral do projeto.

   3. Use a seção Initialize Firebase do snippet de código personalizado do seu projeto para preencher a seguinte seção do arquivo frontend/main.js:

      appengine/standard/firebase/firenotes/frontend/main.js

      Ver no GitHub
      // Obtain the following from the "Add Firebase to your web app" dialogue
      // Initialize Firebase
      var config = {
        apiKey: "<API_KEY>",
        authDomain: "<PROJECT_ID>.firebaseapp.com",
        databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
        projectId: "<PROJECT_ID>",
        storageBucket: "<BUCKET>.appspot.com",
        messagingSenderId: "<MESSAGING_SENDER_ID>"
      };

4. No arquivo frontend/main.js, configure o widget de login do FirebaseUI selecionando quais provedores você quer oferecer aos usuários.

   appengine/standard/firebase/firenotes/frontend/main.js

   Ver no GitHub
   // Firebase log-in widget
   function configureFirebaseLoginWidget() {
     var uiConfig = {
       'signInSuccessUrl': '/',
       'signInOptions': [
         // Leave the lines as is for the providers you want to offer your users.
         firebase.auth.GoogleAuthProvider.PROVIDER_ID,
         firebase.auth.FacebookAuthProvider.PROVIDER_ID,
         firebase.auth.TwitterAuthProvider.PROVIDER_ID,
         firebase.auth.GithubAuthProvider.PROVIDER_ID,
         firebase.auth.EmailAuthProvider.PROVIDER_ID
       ],
       // Terms of service url
       'tosUrl': '<your-tos-url>',
     };
   
     var ui = new firebaseui.auth.AuthUI(firebase.auth());
     ui.start('#firebaseui-auth-container', uiConfig);
   }

5. Ative os provedores que você escolheu manter no Console do Firebase clicando em Autenticação > Método de login. Em seguida, em Provedores de login, passe o cursor sobre um provedor e clique no ícone de lápis.

   

   1. Alterne o botão Ativar e, para provedores de identidade de terceiros, insira o ID do provedor e o secret do site do provedor para desenvolvedores. A documentação do Firebase contém instruções específicas nas seções "Antes de começar" dos guias do Facebook, do Twitter e do GitHub. Depois de ativar um provedor, clique em Salvar.

      

   2. No Console do Firebase, em Domínios autorizados, clique em Adicionar domínio e insira o domínio do aplicativo do App Engine no seguinte formato:

      [PROJECT_ID].appspot.com
      

      Não inclua http:// antes do nome do domínio.

Como instalar dependências

1. Navegue até o diretório backend e conclua a configuração do aplicativo:

   cd backend/
   

2. Instale as dependências em um diretório lib do projeto:

   pip install -t lib -r requirements.txt
   

3. Em appengine_config.py, o método vendor.add() registra as bibliotecas no diretório lib.

Como executar o aplicativo localmente

Para executar o aplicativo localmente, use o servidor de desenvolvimento local do App Engine:

1. Adicione o seguinte URL como backendHostURL em main.js:

   http://localhost:8081

2. Navegue até o diretório raiz do aplicativo. Em seguida, inicie o servidor de desenvolvimento:

   dev_appserver.py frontend/app.yaml backend/app.yaml
   

3. Acesse http://localhost:8080/ em um navegador da Web.

Como autenticar usuários no servidor

Agora que você configurou um projeto e inicializou um aplicativo para desenvolvimento, é possível percorrer o código para entender como recuperar e verificar os tokens de código do Firebase no servidor.

Como receber um token de código do Firebase

A primeira etapa na autenticação do lado do servidor é recuperar um token de acesso para verificar. As solicitações de autenticação são tratadas com o listener onAuthStateChanged() do Firebase:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    $('#logged-out').hide();
    var name = user.displayName;

    /* If the provider gives a display name, use the name for the
    personal welcome message. Otherwise, use the user's email. */
    var welcomeName = name ? name : user.email;

    user.getIdToken().then(function(idToken) {
      userIdToken = idToken;

      /* Now that the user is authenicated, fetch the notes. */
      fetchNotes();

      $('#user').text(welcomeName);
      $('#logged-in').show();

    });

  } else {
    $('#logged-in').hide();
    $('#logged-out').show();

  }
});

Quando um usuário está conectado, o método getToken() do Firebase no callback retorna um token de ID do Firebase na forma de um JSON Web Token (JWT).

Como verificar tokens no servidor

Depois que um usuário faz login, o serviço de front-end busca qualquer anotação atual no notebook do usuário por meio de uma solicitação AJAX GET. Isso requer autorização para acessar os dados do usuário, de modo que o JWT seja enviado no cabeçalho Authorization da solicitação usando o esquema Bearer:

// Fetch notes from the backend.
function fetchNotes() {
  $.ajax(backendHostUrl + '/notes', {
    /* Set header for the XMLHttpRequest to get data from the web server
    associated with userIdToken */
    headers: {
      'Authorization': 'Bearer ' + userIdToken
    }
  })

Antes que o cliente possa acessar os dados do servidor, o servidor precisa verificar se o token está assinado pelo Firebase. É possível verificar esse token usando a Biblioteca de autenticação do Google para Python. Use a função verify_firebase_token da biblioteca de autenticação para verificar o token do portador e extrair as declarações:

id_token = request.headers["Authorization"].split(" ").pop()
claims = google.oauth2.id_token.verify_firebase_token(
    id_token, HTTP_REQUEST, audience=os.environ.get("GOOGLE_CLOUD_PROJECT")
)
if not claims:
    return "Unauthorized", 401

Cada provedor de identidade envia um conjunto diferente de declarações, mas cada um tem pelo menos uma declaração sub com um ID de usuário exclusivo e uma declaração que fornece algumas informações de perfil, como name ou email, que podem ser usadas para personalizar a experiência do usuário no seu aplicativo.

Como gerenciar dados do usuário no Datastore

Depois de autenticar um usuário, você precisa armazenar os dados correspondentes para que isso persista após o término de uma sessão de login. Nas seções a seguir, explicamos como armazenar uma anotação como uma entidade do Datastore e segregar entidades por ID de usuário.

Como criar entidades para armazenar dados de usuário

É possível criar uma entidade no Datastore declarando uma classe de modelo NDB com determinadas propriedades, como números inteiros ou strings. O Datastore indexa entidades por tipo. No caso do Firenotes, o tipo de cada entidade é Note. Para fins de consulta, cada Note é armazenado com um nome de chave, que é o ID de usuário conseguido da declaração sub na seção anterior.

No código a seguir, demonstramos como definir propriedades de uma entidade, com o método construtor para a classe de modelo quando a entidade é criada e por meio da atribuição de propriedades individuais após a criação:

data = request.get_json()

# Populates note properties according to the model,
# with the user ID as the key name.
note = Note(parent=ndb.Key(Note, claims["sub"]), message=data["message"])

# Some providers do not provide one of these so either can be used.
note.friendly_id = claims.get("name", claims.get("email", "Unknown"))

Para gravar o Note recém-criado no Datastore, chame o método put() no objeto note.

Como recuperar dados de usuário

Para recuperar dados do usuário associados a um ID de usuário específico, use o método query() do NDB para pesquisar no banco de dados as anotações no mesmo grupo de entidades. As entidades no mesmo grupo ou caminho do ancestral têm o mesmo nome de chave, que, nesse caso, é o ID de usuário.

def query_database(user_id):
    """Fetches all notes associated with user_id.

    Notes are ordered them by date created, with most recent note added
    first.
    """
    ancestor_key = ndb.Key(Note, user_id)
    query = Note.query(ancestor=ancestor_key).order(-Note.created)
    notes = query.fetch()

    note_messages = []

    for note in notes:
        note_messages.append(
            {
                "friendly_id": note.friendly_id,
                "message": note.message,
                "created": note.created,
            }
        )

    return note_messages

Com isso, você pode buscar os dados da consulta e exibir as anotações no cliente:

// Fetch notes from the backend.
function fetchNotes() {
  $.ajax(backendHostUrl + '/notes', {
    /* Set header for the XMLHttpRequest to get data from the web server
    associated with userIdToken */
    headers: {
      'Authorization': 'Bearer ' + userIdToken
    }
  }).then(function(data){
    $('#notes-container').empty();
    // Iterate over user data to display user's notes from database.
    data.forEach(function(note){
      $('#notes-container').append($('<p>').text(note.message));
    });
  });
}

Como implantar o app

Você integrou com êxito o Firebase Authentication ao aplicativo do App Engine. Para ver o aplicativo em execução em um ambiente de produção real, siga estas etapas:

1. Altere o URL do host de back-end em main.js para https://backend-dot-[PROJECT_ID].appspot.com. Substitua [PROJECT_ID] pelo ID do projeto:

2. Implante o aplicativo usando a interface da linha de comando do SDK Google Cloud:

   gcloud app deploy backend/index.yaml frontend/app.yaml backend/app.yaml
   

3. Veja o aplicativo ao vivo em https://[PROJECT_ID].appspot.com.