Como usar o OAuth 2.0 para aplicativos da Web JavaScript

Este documento explica como implementar a autorização OAuth 2.0 para acessar a API YouTube Data de um aplicativo da Web JavaScript. O OAuth 2.0 permite que os usuários compartilhem dados específicos com um aplicativo, mantendo a privacidade de nomes de usuário, senhas e outras informações. Por exemplo, um aplicativo pode usar o OAuth 2.0 para conseguir permissão e fazer upload de vídeos no canal de um usuário do YouTube.

Esse fluxo do OAuth 2.0 é chamado de fluxo de concessão implícita. Ele foi projetado para aplicativos que acessam APIs apenas enquanto o usuário está no aplicativo. Esses aplicativos não podem armazenar informações confidenciais.

Nesse fluxo, seu app abre um URL do Google que usa parâmetros de consulta para identificar seu app e o tipo de acesso à API que o app precisa. É possível abrir o URL na janela atual do navegador ou em um pop-up. O usuário pode autenticar com o Google e conceder as permissões solicitadas. Em seguida, o Google redireciona o usuário de volta para seu app. O redirecionamento inclui um token de acesso, que seu app verifica e usa para fazer solicitações de API.

Serviços de Identificação do Google e Biblioteca de cliente das APIs do Google

Se você usa a biblioteca de cliente das APIs do Google para JavaScript para fazer chamadas autorizadas ao Google, utilize a biblioteca JavaScript dos serviços de identidade do Google para processar o fluxo do OAuth 2.0. Consulte o modelo de token dos Serviços de identidade do Google, que se baseia no fluxo de concessão implícita do OAuth 2.0.

Pré-requisitos

Ativar as APIs do projeto

Qualquer aplicativo que chame APIs do Google precisa ativá-las no API Console.

Para ativar uma API para um projeto, faça o seguinte:

  1. Open the API Library no Google API Console.
  2. If prompted, select a project, or create a new one.
  3. Use a página Biblioteca para encontrar e ativar a API YouTube Data. Encontre e ative outras APIs que o aplicativo vai usar.

Criar credenciais de autorização

Qualquer aplicativo que use o OAuth 2.0 para acessar as APIs do Google precisa ter credenciais de autorização que identifiquem o aplicativo para o servidor OAuth 2.0 do Google. As etapas a seguir explicam como criar credenciais para seu projeto. Seus aplicativos podem usar as credenciais para acessar as APIs que você ativou para o projeto.

  1. Go to the Credentials page.
  2. Clique em Criar credenciais > ID do cliente OAuth.
  3. Selecione o tipo de aplicativo Web application.
  4. Preencha o formulário. Os aplicativos que usam JavaScript para fazer solicitações autorizadas da API do Google precisam especificar as origens autorizadas do JavaScript. As origens identificam os domínios de onde o aplicativo pode enviar solicitações ao servidor OAuth 2.0. Essas origens precisam aderir às regras de validação do Google.

Identificar escopos de acesso

Os escopos permitem que seu aplicativo solicite acesso apenas aos recursos de que ele precisa e, ao mesmo tempo, permitem que os usuários controlem a quantidade de acesso que concedem ao aplicativo. Assim, pode haver uma relação inversa entre o número de escopos solicitados e a probabilidade de obter o consentimento do usuário.

Antes de começar a implementar a autorização do OAuth 2.0, recomendamos que você identifique os escopos que seu app precisará de permissão para acessar.

A API YouTube Data v3 usa os seguintes escopos:

Escopos
https://www.googleapis.com/auth/youtubeGerenciar sua conta do YouTube
https://www.googleapis.com/auth/youtube.channel-memberships.creatorVer uma lista dos membros ativos atuais do canal, do nível deles e de quando se tornaram membros
https://www.googleapis.com/auth/youtube.force-sslVer, editar e excluir permanentemente vídeos, classificações, comentários e legendas do YouTube
https://www.googleapis.com/auth/youtube.readonlyVisualize sua conta do YouTube
https://www.googleapis.com/auth/youtube.uploadGerenciar seus vídeos do YouTube
https://www.googleapis.com/auth/youtubepartnerVer e gerenciar seus ativos e conteúdos associados no YouTube
https://www.googleapis.com/auth/youtubepartner-channel-auditVisualiza as informações particulares do seu canal que são relevantes para o processo de auditoria com um parceiro do YouTube

