La API de selector de Google

Diálogo del selector de Google

La API de selector de Google es una API de JavaScript que puedes usar en tus aplicaciones web para permitir que los usuarios seleccionen o suban archivos de Google Drive. Los usuarios pueden otorgar permiso a tus apps para que accedan a sus datos de Drive, lo que proporciona una forma segura y autorizada de interactuar con sus archivos.

El selector de Google actúa como un diálogo de "Archivo abierto" para la información almacenada en Drive y cuenta con las siguientes funciones:

  • Una apariencia similar a la de la IU de Google Drive
  • Varias vistas con vistas previas y miniaturas de archivos de Drive.
  • Una ventana modal intercalada para que los usuarios nunca abandonen la aplicación principal.

Ten en cuenta que el selector de Google no permite que los usuarios organicen, muevan o copien archivos de una carpeta a otra. Para hacerlo, puedes usar la API de Google Drive o la IU de Drive.

Requisitos de la aplicación

Las aplicaciones que usan el selector de Google deben cumplir con todas las Condiciones del Servicio existentes. Lo más importante es que debes identificarte correctamente en tus solicitudes.

También debes tener un proyecto de Google Cloud.

Configura tu entorno

Para comenzar a utilizar la API de Google Picker, debes configurar tu entorno.

Habilita la API

Antes de usar las APIs de Google, debes activarlas en un proyecto de Google Cloud. Puedes activar una o más APIs en un solo proyecto de Google Cloud.

  • En la consola de Google Cloud, habilita la API de selector de Google.

    Habilitar la API

Crea una clave de API

Una clave de API es una string larga que contiene letras mayúsculas y minúsculas, números, guiones bajos y guiones, como AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe. Este método de autenticación se usa para acceder de forma anónima a los datos disponibles públicamente, como los archivos de Google Workspace compartidos mediante el parámetro de configuración de uso compartido “Cualquier persona en Internet que tenga este vínculo”. Para obtener más detalles, consulta Autenticación mediante claves de API.

Para crear una clave de API, sigue estos pasos:

  1. En la consola de Google Cloud, ve a Menú > APIs y servicios > Credenciales.

    Ir a Credenciales

  2. Haz clic en Crear credenciales > Clave de API.
  3. Se mostrará tu nueva clave de API.
    • Haz clic en Copiar para copiar tu clave de API y usarla en el código de tu app. También puedes encontrarla en la sección “Claves de API” de las credenciales de tu proyecto.
    • Haz clic en Restringir clave para actualizar la configuración avanzada y limitar el uso de tu clave de API. Para obtener más detalles, consulta Aplica restricciones de clave de API.

Autoriza las credenciales para una aplicación web

Para autenticar a los usuarios finales y acceder a los datos del usuario en tu app, debes crear uno o más ID de cliente de OAuth 2.0. Un ID de cliente se usa con el fin de identificar una sola app para los servidores de OAuth de Google. Si la app se ejecuta en varias plataformas, debes crear un ID de cliente diferente para cada una.

  1. En la consola de Google Cloud, ve a Menú > APIs y servicios > Credenciales.

    Ir a Credenciales

  2. Haz clic en Crear credenciales > ID de cliente de OAuth.
  3. Haz clic en Tipo de aplicación > Aplicación web.
  4. En el campo Nombre, escribe un nombre para la credencial. Este nombre solo se muestra en la consola de Google Cloud.
  5. Agrega los URIs autorizados relacionados con tu app:
    • Apps del cliente (JavaScript): En Orígenes autorizados de JavaScript, haz clic en Agregar URI. Luego, ingresa el URI que usarás en las solicitudes del navegador. Esto identifica los dominios desde los cuales tu aplicación puede enviar solicitudes de API al servidor OAuth 2.0.
    • Apps del servidor (Java, Python y mucho más): En URI de redireccionamiento autorizados, haz clic en Agregar URI. Luego, ingresa el URI del extremo al que el servidor de OAuth 2.0 pueda enviar respuestas.
  6. Haz clic en Crear. Aparecerá la pantalla de creación del cliente de OAuth, en la que se mostrará tu ID de cliente nuevo y el secreto del cliente.

    Toma nota del ID de cliente. Los secretos del cliente no se usan para aplicaciones web.

  7. Haz clic en OK. La credencial creada recientemente aparecerá en IDs de cliente de OAuth 2.0.
