Guía de inicio rápido de JavaScript

En esta guía de inicio rápido, se explica cómo configurar una página simple que realiza solicitudes a la API de YouTube Data. En realidad, esta guía de inicio rápido explica cómo realizar dos solicitudes a la API:

  1. Usarás una clave de API, que identifica tu aplicación, para recuperar información sobre el canal de YouTube de GoogleDevelopers.
  2. Usarás un ID de cliente de OAuth 2.0 para enviar una solicitud autorizada que recupere información sobre tu propio canal de YouTube.

Requisitos previos

Para ejecutar esta guía de inicio rápido, necesitarás lo siguiente:

  • Node.js y npm (para ejecutar un servidor web local)
  • Acceso a Internet y un navegador web
  • Una Cuenta de Google

Paso 1: Configura tu proyecto y tus credenciales

Crea o selecciona un proyecto en la consola de Cloud. Completa las siguientes tareas en la consola de Cloud para tu proyecto:

  1. En el panel de la biblioteca, busca la versión 3 de la API de YouTube Data. Haz clic en el anuncio de esa API y asegúrate de que esté habilitada para tu proyecto.

  2. En el panel de credenciales, crea dos credenciales:

    1. Crea una clave de API Usarás la clave de API para realizar solicitudes a la API que no requieran autorización del usuario. Por ejemplo, no necesitas la autorización del usuario para recuperar información sobre un canal público de YouTube.

    2. Crea un ID de cliente de OAuth 2.0 Establece el tipo de aplicación en Aplicación web. Debes usar credenciales de OAuth 2.0 para las solicitudes que requieran autorización del usuario. Por ejemplo, necesitas la autorización del usuario para recuperar información sobre el canal de YouTube del usuario autenticado actualmente.

      En el campo Orígenes autorizados de JavaScript, ingresa la URL http://localhost:8000. Puedes dejar en blanco el campo URIs de redireccionamiento autorizados.

Paso 2: Configura y ejecuta la muestra

Usa el widget del Explorador de APIs en el panel lateral para obtener código de muestra para recuperar información sobre el canal de YouTube de GoogleDevelopers. Esta solicitud usa una clave de API para identificar tu aplicación y no requiere autorización del usuario ni permisos especiales del usuario que ejecuta la muestra.

  1. Abre la documentación del método channels.list de la API.

  2. En esa página, la sección "Casos de uso comunes" contiene una tabla que explica varias formas comunes en que se usa el método. El primer anuncio de la tabla es para mostrar los resultados por ID de canal.

    Haz clic en el símbolo de código del primer anuncio para abrir y propagar el Explorador de APIs en pantalla completa.

    Imagen que identifica la ubicación del vínculo simbólico del código en la tabla que enumera los casos de uso de la documentación de channels.list. El texto alternativo de esa imagen la identifica como un símbolo de código y especifica el caso de uso asociado con ese vínculo.

  3. En el lado izquierdo del Explorador de APIs en pantalla completa, se muestra lo siguiente:

    1. Debajo del encabezado Parámetros de solicitud, hay una lista de parámetros que admite el método. Se deben establecer los valores de los parámetros part y id. El valor del parámetro id, UC_x5XG1OV2P6uZZ5FSM9Ttw, es el ID del canal de YouTube de GoogleDevelopers.

    2. Debajo de los parámetros, hay una sección llamada Credenciales. El menú desplegable de esa sección debe mostrar el valor Clave de API. El Explorador de APIs usa credenciales de demostración de forma predeterminada para facilitar el inicio. Sin embargo, usarás tu propia clave de API para ejecutar la muestra de forma local.

      Imagen que muestra la opción "Credenciales" en el Explorador de APIs en pantalla completa y el menú desplegable con la opción "Clave de API" seleccionada.

  4. En el lado derecho del Explorador de APIs en pantalla completa, se muestran pestañas con muestras de código en diferentes lenguajes. Selecciona la pestaña JavaScript.

  5. Copia la muestra de código y guárdala en un archivo llamado example.html.

  6. En la muestra que descargaste, busca la cadena YOUR_API_KEY y reemplázala por la clave de API que creaste en el paso 1 de esta guía de inicio rápido.

  7. Inicia el servidor web con el siguiente comando desde tu directorio de trabajo:

    npx http-server -p 8000

  8. Abre el archivo example.html en tu navegador. También abre las herramientas para desarrolladores del navegador, como "Herramientas para desarrolladores" en el navegador Chrome.

    1. Haz clic en el botón load de la página para cargar la biblioteca cliente de las APIs de Google para JavaScript. Después de hacer clic en el botón, la consola para desarrolladores debería mostrar una nota que indique que se cargó el cliente de GAPI.

    2. Haz clic en el botón execute para enviar la solicitud a la API. Luego, la consola para desarrolladores debería mostrar la respuesta de la API.

Paso 3: Ejecuta una solicitud autorizada

En este paso, modificarás tu muestra de código para que, en lugar de recuperar información sobre el canal de YouTube de GoogleDevelopers, recupere información sobre tu canal de YouTube. Esta solicitud requiere autorización del usuario.

  1. Vuelve a la documentación del método channels.list de la API.

  2. En la sección "Casos de uso comunes", haz clic en el símbolo de código del tercer anuncio de la tabla. Ese caso de uso es llamar al método list para "mi canal".

  3. Una vez más, en el lado izquierdo del Explorador de APIs en pantalla completa, verás una lista de parámetros seguida de la sección Credenciales. Sin embargo, hay dos cambios en el ejemplo en el que recuperaste información sobre el canal de GoogleDevelopers:

    1. En la sección de parámetros, en lugar de que se establezca el valor del parámetro id, el valor del parámetro mine debe establecerse en true. Esto le indica al servidor de la API que recupere información sobre el canal del usuario autenticado actualmente.

    2. En la sección Credenciales, el menú desplegable debe seleccionar la opción Google OAuth 2.0.

      Además, si haces clic en el vínculo Mostrar alcances, se debe marcar el alcance https://www.googleapis.com/auth/youtube.readonly.

      Imagen que muestra los permisos en el Explorador de APIs en pantalla completa y la opción para usar las credenciales de "Google OAuth 2.0" seleccionada.

  4. Al igual que en el ejemplo anterior, selecciona la pestaña JavaScript , copia la muestra de código y guárdala en example.html.

    En el código, busca la cadena YOUR_CLIENT_ID y reemplázala por el ID de cliente que creaste en el paso 1 de esta guía de inicio rápido.

  5. Inicia el servidor web con el siguiente comando desde tu directorio de trabajo:

    npx http-server -p 8000

  6. Ve al archivo http://localhost:8000/example.html en tu navegador. Abre las herramientas para desarrolladores del navegador, como "Herramientas para desarrolladores" en el navegador Chrome.

  7. Haz clic en el botón Autorizar y cargar de la página para cargar la biblioteca cliente de las APIs de Google para JavaScript y, luego, iniciar el flujo de autorización. Se te solicitará que otorgues permiso a la aplicación para leer datos de tu cuenta de YouTube.

    Si otorgas el permiso, la consola para desarrolladores debería mostrar mensajes que indiquen que el acceso se realizó correctamente y que se cargó el cliente de API.

  8. Haz clic en el botón execute para enviar la solicitud a la API. Luego, la consola para desarrolladores debería mostrar la respuesta de la API.

Lecturas adicionales