Esta página foi traduzida pela API Cloud Translation.

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 Google Cloud projeto, 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 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
```

Adicione o Firebase ao projeto do Google Cloud

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

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

Também é possível usar uma conta do Firebase com um nome diferente, não associado ao seu projeto do Google Cloud .
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 seu projeto do Google Cloud .

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á tudo pronto para adicionar código ao serviço da Web para permitir a autenticação de usuários.

Processar dados

Autenticar usuários