Importante: Tu aplicación debe enviar un token de acceso de OAuth 2.0 con vistas que accedan a los datos privados del usuario cuando se crea un objeto Picker. Si quieres solicitar un token de acceso, consulta Usa OAuth 2.0 para acceder a las APIs de Google.

Muestra el selector de Google

En el resto de esta guía, se explica cómo cargar y mostrar el selector de Google desde una app web. Para ver el ejemplo completo, navega a la muestra de código del selector de Google.

Carga la biblioteca del selector de Google

Para cargar la biblioteca del selector de Google, llama a gapi.load() con el nombre de la biblioteca y una función de devolución de llamada para invocarla después de una carga correcta:

    <script>
      let tokenClient;
      let accessToken = null;
      let pickerInited = false;
      let gisInited = false;

      // Use the API Loader script to load google.picker
      function onApiLoad() {
        gapi.load('picker', onPickerApiLoad);
      }

      function onPickerApiLoad() {
        pickerInited = true;
      }

      function gisLoaded() {
        // TODO(developer): Replace with your client ID and required scopes.
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: 'CLIENT_ID',
          scope: 'SCOPES',
          callback: '', // defined later
        });
        gisInited = true;
    }
    </script>
    <!-- Load the Google API Loader script. -->
    <script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
    

Reemplaza lo siguiente:

  • CLIENT_ID: Es el ID de cliente de tu aplicación web.
  • SCOPES: Uno o más permisos de OAuth 2.0 que necesites solicitar para acceder a las APIs de Google, según el nivel de acceso que necesites. Si deseas obtener más información, consulta Alcances de OAuth 2.0 para las APIs de Google.

La biblioteca JavaScript google.accounts.oauth2 te ayuda a solicitar el consentimiento del usuario y obtener un token de acceso para trabajar con sus datos. El método initTokenClient() inicializa un nuevo cliente de token con el ID de cliente de tu app web. Para obtener más información, consulta Usa el modelo de tokens.

La función onApiLoad() carga las bibliotecas del selector de Google. Se llama a la función de devolución de llamada onPickerApiLoad() después de que la biblioteca del selector de Google se carga correctamente.

Muestra el selector de Google

La función createPicker() que se muestra a continuación verifica que la API del selector de Google termine de cargarse y que se cree un token de OAuth. Luego, esta función crea una instancia del selector de Google y la muestra:

    // Create and render a Google Picker object for selecting from Drive.
    function createPicker() {
      const showPicker = () => {
        // TODO(developer): Replace with your API key
        const picker = new google.picker.PickerBuilder()
            .addView(google.picker.ViewId.DOCS)
            .setOAuthToken(accessToken)
            .setDeveloperKey('API_KEY')
            .setCallback(pickerCallback)
            .build();
        picker.setVisible(true);
      }

      // Request an access token.
      tokenClient.callback = async (response) => {
        if (response.error !== undefined) {
          throw (response);
        }
        accessToken = response.access_token;
        showPicker();
      };

      if (accessToken === null) {
        // Prompt the user to select a Google Account and ask for consent to share their data
        // when establishing a new session.
        tokenClient.requestAccessToken({prompt: 'consent'});
      } else {
        // Skip display of account chooser and consent dialog for an existing session.
        tokenClient.requestAccessToken({prompt: ''});
      }
    }
    

Para crear una instancia del selector de Google, debes crear un objeto Picker con PickerBuilder. El PickerBuilder toma un View, un token de OAuth, una clave de desarrollador y una función de devolución de llamada a la que se debe llamar cuando se ejecuta correctamente (pickerCallback).

