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 datos de YouTube. En esta guía de inicio rápido, se 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 obtenga información sobre tu propio canal de YouTube.

Requisitos previos

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

  • Python 2.4 o superior (para proporcionar un servidor web)
  • 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 API. Completa las siguientes tareas en la consola de API para tu proyecto:

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

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

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

    2. Crear un ID de cliente de OAuth 2.0 Configura el tipo de aplicación como Aplicación web. Debes usar las credenciales de OAuth 2.0 para las solicitudes que requieren la 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 el campo URI de redireccionamiento autorizados en blanco.

Paso 2: Configura y ejecuta la muestra

Usa el widget del Explorador de API en el panel lateral a fin de obtener un 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 la autorización del usuario ni ningún permiso especial 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 prácticos comunes" contiene una tabla en la que se explican varias formas comunes en que se usa el método. La primera lista de la tabla es para enumerar los resultados por ID de canal.

    Haz clic en el símbolo de código de la primera ficha para abrir y propagar el Explorador de API de pantalla completa.

    Imagen que identifica la ubicación del vínculo del símbolo de 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 práctico asociado con ese vínculo.

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

    1. Debajo del encabezado Request parameters, 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 para el 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 API usa las credenciales de demostración de forma predeterminada para que sea más fácil comenzar. Sin embargo, usarás tu propia clave de API para ejecutar la muestra de manera local.

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

  4. En el lado derecho, el Explorador de API de pantalla completa muestra las pestañas con muestras de código en diferentes idiomas. 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 string 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:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

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

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

    2. Haz clic en el botón ejecutar para enviar la solicitud a la API. La consola del desarrollador debería mostrar la respuesta de la API.

Paso 3: Ejecuta una solicitud autorizada

En este paso, modificarás tu ejemplo 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 la autorización del usuario.

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

  2. En la sección “Casos prácticos comunes”, haz clic en el símbolo de código de la tercera lista de la tabla. Ese caso práctico es llamar al método list para "mi canal".

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

    1. En la sección de parámetros, en lugar del 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, en el menú desplegable, debes seleccionar la opción de Google OAuth 2.0.

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

      Imagen que muestra los permisos en el Explorador de API de pantalla completa y la opción de usar las credenciales de “Google OAuth 2.0” seleccionadas.

  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 string 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:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

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

  7. Haz clic en el botón autorizar y cargar de la página a fin de cargar la biblioteca cliente de la API de Google para JavaScript y, luego, iniciar el flujo de autorización. Se te pedirá que otorgues permiso a la aplicación para que lea datos de tu cuenta de YouTube.

    Si otorgas el permiso, la consola del desarrollador debe mostrar mensajes que indiquen que el acceso se realizó correctamente y que el cliente de la API se cargó.

  8. Haz clic en el botón ejecutar para enviar la solicitud a la API. La consola del desarrollador debería mostrar la respuesta de la API.

Lecturas adicionales