Como adicionar o Firebase ao serviço da Web

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 o Firebase ao seu projeto do Google Cloud, defina as configurações de autenticação e adicione o Firebase ao serviço da Web.

Adicionar o Firebase ao serviço da Web permite autenticar os usuários para que você possa oferecer uma experiência personalizada a cada um deles.

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:

Comece por Como criar um aplicativo Python 3 e conclua todas as etapas anteriores a esta.
Se você já tiver um projeto do Google Cloud, continue fazendo o download de uma cópia do serviço da Web:
1. Faça o download do repositório do aplicativo de amostra usando Git:
```
git clone https://github.com/GoogleCloudPlatform/python-docs-samples
```
  Outra alternativa é fazer o download da amostra como um arquivo ZIP e extraí-lo.
2. Navegue até o diretório que contém uma cópia dos arquivos da etapa anterior:
```
cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-1
```

Como adicionar o Firebase ao seu projeto do Google Cloud

Para usar a autenticação do Firebase com o serviço da Web, adicione o Firebase ao projeto do Google Cloud e defina suas configurações de autenticação.

Adicione o Firebase ao projeto do Google Cloud atual usando a ferramenta Adicionar projeto no console do Firebase.

Também é possível optar por usar uma conta do Firebase com um nome diferente, não associado ao seu projeto do Google Cloud atual.
Ative os provedores de logon de autenticação no console do Firebase. Para este serviço da Web, você ativará os provedores de login de E-mail/Senha e do Google:
1. Clique em Build > Autenticação > Método de login.
2. Em Provedores de login, passe o cursor sobre o provedor de E-mail/Senha e clique no ícone de lápis.
3. Acione o botão Ativar para usar a autenticação de E-mail/Senha.
4. Depois de ativar o provedor, clique em Salvar.
5. Faça o mesmo com o provedor de login Google.
  
  Dica: para mais informações sobre a ativação de outros provedores, consulte as seções "Antes de começar" dos guias do Facebook, Twitter e GitHub no Firebase.
Para que o Firebase autentique corretamente, o domínio precisa ser autorizado para redirecionamentos OAuth. Para autorizar seu domínio, faça o seguinte:
1. Selecione Build > Autenticação > Configurações.
2. Em Domínios autorizados, na página Configurações, clique em Adicionar domínio.
3. Insira o domínio do aplicativo no App Engine, excluindo o prefixo http://:
  
  PROJECT_ID. REGION_ID.r.appspot.com em que PROJECT_ID é o ID do projeto do Google Cloud.

Como adicionar o Firebase ao serviço da Web

Para adicionar o Firebase ao serviço da Web, copie o snippet de código personalizado, os arquivos JavaScript e CSS do projeto do Firebase no serviço da Web:

Vá para o console do Firebase e selecione o projeto.
Na página de visão geral do projeto, abaixo do texto Primeiros passos adicionando o Firebase ao seu app, selecione Web. Se você já tiver um app adicionado ao projeto, talvez não veja esse texto. Em vez disso, navegue até a página Visão geral do projeto > Configurações do projeto > Geral do app existente, role para baixo e selecione Adicionar app.
Depois que o aplicativo for registrado, será exibido um snippet de código personalizado. Copie o conteúdo do snippet. Para ver esse snippet de código novamente mais tarde, acesse a página Configurações do projeto do app Firebase.

Atualize o arquivo templates/index.html concluindo conforme a seguir:

Adicione as seguintes linhas à tag <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" />

Adicione o snippet de código personalizado na tag <body>.

Neste tutorial, você adiciona o código à parte superior do corpo, já que o único conteúdo em templates/index.html é um exemplo de serviços do Firebase. No seu ambiente de produção, recomendamos que você adicione o snippet de código à parte inferior do corpo, mas antes de usar qualquer serviço do Firebase.

Seu código personalizado será semelhante a este snippet de simulação:

<!-- 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>

Substitua TODO no snippet acima pela tag de script a seguir para ativar o componente Authentication do Firebase:
```
 <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
 
```
Esses endereços de script estão documentados na documentação da IU do Firebase para Web.

Substitua o restante do corpo pelo código a seguir, que você usará posteriormente neste guia para exibir dados de usuários 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>

Próximas etapas

Agora que você adicionou o Firebase ao projeto do Google Cloud e ao serviço da Web, já está pronto para adicionar código ao serviço da Web para permitir a autenticação de usuários.

Processar dados

Autenticar usuários