O documento Escopos da API OAuth 2.0 contém uma lista completa de escopos que você pode usar para acessar as APIs do Google.

Como conseguir tokens de acesso do OAuth 2.0

As etapas a seguir mostram como seu aplicativo interage com o servidor OAuth 2.0 do Google para receber o consentimento de um usuário para executar uma solicitação de API em nome dele. Seu aplicativo precisa ter esse consentimento antes de executar uma solicitação de API do Google que requer a autorização do usuário.

Etapa 1: redirecionar para o servidor OAuth 2.0 do Google

Para solicitar permissão de acesso aos dados de um usuário, redirecione-o para o servidor OAuth 2.0 do Google.

Endpoints do OAuth 2.0

Gere um URL para solicitar acesso pelo endpoint OAuth 2.0 do Google em https://accounts.google.com/o/oauth2/v2/auth. Esse endpoint pode ser acessado por HTTPS. Conexões HTTP simples são recusadas.

O servidor de autorização do Google é compatível com os seguintes parâmetros de string de consulta para aplicativos de servidor da Web:

Parâmetros
client_id Obrigatório

O ID do cliente para seu aplicativo. Esse valor está no API Console Credentials page.

redirect_uri Obrigatório

Determina para onde o servidor da API redireciona o usuário depois que ele conclui o fluxo de autorização. O valor precisa corresponder exatamente a um dos URIs de redirecionamento autorizados para o cliente OAuth 2.0, que você configurou no API Console Credentials pagedo cliente. Se esse valor não corresponder a um URI de redirecionamento autorizado para o client_id fornecido, você receberá um erro redirect_uri_mismatch.

Observe que o esquema http ou https, letras maiúsculas e minúsculas e barra final ("/") precisam ser correspondentes.

response_type Obrigatório

