Adicione o Firebase ao seu serviço Web

ID da região

O REGION_ID é um código abreviado que a Google atribui com base na região que seleciona quando cria a sua app. O código não corresponde a um país ou uma província, embora alguns IDs de regiões possam parecer semelhantes aos códigos de países e províncias usados frequentemente. Para apps criadas após fevereiro de 2020, REGION_ID.r está incluído nos URLs do App Engine. Para apps existentes criadas antes desta data, o ID da região é opcional no URL.

Saiba mais acerca dos IDs de regiões.

OK

Nota: se estiver a implementar um novo serviço Web Python no Google Cloud, recomendamos que comece a usar o Cloud Run.

Adicione o Firebase ao seu Google Cloud projeto, configure as definições de autenticação e, em seguida, adicione o Firebase ao seu serviço Web.

A adição do Firebase ao seu serviço Web permite-lhe autenticar utilizadores para que possa oferecer a cada utilizador uma experiência personalizada.

Antes de começar

Se tiver concluído todos os passos anteriores neste guia, ignore esta secção. Caso contrário, conclua uma das seguintes opções:

• Comece por Criar uma app Python 3 e conclua todos os passos anteriores a este.

• Se já tiver um Google Cloud projeto, pode continuar transferindo uma cópia do serviço Web:

  1. Transfira o repositório da aplicação de exemplo através do Git:

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

     Em alternativa, pode transferir o exemplo como um ficheiro ZIP e, de seguida, extraí-lo.

  2. Navegue para o diretório que contém uma cópia dos ficheiros do passo anterior:

     cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-1
     

Adicione o Firebase ao seu Google Cloud projeto

Para usar a autenticação do Firebase com o seu serviço Web, adicione o Firebase ao seu Google Cloud projeto e configure as definições de autenticação.

1. Adicione o Firebase ao seu Google Cloud projeto existente através da ferramenta Adicionar projeto na consola do Firebase.

   Também pode optar por usar uma conta do Firebase com um nome diferente, não associada ao seu projeto Google Cloud existente.

2. Ative os fornecedores de início de sessão de autenticação na consola do Firebase. Para este serviço Web, vai ativar os fornecedores de início de sessão Email/Palavra-passe e Google:

   1. Clique em Compilar > Autenticação > Método de início de sessão.

   2. Em Fornecedores de início de sessão, selecione Email/palavra-passe.

   3. Ative o botão Ativar para usar a autenticação por email e palavra-passe, e clique em Guardar.

      Sugestão: para mais informações sobre como ativar outros fornecedores, consulte as secções "Antes de começar" dos guias da Google, Facebook, Twitter e GitHub no Firebase.

3. Para que o Firebase faça a autenticação corretamente, o seu domínio tem de estar autorizado para redirecionamentos OAuth. Para autorizar o seu domínio:

   1. Selecione Compilar > Autenticação > Definições.

   2. Em Domínios autorizados na página Definições, clique em Adicionar domínio.

   3. Introduza o domínio da sua app no App Engine, excluindo o prefixo http://:

      PROJECT_ID. REGION_ID.r.appspot.com onde PROJECT_ID é o ID do seu Google Cloud projeto.

Adicione o Firebase ao seu serviço Web

Para adicionar o Firebase ao seu serviço Web, copie o fragmento de código personalizado do projeto do Firebase, bem como os ficheiros JavaScript e CSS, para o seu serviço Web:

1. Aceda à consola do Firebase e selecione o projeto.

2. Na página de vista geral do projeto, abaixo do texto Comece por adicionar o Firebase à sua app, selecione Web. Se já tiver uma app adicionada ao projeto, pode não ver este texto. Em alternativa, navegue para a página Vista geral do projeto > Definições do projeto > Geral da sua app existente, desloque a página para baixo e selecione Adicionar app.

3. Assim que a app estiver registada, é apresentado um fragmento de código personalizado. Copie o conteúdo do fragmento. Para ver este fragmento de código novamente mais tarde, navegue para a página Definições do projeto da sua app do Firebase.

4. Atualize o ficheiro templates/index.html através dos seguintes passos:

   1. Adicione as seguintes linhas à etiqueta <head>:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
      <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

   2. Adicione o fragmento do código personalizado à etiqueta <body>.

      Para este tutorial, pode adicionar o código à parte superior do corpo, uma vez que o único conteúdo em templates/index.html é um exemplo de serviços do Firebase. No seu ambiente de produção, recomendamos que adicione o fragmento de código na parte inferior do corpo, mas antes de usar quaisquer serviços do Firebase.

      O seu código personalizado vai ter um aspeto semelhante a este fragmento simulado:

      <!-- MOCK SNIPPET: DO NOT COPY -->
      <!-- The core Firebase JS SDK is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
      
      <!-- TODO: Add SDKs for Firebase products that you want to use
           https://firebase.google.com/docs/web/setup#available-libraries -->
      
      <script>
        var config = {
          apiKey: "<API_KEY>",
          authDomain: "<PROJECT_ID>.firebaseapp.com",
          databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
          projectId: "<PROJECT_ID>",
          storageBucket: "<BUCKET>.appspot.com",
          messagingSenderId: "<SENDER_ID>",
        };
        firebase.initializeApp(config);
      </script>
      

   3. Substitua o TODO no fragmento acima pela seguinte etiqueta de script para ativar o componente de autenticação do Firebase:

       <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
       

      Estes endereços de scripts estão documentados na documentação da IU do Firebase para a Web.

   4. Substitua o resto do corpo pelo seguinte código, que vai usar mais adiante neste guia para apresentar dados de utilizadores autenticados:

      <div id="firebaseui-auth-container"></div>
      
      <button id="sign-out" hidden=true>Sign Out</button>
      
      <div id="login-info" hidden=true>
        <h2>Login info:</h2>
        {% if user_data %}
          <dl>
            <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
            <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
            <dt>Last 10 visits</dt><dd>
      	{% for time in times %}
                <p>{{ time['timestamp'] }}</p>
              {% endfor %} </dd>
          </dl>
        {% elif error_message %}
          <p>Error: {{ error_message }}</p>
        {% endif %}
      </div>

Passos seguintes

Agora que adicionou o Firebase ao seu Google Cloud projeto e ao seu serviço Web, já pode adicionar código ao seu serviço Web para permitir que autentique os utilizadores.