Configuração

Para autorizar o acesso às APIs do Google no seu app da Web usando a biblioteca JavaScript dos Serviços de Identificação do Google (google.accounts.oauth2), primeiro você precisa:

  1. Receba um ID do cliente OAuth 2.0.
  2. Configure a tela de permissão OAuth e os escopos.
  3. Carregue a biblioteca de cliente.
  4. Se quiser, configure uma Política de Segurança de Conteúdo (CSP) e uma Política de Abertura entre Origens (COOP).

Criar credenciais de ID do cliente da API do Google

Para ativar a autorização da Conta do Google no seu site, primeiro é necessário configurar um ID do cliente da API do Google. Siga estas etapas:

  1. Abra a página Clientes do console do Google Cloud.
  2. Crie ou selecione um projeto do console do Cloud. Ao criar aplicativos de produção, talvez sejam necessários vários projetos. Repita as etapas restantes desta seção para cada projeto que você gerencia.
  3. Clique em Criar cliente e, em Tipo de aplicativo, selecione Aplicativo da Web para criar um novo ID do cliente. Para usar um ID do cliente, selecione um do tipo Aplicativo da Web.

  4. Adicione o URI do seu site às Origens JavaScript autorizadas. O URI inclui apenas o esquema e o nome do host totalmente qualificado. Por exemplo, https://www.example.com.

  5. Se você usar o modelo de código de autorização com ux_mode: 'redirect' (ou trocar códigos de autorização em um endpoint de back-end), adicione seus URIs de redirecionamento a URIs de redirecionamento autorizados. Os URIs de redirecionamento incluem o esquema, o nome do host totalmente qualificado e o caminho, e precisam obedecer às regras de validação de URI de redirecionamento. Por exemplo, https://www.example.com/oauth2callback.

Depois que a configuração for concluída, anote o ID do cliente que foi criado. Você vai transmitir esse valor na propriedade client_id ao inicializar initCodeClient() ou initTokenClient(). Uma chave secreta do cliente também é criada. Ela precisa ser mantida em sigilo e usada apenas para operações de troca de token do lado do servidor.

Quando o app da Web solicita acesso aos dados do usuário usando escopos do OAuth 2.0, o Google mostra uma tela de permissão que informa aos usuários qual aplicativo está solicitando acesso, quais escopos de dados são solicitados e os termos aplicáveis.

  1. Abra a página Branding da seção Plataforma de autenticação do Google do Console do Cloud.
  2. Se solicitado, selecione o projeto que você configurou.
  3. Preencha o formulário de branding (nome do aplicativo, logotipo do aplicativo, e-mail de suporte, domínios autorizados, link da página inicial do aplicativo e link da Política de Privacidade) e clique em Salvar.
  4. Acesse a página "Acesso aos dados" para configurar os escopos da API do Google que seu aplicativo exige. É uma prática recomendada solicitar escopos de forma incremental, no momento em que o acesso é necessário, em vez de fazer isso com antecedência.
  5. Confira seu status de verificação. Se o aplicativo solicitar escopos sensíveis ou restritos, envie-o para verificação. Consulte os requisitos de verificação do OAuth para mais detalhes.

Política de Segurança de Conteúdo e COOP

Se o aplicativo da Web aplicar uma Política de Segurança de Conteúdo (CSP), permita as seguintes origens dos Serviços de Identidade do Google:

  • script-src: https://accounts.google.com/gsi/client
  • frame-src: https://accounts.google.com/gsi/
  • connect-src: https://accounts.google.com/gsi/

Para fluxos de autorização pop-up (initTokenClient ou initCodeClient com ux_mode: 'popup'), configure o cabeçalho de resposta HTTP Cross-Origin-Opener-Policy (COOP) como same-origin-allow-popups para que a janela de diálogo possa comunicar a resposta de autorização de volta à sua página.

Próximas etapas

Em seguida, carregue a biblioteca de cliente na sua página da Web para começar a inicializar o cliente de autorização.