Aplicativos JavaScript precisam definir o valor do parâmetro como token. Esse valor instrui o servidor de autorização do Google a retornar o token de acesso como um par name=value no identificador de fragmento do URI (#) ao qual o usuário será redirecionado após concluir o processo de autorização.

scope Obrigatório

Uma lista de escopos delimitada por espaço que identifica os recursos que o aplicativo pode acessar em nome do usuário. Esses valores informam a tela de consentimento que o Google mostra ao usuário.

Os escopos permitem que seu aplicativo solicite acesso apenas aos recursos de que ele precisa e, ao mesmo tempo, permitem que os usuários controlem a quantidade de acesso que concedem ao aplicativo. Assim, há uma relação inversa entre o número de escopos solicitados e a probabilidade de obter o consentimento do usuário.

A API YouTube Data v3 usa os seguintes escopos:

Escopos
https://www.googleapis.com/auth/youtubeGerenciar sua conta do YouTube
https://www.googleapis.com/auth/youtube.channel-memberships.creatorVer uma lista dos membros ativos atuais do canal, do nível deles e de quando se tornaram membros
https://www.googleapis.com/auth/youtube.force-sslVer, editar e excluir permanentemente vídeos, classificações, comentários e legendas do YouTube
https://www.googleapis.com/auth/youtube.readonlyVisualize sua conta do YouTube
https://www.googleapis.com/auth/youtube.uploadGerenciar seus vídeos do YouTube
https://www.googleapis.com/auth/youtubepartnerVer e gerenciar seus ativos e conteúdos associados no YouTube
https://www.googleapis.com/auth/youtubepartner-channel-auditVisualiza as informações particulares do seu canal que são relevantes para o processo de auditoria com um parceiro do YouTube

O documento Escopos da API OAuth 2.0 fornece uma lista completa dos escopos que podem ser usados para acessar as APIs do Google.

Recomendamos que seu aplicativo solicite acesso aos escopos de autorização no contexto sempre que possível. Ao solicitar acesso aos dados do usuário no contexto, por meio de autorização incremental, você ajuda os usuários a entender mais facilmente por que o aplicativo precisa do acesso que está solicitando.

state Recomendável

Especifica qualquer valor de string que o aplicativo usa para manter o estado entre a solicitação de autorização e a resposta do servidor de autorização. O servidor retorna o valor exato enviado como um par de name=value no identificador de fragmento de URL (#) do redirect_uri depois que o usuário consente ou nega a solicitação de acesso do aplicativo.

Esse parâmetro pode ser usado para várias finalidades, como direcionar o usuário para o recurso correto no seu aplicativo, enviar valores de uso único e reduzir a falsificação de solicitações entre sites. Como seu redirect_uri pode ser adivinhado, usar um valor state pode aumentar a garantia de que uma conexão de entrada é o resultado de uma solicitação de autenticação. Se você gerar uma string aleatória ou codificar o hash de um cookie ou de outro valor que capture o estado do cliente, é possível validar a resposta para garantir que a solicitação e a resposta tenham sido originadas no mesmo navegador, oferecendo proteção contra ataques, como falsificação de solicitações entre sites. Consulte a documentação do OpenID Connect para ver um exemplo de como criar e confirmar um token state.

include_granted_scopes Opcional

Permite que os aplicativos usem a autorização incremental para solicitar acesso a escopos adicionais no contexto. Se você definir o valor desse parâmetro como true e a solicitação de autorização for concedida, o novo token de acesso também vai cobrir todos os escopos aos quais o usuário concedeu acesso ao aplicativo anteriormente. Consulte a seção sobre autorização incremental para ver exemplos.

login_hint Opcional

Se o aplicativo souber qual usuário está tentando se autenticar, ele poderá usar esse parâmetro para fornecer uma dica para o servidor de autenticação do Google. O servidor usa a dica para simplificar o fluxo de login preenchendo previamente o campo de e-mail no formulário de login ou selecionando a sessão de login múltiplo apropriada.

Defina o valor do parâmetro como um endereço de e-mail ou identificador sub, que é equivalente ao ID do Google do usuário.

prompt Opcional

Uma lista de comandos delimitada por espaço e que diferencia maiúsculas de minúsculas para apresentar ao usuário. Se você não especificar esse parâmetro, o usuário receberá uma solicitação apenas na primeira vez que o projeto solicitar acesso. Consulte Solicitar novo consentimento para mais informações.

Os valores possíveis são:

none Não mostre telas de autenticação ou consentimento. Não pode ser especificado com outros valores.
consent Solicite o consentimento do usuário.
select_account Peça que o usuário selecione uma conta.

Exemplo de redirecionamento para o servidor de autorização do Google

O URL de exemplo abaixo solicita acesso off-line (access_type=offline) a um escopo que permite acesso para visualizar a conta do YouTube do usuário. Ele usa a autorização incremental para garantir que o novo token de acesso abranja todos os escopos a que o usuário já concedeu acesso ao aplicativo. O URL também define valores para os parâmetros obrigatórios redirect_uri, response_type e client_id, bem como para o parâmetro state. O URL contém quebras de linha e espaços para facilitar a leitura.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

Depois de criar o URL da solicitação, redirecione o usuário para ele.

Exemplo de código JavaScript

O snippet JavaScript a seguir mostra como iniciar o fluxo de autorização em JavaScript sem usar a biblioteca de cliente das APIs do Google para JavaScript. Como esse endpoint do OAuth 2.0 não é compatível com o compartilhamento de recursos entre origens (CORS), o snippet cria um formulário que abre a solicitação para esse endpoint.

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/youtube.force-ssl',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

Etapa 2: o Google solicita o consentimento do usuário

Nesta etapa, o usuário decide se concede o acesso solicitado ao aplicativo. Nessa fase, o Google exibe uma janela de consentimento que mostra o nome do seu aplicativo e os serviços das APIs que estão solicitando permissão de acesso com as credenciais de autorização do usuário e um resumo dos escopos de acesso a serem concedidos. Assim, o usuário pode consentir em conceder acesso a um ou mais escopos solicitados pelo seu aplicativo ou recusar a solicitação.

Seu aplicativo não precisa fazer nada nesta etapa, já que aguarda a resposta do servidor OAuth 2.0 do Google indicando se algum acesso foi concedido. Essa resposta é explicada na etapa a seguir.

Erros

As solicitações para o endpoint de autorização do OAuth 2.0 do Google podem exibir mensagens de erro voltadas para o usuário em vez dos fluxos de autenticação e autorização esperados. Confira abaixo os códigos de erro comuns e as resoluções sugeridas.

admin_policy_enforced

A Conta do Google não pode autorizar um ou mais escopos solicitados devido às políticas do administrador do Google Workspace. Consulte o artigo de ajuda para admins do Google Workspace Controlar quais apps internos e de terceiros acessam os dados do Google Workspace para mais informações sobre como um administrador pode restringir o acesso a todos os escopos ou aos escopos confidenciais e restritos até que o acesso seja explicitamente concedido ao ID do cliente OAuth.

disallowed_useragent

O endpoint de autorização é exibido dentro de um user agent incorporado não permitido pelas políticas do OAuth 2.0 do Google.

Android

Os desenvolvedores Android podem encontrar essa mensagem de erro ao abrir solicitações de autorização na android.webkit.WebView. Em vez disso, os desenvolvedores precisam usar bibliotecas do Android, como o Login do Google para Android ou o AppAuth para Android do OpenID Foundation.

Os desenvolvedores da Web podem encontrar esse erro quando um app Android abre um link da Web geral em um user agent incorporado e um usuário acessa o endpoint de autorização do OAuth 2.0 do Google no seu site. Os desenvolvedores precisam permitir que links gerais sejam abertos no gerenciador de links padrão do sistema operacional, que inclui os gerenciadores Android App Links ou o app de navegador padrão. A biblioteca Guias personalizadas do Android também é uma opção compatível.

iOS

Os desenvolvedores do iOS e do macOS podem encontrar esse erro ao abrir solicitações de autorização no WKWebView. Em vez disso, os desenvolvedores precisam usar bibliotecas do iOS, como o Login do Google para iOS ou o AppAuth para iOS do OpenID Foundation.

Os desenvolvedores da Web podem encontrar esse erro quando um app para iOS ou macOS abre um link da Web geral em um user agent incorporado e um usuário acessa o endpoint de autorização do OAuth 2.0 do Google no seu site. Os desenvolvedores precisam permitir que links gerais sejam abertos no gerenciador de links padrão do sistema operacional, que inclui os gerenciadores Universal Links ou o app de navegador padrão. A biblioteca SFSafariViewController também é uma opção compatível.

org_internal

O ID do cliente OAuth na solicitação faz parte de um projeto que limita o acesso às Contas do Google em uma organização do Google Cloud específica. Para mais informações sobre essa opção de configuração, consulte a seção Tipo de usuário no artigo de ajuda "Como configurar a tela de permissão OAuth".

invalid_client

A origem da solicitação não está autorizada para este cliente. Consulte origin_mismatch.

invalid_grant

Ao usar a autorização incremental, o token pode ter expirado ou ter sido invalidado. Autentique o usuário novamente e peça o consentimento dele para receber novos tokens. Se você continuar vendo esse erro, verifique se o aplicativo foi configurado corretamente e se está usando os tokens e parâmetros corretos na solicitação. Caso contrário, a conta pode ter sido excluída ou desativada.

origin_mismatch

O esquema, o domínio e/ou a porta do JavaScript que originou a solicitação de autorização podem não corresponder a um URI de origem JavaScript autorizado registrado para o ID do cliente OAuth. Revise as origens autorizadas do JavaScript no Google API Console Credentials page.

redirect_uri_mismatch

O redirect_uri transmitido na solicitação de autorização não corresponde a um URI de redirecionamento autorizado do ID do cliente OAuth. Revise os URIs de redirecionamento autorizados no Google API Console Credentials page.

O esquema, o domínio e/ou a porta do JavaScript que originou a solicitação de autorização podem não corresponder a um URI de origem JavaScript autorizado registrado para o ID do cliente OAuth. Revise as origens autorizadas do JavaScript no Google API Console Credentials page.

O parâmetro redirect_uri pode se referir ao fluxo out-of-band (OOB) do OAuth que foi suspenso e não tem mais suporte. Consulte o guia de migração para atualizar sua integração.

invalid_request

Havia algo de errado com a solicitação que você fez. Isso pode ocorrer por vários motivos:

  • A solicitação não foi formatada corretamente
  • A solicitação não tinha os parâmetros obrigatórios
  • A solicitação usa um método de autorização que não é compatível com o Google. Verificar se a integração OAuth usa um método de integração recomendado

Etapa 3: lidar com a resposta do servidor OAuth 2.0

Endpoints do OAuth 2.0

O servidor OAuth 2.0 envia uma resposta ao redirect_uri especificado na solicitação de token de acesso.

Se o usuário aprovar a solicitação, a resposta vai conter um token de acesso. Se o usuário não aprovar a solicitação, a resposta vai conter uma mensagem de erro. O token de acesso ou a mensagem de erro é retornado no fragmento de hash do URI de redirecionamento, conforme mostrado abaixo:

  • Uma resposta de token de acesso:

    https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

    Além do parâmetro access_token, a string de fragmento também contém o parâmetro token_type, que é sempre definido como Bearer, e o parâmetro expires_in, que especifica a vida útil do token, em segundos. Se o parâmetro state tiver sido especificado na solicitação do token de acesso, o valor dele também será incluído na resposta.

  • Uma resposta de erro:
    https://oauth2.example.com/callback#error=access_denied

Exemplo de resposta do servidor OAuth 2.0

Para testar esse fluxo, clique no URL de amostra a seguir, que solicita acesso somente leitura para visualizar metadados de arquivos no Google Drive:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

Depois de concluir o fluxo do OAuth 2.0, você será redirecionado para http://localhost/oauth2callback. Esse URL vai gerar um erro 404 NOT FOUND, a menos que a máquina local exiba um arquivo nesse endereço. A próxima etapa fornece mais detalhes sobre as informações retornadas no URI quando o usuário é redirecionado de volta ao aplicativo.

Chamar APIs do Google

Endpoints do OAuth 2.0

Depois que o aplicativo recebe um token de acesso, é possível usá-lo para fazer chamadas para uma API do Google em nome de uma determinada conta de usuário, se os escopos de acesso exigidos pela API tiverem sido concedidos. Para isso, inclua o token de acesso em uma solicitação à API incluindo um parâmetro de consulta access_token ou um valor Bearer de cabeçalho HTTP Authorization. Sempre que possível, recomendamos usar o cabeçalho HTTP, porque as strings de consulta tendem a ficar visíveis nos registros do servidor. Na maioria dos casos, você pode usar uma biblioteca de cliente para configurar suas chamadas para APIs do Google, por exemplo, ao chamar a API YouTube Data.

Observe que a API YouTube Data oferece suporte a contas de serviço apenas para proprietários de conteúdo do YouTube que possuem e gerenciam vários canais do YouTube, como gravadoras e estúdios de cinema.

É possível testar todas as APIs do Google e ver os escopos delas no OAuth 2.0 Playground.

Exemplos de HTTP GET

Uma chamada para o endpoint youtube.channels (API YouTube Data) usando o cabeçalho HTTP Authorization: Bearer pode ter a seguinte aparência. Observe que você precisa especificar seu próprio token de acesso:

GET /youtube/v3/channels?part=snippet&mine=true HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

Veja a seguir uma chamada para a mesma API para o usuário autenticado usando o parâmetro de string de consulta access_token:

GET https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

Exemplos com curl

Teste esses comandos com o aplicativo de linha de comando curl. Veja um exemplo que usa a opção de cabeçalho HTTP (preferencial):

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true

Como alternativa, a opção de parâmetro da string de consulta:

curl https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

Exemplo de código JavaScript

O snippet de código abaixo demonstra como usar o Compartilhamento de recursos entre origens (CORS, na sigla em inglês) para enviar uma solicitação a uma API do Google. Este exemplo não usa a biblioteca cliente de APIs do Google para JavaScript. No entanto, mesmo que você não esteja usando a biblioteca de cliente, o guia de suporte do CORS na documentação da biblioteca provavelmente ajudará a entender melhor essas solicitações.

Neste snippet de código, a variável access_token representa o token que você recebeu para fazer solicitações de API em nome do usuário autorizado. O exemplo completo demonstra como armazenar esse token no armazenamento local do navegador e recuperá-lo ao fazer uma solicitação de API.

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

Exemplo completo

Endpoints do OAuth 2.0

Este exemplo de código demonstra como concluir o fluxo do OAuth 2.0 em JavaScript sem usar a biblioteca de cliente de APIs do Google para JavaScript. O código é de uma página HTML que exibe um botão para testar uma solicitação de API. Se você clicar no botão, o código vai verificar se a página armazenou um token de acesso à API no armazenamento local do navegador. Em caso afirmativo, ele executa a solicitação de API. Caso contrário, ele inicia o fluxo do OAuth 2.0.

Para o fluxo do OAuth 2.0, a página segue estas etapas:

  1. Ele direciona o usuário para o servidor OAuth 2.0 do Google, que solicita acesso ao escopo https://www.googleapis.com/auth/youtube.force-ssl.
  2. Depois de conceder (ou negar) o acesso a um ou mais escopos solicitados, o usuário é redirecionado para a página original, que analisa o token de acesso na string do identificador de fragmento.
  3. A página usa o token de acesso para fazer o exemplo de solicitação de API.

    Essa solicitação de API chama o método channels.list da API YouTube Data para recuperar dados sobre o canal do YouTube do usuário autorizado.

  4. Se a solicitação for executada corretamente, a resposta da API será registrada no console de depuração do navegador.

É possível revogar o acesso ao app na página Permissões da sua Conta do Google. O app estará listado como OAuth 2.0 Demo for Google API Docs.

Para executar esse código localmente, defina valores para as variáveis YOUR_CLIENT_ID e YOUR_REDIRECT_URI que correspondam às suas credenciais de autorização. A variável YOUR_REDIRECT_URI precisa ser definida como o mesmo URL em que a página está sendo veiculada. O valor precisa corresponder exatamente a um dos URIs de redirecionamento autorizados para o cliente OAuth 2.0 configurado no API Console Credentials page. Se esse valor não corresponder a um URI autorizado, você vai receber um erro redirect_uri_mismatch. Seu projeto também precisa ter ativado a API apropriada para essa solicitação.

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';
  var fragmentString = location.hash.substring(1);

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0) {
    localStorage.setItem('oauth2-test-params', JSON.stringify(params) );
    if (params['state'] && params['state'] == 'try_sample_request') {
      trySampleRequest();
    }
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null);
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/youtube.force-ssl',
                  'state': 'try_sample_request',
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

Regras de validação de origem JavaScript

O Google aplica as regras de validação a seguir às origens do JavaScript para ajudar os desenvolvedores a manter os aplicativos seguros. Suas origens JavaScript precisam aderir a essas regras. Consulte a seção 3 do RFC 3986 para ver a definição de domínio, host e esquema, mencionada abaixo.

Regras de validação
Esquema

As origens do JavaScript precisam usar o esquema HTTPS, não HTTP simples. Os URIs de host local (incluindo URIs de endereço IP do localhost) estão isentos dessa regra.

Host

Os hosts não podem ser endereços IP brutos. Os endereços IP do host local estão isentos dessa regra.

Domínio
  • Os TLDs de host (domínios de nível superior) precisam pertencer à lista de sufixos públicos.
  • Os domínios de host não podem ser “googleusercontent.com”.
  • As origens do JavaScript não podem conter domínios de encurtamento de URL (por exemplo, goo.gl), a menos que o app seja proprietário do domínio.
  • Informações do usuário

    As origens do JavaScript não podem conter o subcomponente userinfo.

    Caminho

    As origens JavaScript não podem conter o componente do caminho.

    Consulta

    As origens JavaScript não podem conter o componente da consulta.

    Fragmentos

    As origens do JavaScript não podem conter o componente do fragmento.

    Personagens As origens do JavaScript não podem conter determinados caracteres, incluindo:
    • Caracteres curinga ('*')
    • Caracteres ASCII não imprimíveis
    • Codificações percentuais inválidas (qualquer codificação percentual que não siga a forma de codificação URL de um sinal de porcentagem seguido por dois dígitos hexadecimais)
    • Caracteres nulos (um caractere NULL codificado, por exemplo, %00 e %C0%80).

    Autorização incremental

    No protocolo OAuth 2.0, seu app solicita autorização para acessar recursos, identificados por escopos. Solicitar autorização para recursos no momento em que você precisa é uma prática recomendada para a experiência do usuário. Para viabilizar essa prática, o servidor de autorização do Google oferece suporte à autorização incremental. Esse recurso permite solicitar escopos conforme são necessários e, se o usuário conceder permissão para o novo escopo, retorna um código de autorização que pode ser trocado por um token que contém todos os escopos que o usuário concedeu ao projeto.

    Por exemplo, suponha que um app ajude os usuários a identificar eventos locais interessantes. O app permite que os usuários assistam vídeos sobre os eventos, classifiquem os vídeos e adicionem os vídeos a playlists. Os usuários também podem usar o app para adicionar eventos ao Google Agenda.

    Nesse caso, no momento do login, o app pode não precisar ou solicitar acesso a nenhum escopo. No entanto, se o usuário tentar classificar um vídeo, adicionar um vídeo a uma playlist ou executar outra ação do YouTube, o app poderá solicitar acesso ao escopo https://www.googleapis.com/auth/youtube.force-ssl. Da mesma forma, o app pode solicitar acesso ao escopo https://www.googleapis.com/auth/calendar se o usuário tenta adicionar um evento da agenda.

    As regras a seguir se aplicam a um token de acesso recebido de uma autorização incremental:

    • O token pode ser usado para acessar recursos correspondentes a qualquer um dos escopos incluídos na nova autorização combinada.
    • Quando você usa o token de atualização da autorização combinada para receber um token de acesso, ele representa a autorização combinada e pode ser usado para qualquer um dos valores scope incluídos na resposta.
    • A autorização combinada inclui todos os escopos que o usuário concedeu ao projeto de API, mesmo que as concessões tenham sido solicitadas por clientes diferentes. Por exemplo, se um usuário conceder acesso a um escopo usando o cliente de desktop de um aplicativo e depois outro escopo ao mesmo aplicativo por um cliente para dispositivos móveis, a autorização combinada vai incluir os dois escopos.
    • Se você revogar um token que representa uma autorização combinada, o acesso a todos os escopos dessa autorização em nome do usuário associado será revogado simultaneamente.

    Os exemplos de código abaixo mostram como adicionar escopos a um token de acesso atual. Essa abordagem permite que seu app evite a necessidade de gerenciar vários tokens de acesso.

    Endpoints do OAuth 2.0

    Neste exemplo, o aplicativo de chamada solicita acesso para recuperar os dados do YouTube Analytics do usuário, além de qualquer outro acesso que o usuário já tenha concedido ao aplicativo.

    Para adicionar escopos a um token de acesso atual, inclua o parâmetro include_granted_scopes na sua solicitação para o servidor OAuth 2.0 do Google.

    O snippet de código abaixo demonstra como fazer isso. O snippet presume que você tenha armazenado os escopos para os quais seu token de acesso é válido no armazenamento local do navegador. O código do exemplo completo armazena uma lista de escopos para os quais o token de acesso é válido definindo a propriedade oauth2-test-params.scope no armazenamento local do navegador.

    O snippet compara os escopos de que o token de acesso é válido com o escopo que você quer usar para determinada consulta. Se o token de acesso não cobrir esse escopo, o fluxo do OAuth 2.0 será iniciado. Aqui, a função oauth2SignIn é a mesma fornecida na etapa 2, fornecida mais adiante no exemplo completo.

    var SCOPE = 'https://www.googleapis.com/auth/youtube.force-ssl';
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    
    var current_scope_granted = false;
    if (params.hasOwnProperty('scope')) {
      var scopes = params['scope'].split(' ');
      for (var s = 0; s < scopes.length; s++) {
        if (SCOPE == scopes[s]) {
          current_scope_granted = true;
        }
      }
    }
    
    if (!current_scope_granted) {
      oauth2SignIn(); // This function is defined elsewhere in this document.
    } else {
      // Since you already have access, you can proceed with the API request.
    }

    Como revogar um token

    Em alguns casos, o usuário pode querer revogar o acesso dado a um aplicativo. Um usuário pode revogar o acesso acessando Configurações da conta. Consulte a seção de suporte Remover acesso do site ou app do documento de suporte de sites e apps de terceiros com acesso à sua conta para saber mais.

    Também é possível que um aplicativo revogue programaticamente o acesso concedido a ele. A revogação programática é importante nos casos em que um usuário cancela a inscrição, remove um aplicativo ou os recursos da API exigidos por um app são significativamente alterados. Em outras palavras, parte do processo de remoção pode incluir uma solicitação de API para garantir que as permissões concedidas anteriormente ao aplicativo sejam removidas.

    Endpoints do OAuth 2.0

    Para revogar um token de forma programática, o aplicativo faz uma solicitação para https://oauth2.googleapis.com/revoke e o inclui como um parâmetro:

    curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
            https://oauth2.googleapis.com/revoke?token={token}

    O token pode ser de acesso ou de atualização. Se for um token de acesso e tiver um token de atualização correspondente, ele também será revogado.

    Se a revogação for processada, o código de status HTTP da resposta será 200. Para condições de erro, um código de status HTTP 400 é retornado junto com um código de erro.

    O snippet JavaScript a seguir mostra como revogar um token em JavaScript sem usar a biblioteca de cliente de APIs do Google para JavaScript. Como o endpoint de OAuth 2.0 do Google para revogar tokens não é compatível com o Compartilhamento de recursos entre origens (CORS), o código cria um formulário e o envia para o endpoint em vez de usar o método XMLHttpRequest() para postar a solicitação.

    function revokeAccess(accessToken) {
      // Google's OAuth 2.0 endpoint for revoking access tokens.
      var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';
    
      // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
      var form = document.createElement('form');
      form.setAttribute('method', 'post');
      form.setAttribute('action', revokeTokenEndpoint);
    
      // Add access token to the form so it is set as value of 'token' parameter.
      // This corresponds to the sample curl request, where the URL is:
      //      https://oauth2.googleapis.com/revoke?token={token}
      var tokenField = document.createElement('input');
      tokenField.setAttribute('type', 'hidden');
      tokenField.setAttribute('name', 'token');
      tokenField.setAttribute('value', accessToken);
      form.appendChild(tokenField);
    
      // Add form to page and submit it to actually revoke the token.
      document.body.appendChild(form);
      form.submit();
    }