Guias rápidos de JavaScript

Este guia de início rápido explica como configurar uma página simples que faz solicitações à API YouTube Data. Na verdade, ele explica como fazer duas solicitações de API:

  1. Você vai usar uma chave de API, que identifica seu aplicativo, para recuperar informações sobre o canal do YouTube GoogleDevelopers.
  2. Você vai usar um ID do cliente OAuth 2.0 para enviar uma solicitação autorizada que recupera informações sobre seu próprio canal do YouTube.

Pré-requisitos

Para executar este guia de início rápido, você precisa de:

  • Node.js e npm (para executar um servidor da Web local)
  • Acesso à Internet e a um navegador da Web.
  • uma Conta do Google.

Etapa 1: configurar o projeto e as credenciais

Crie ou selecione um projeto no console do Cloud. Conclua as seguintes tarefas no console do Cloud para seu projeto:

  1. No painel da biblioteca, pesquise a API YouTube Data v3. Clique na listagem dessa API e verifique se ela está ativada para seu projeto.

  2. No painel de credenciais, crie duas credenciais:

    1. Criar uma chave de API Você vai usar a chave de API para fazer solicitações de API que não exigem autorização do usuário. Por exemplo, não é necessário autorização do usuário para recuperar informações sobre um canal público do YouTube.

    2. Criar um ID do cliente OAuth 2.0 Defina o tipo de aplicativo como Aplicativo da Web. Você precisa usar credenciais OAuth 2.0 para solicitações que exigem autorização do usuário. Por exemplo, você precisa de autorização do usuário para recuperar informações sobre o canal do YouTube do usuário autenticado no momento.

      No campo Origens JavaScript autorizadas, insira o URL http://localhost:8000. Você pode deixar o campo URIs de redirecionamento autorizados em branco.

Etapa 2: configurar e executar o exemplo

Use o widget das APIs Explorer no painel lateral para receber um exemplo de código para recuperar informações sobre o canal do YouTube GoogleDevelopers. Essa solicitação usa uma chave de API para identificar seu aplicativo e não exige autorização do usuário nem permissões especiais do usuário que executa o exemplo.

  1. Abra a documentação do método channels.list da API.

  2. Nessa página, a seção "Casos de uso comuns" contém uma tabela que explica várias maneiras comuns de usar o método. A primeira listagem na tabela é para listar resultados por ID do canal.

    Clique no símbolo de código da primeira listagem para abrir e preencher o APIs Explorer em tela cheia.

    Imagem que identifica a localização do link simbólico do código na tabela que lista casos de uso para a documentação "channels.list". O texto alternativo dessa imagem a identifica como um símbolo de código e especifica o caso de uso associado a esse link.

  3. O lado esquerdo do APIs Explorer em tela cheia mostra o seguinte:

    1. Abaixo do cabeçalho Parâmetros de solicitação, há uma lista de parâmetros compatíveis com o método. Os valores dos parâmetros part e id precisam ser definidos. O valor do parâmetro id, UC_x5XG1OV2P6uZZ5FSM9Ttw, é o ID do canal do YouTube GoogleDevelopers.

    2. Abaixo dos parâmetros, há uma seção chamada Credenciais. O menu suspenso nessa seção precisa mostrar o valor Chave de API. O APIs Explorer usa credenciais de demonstração por padrão para facilitar o início. No entanto, você vai usar sua própria chave de API para executar o exemplo localmente.

      Imagem que mostra as "Credenciais" no Explorador de APIs em tela cheia e o menu suspenso com a opção "Chave de API" selecionada.

  4. O lado direito do APIs Explorer em tela cheia mostra guias com exemplos de código em diferentes idiomas. Selecione a guia JavaScript.

  5. Copie o exemplo de código e salve-o em um arquivo chamado example.html.

  6. No exemplo que você fez o download, encontre a string YOUR_API_KEY e substitua-a pela chave de API que você criou na etapa 1 deste guia de início rápido.

  7. Inicie o servidor da Web usando o seguinte comando no seu diretório de trabalho:

    npx http-server -p 8000

  8. Abra o arquivo example.html no navegador. Abra também as ferramentas para desenvolvedores do navegador, como as "Ferramentas para desenvolvedores" no navegador Chrome.

    1. Clique no botão Carregar na página para carregar a Biblioteca de cliente das APIs Google para JavaScript. Depois de clicar no botão, o console do desenvolvedor vai mostrar uma observação indicando que o cliente GAPI foi carregado.

    2. Clique no botão Executar para enviar a solicitação de API. O console do desenvolvedor vai mostrar a resposta da API.

Etapa 3: executar uma solicitação autorizada

Nesta etapa, você vai modificar o exemplo de código para que, em vez de recuperar informações sobre o canal do YouTube GoogleDevelopers, ele recupere informações sobre seu canal do YouTube. Essa solicitação exige autorização do usuário.

  1. Volte à documentação do método channels.list da API.

  2. Na seção "Casos de uso comuns", clique no símbolo de código da terceira listagem na tabela. Esse caso de uso é para chamar o método list do "meu canal".

  3. Novamente, no lado esquerdo do APIs Explorer em tela cheia, você verá uma lista de parâmetros seguida da seção Credenciais. No entanto, há duas mudanças no exemplo em que você recuperou informações sobre o canal GoogleDevelopers:

    1. Na seção de parâmetros, em vez de o valor do parâmetro id ser definido, o valor do parâmetro mine precisa ser definido como true. Isso instrui o servidor de API a recuperar informações sobre o canal do usuário autenticado no momento.

    2. Na seção Credenciais, o menu suspenso precisa selecionar a opção OAuth 2.0 do Google.

      Além disso, se você clicar no link Mostrar escopos, o escopo https://www.googleapis.com/auth/youtube.readonly será marcado.

      Imagem que mostra escopos no APIs Explorer em tela cheia e a opção de usar credenciais do "OAuth 2.0 do Google" selecionada.

  4. Como no exemplo anterior, selecione a guia JavaScript , copie o exemplo de código e salve-o em example.html.

    No código, encontre a string YOUR_CLIENT_ID e substitua-a pelo ID do cliente que você criou na etapa 1 deste guia de início rápido.

  5. Inicie o servidor da Web usando o seguinte comando no seu diretório de trabalho:

    npx http-server -p 8000

  6. Acesse o arquivo http://localhost:8000/example.html no navegador. Abra as ferramentas para desenvolvedores do navegador, como as "Ferramentas para desenvolvedores" no navegador Chrome.

  7. Clique no botão Autorizar e carregar na página para carregar a Biblioteca de cliente das APIs Google para JavaScript e iniciar o fluxo de autorização. Você vai receber uma solicitação para conceder permissão ao aplicativo para ler dados da sua conta do YouTube.

    Se você conceder a permissão, o console do desenvolvedor vai mostrar mensagens indicando que o login foi bem-sucedido e que o cliente da API foi carregado.

  8. Clique no botão Executar para enviar a solicitação de API. O console do desenvolvedor vai mostrar a resposta da API.

Leitura adicional