El objeto Picker renderiza un View a la vez. Especifica al menos una vista, ya sea con ViewId (google.​picker.​ViewId.*) o creando una instancia de un tipo (google.​picker.​*View). Especifica la vista por tipo para tener un control adicional sobre cómo se renderiza la vista.

Si se agrega más de una vista al selector de Google, los usuarios pueden cambiar de una vista a otra haciendo clic en una pestaña de la izquierda. Las pestañas se pueden agrupar de forma lógica con objetos ViewGroup.

Cómo implementar la devolución de llamada del selector de Google

Se puede usar una devolución de llamada del selector de Google para reaccionar a las interacciones del usuario en el selector de Google, como seleccionar un archivo o presionar Cancelar. El objeto Response transmite información sobre las selecciones del usuario.

    // A simple callback implementation.
    function pickerCallback(data) {
      let url = 'nothing';
      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        let doc = data[google.picker.Response.DOCUMENTS][0];
        url = doc[google.picker.Document.URL];
      }
      let message = `You picked: ${url}`;
      document.getElementById('result').innerText = message;
    }
    

La devolución de llamada recibe un objeto data codificado en JSON. Este objeto contiene un Action que el usuario realiza con el selector de Google (google.picker.Response.ACTION). Si el usuario selecciona un elemento Document, también se propaga el array google.picker.Response.DOCUMENTS. En este ejemplo, google.picker.Document.URL se muestra en la página principal. Para obtener detalles sobre los campos de datos, consulta la Referencia de JSON.

Filtra tipos de archivos específicos

Usa un objeto ViewGroup como forma de filtrar elementos específicos. En la siguiente muestra de código, se indica cómo la subvista "Google Drive" solo muestra documentos y presentaciones.

    let picker = new google.picker.PickerBuilder()
        .addViewGroup(
          new google.picker.ViewGroup(google.picker.ViewId.DOCS)
              .addView(google.picker.ViewId.DOCUMENTS)
              .addView(google.picker.ViewId.PRESENTATIONS))
        .setOAuthToken(oauthToken)
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
    
Para obtener una lista de los tipos de vistas válidos, consulta ViewId.

Ajusta la apariencia del selector de Google

Puedes usar el objeto Feature para activar o desactivar funciones en varias vistas. Para ajustar el aspecto de la ventana del selector de Google, usa la función PickerBuilder.enableFeature() o PickerBuilder.disableFeature(). Por ejemplo, si solo tienes una vista, te recomendamos ocultar el panel de navegación (Feature.NAV_HIDDEN) para que los usuarios tengan más espacio y puedan ver los elementos.

La siguiente muestra de código presenta un ejemplo del selector de búsqueda de una hoja de cálculo que usa esta función:

     let picker = new google.picker.PickerBuilder()
         .addView(google.picker.ViewId.SPREADSHEETS)
         .enableFeature(google.picker.Feature.NAV_HIDDEN)
         .setDeveloperKey(developerKey)
         .setCallback(pickerCallback)
         .build();
     

Cómo renderizar el selector de Google en otros idiomas

Para especificar el idioma de la IU, proporciona la configuración regional a la instancia de PickerBuilder con el método setLocale(locale).

En la siguiente muestra de código, se indica cómo establecer la configuración regional en francés:

    let picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.IMAGE_SEARCH)
        .setLocale('fr')
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
    

A continuación, se incluye una lista de configuraciones regionales que se admiten actualmente:

af
am
ar
bg
bn
ca
cs
da
de
el
en
en-GB
es
es-419
et
eu
fa
fi
fil
fr
fr-CA
gl
gu
hi
hr
hu
id
is
it
iw
ja
kn
ko
lt
lv
ml
mr
ms
nl
no
pl
pt-BR
pt-PT
ro
ru
sk
sl
sr
sv
sw
ta
te
th
tr
uk
ur
vi
zh-CN
zh-HK
zh-TW
zu