Guias rápidos de JavaScript

Este guia de início rápido explica como configurar uma página simples que faz solicitações para a API YouTube Data. Este guia de início rápido 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ê vai precisar do seguinte:

  • Python 2.4 ou mais recente (para fornecer um servidor da Web)
  • 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 de APIs. Conclua as seguintes tarefas no Console de APIs do 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 ter autorização do usuário para recuperar informações sobre um canal público do YouTube.

    2. Crie um ID do cliente OAuth 2.0 Defina o tipo de aplicativo como Aplicativo da Web. Você precisa usar credenciais do OAuth 2.0 para solicitações que exigem autorização do usuário. Por exemplo, você precisa da 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 do 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 requer autorização do usuário nem permissões especiais dele para executar a amostra.

  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 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 do símbolo de código na
tabela que lista casos de uso para a documentação de 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 API Explorer em tela cheia mostra o seguinte:

    1. Abaixo do cabeçalho Parâmetros da solicitação, há uma lista de parâmetros aceitos pelo método. Os valores de parâmetro 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 vai mostrar o valor Chave de API. O APIs Explorer usa credenciais de demonstração por padrão para facilitar o início. Mas você vai usar sua própria chave de API para executar a amostra 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 linguagens. 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ê baixou, encontre a string YOUR_API_KEY e substitua pela chave de API criada 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:

    Python 2.x

    python -m SimpleHTTPServer 8000
    

    Python 3.x

    python -m http.server 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 do Google para JavaScript. Depois de clicar no botão, o console do desenvolvedor vai mostrar uma nota 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 requer 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 entrada na tabela. O caso de uso é chamar o método list para "my channel".

  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 em relação ao exemplo em que você recuperou informações sobre o canal GoogleDevelopers:

    1. Na seção de parâmetros, em vez de definir o valor do parâmetro id, defina o valor do parâmetro mine 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 deve selecionar a opção Google OAuth 2.0.

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

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

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

    No código, encontre a string YOUR_CLIENT_ID e substitua 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:

    Python 2.x

    python -m SimpleHTTPServer 8000
    

    Python 3.x

    python -m http.server 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 do Google para JavaScript e iniciar o fluxo de autorização. Você vai receber uma solicitação para conceder ao aplicativo permissão 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