Envía una solicitud autenticada desde una aplicación de JavaScript

Nota: Esta página incluye contenido desactualizado. Si quieres obtener información sobre cómo elegir una opción para que Cloud Endpoints administre tu API, consulta Cómo elegir una opción de extremos. Para obtener información sobre cómo administrar tu API a través de Apigee, consulta Administración de API de Apigee.

En esta página, se describe cómo enviar una solicitud autenticada desde una aplicación de JavaScript que se ejecuta de forma local en una API de REST creada con Cloud Endpoints Frameworks. La aplicación JavaScript muestra cómo usar el Acceso con Google y cómo enviar un token de ID de Google en la solicitud para autenticar al usuario. Cuando la aplicación de JavaScript envía la solicitud, Endpoints Frameworks autentica al usuario antes de pasar la solicitud al código de backend que se ejecuta en el entorno estándar de App Engine.

Prerequisites

Para ejecutar la aplicación de JavaScript de muestra, haz lo siguiente:

• Debes haber implementado la API de muestra según se indica en Comenzar a usar Endpoints Frameworks para Python. Asegúrate de obtener una respuesta exitosa cuando envíes una solicitud a la API, tal como se describe en Cómo enviar una solicitud a la API.

• Busca el ID del proyecto de Google Cloud que creaste para la API de muestra, puesto que debes agregarlo al código de JavaScript de muestra. Si necesitas ayuda para encontrar el ID del proyecto, consulta la sección sobre cómo crear una lista de los proyectos.

• Necesitas un servidor web en tu computadora local para entregar el archivo index.html de muestra que contiene el código de JavaScript. En esta página, se incluyen los pasos para ejecutar un servidor simple mediante Python, pero puedes usar cualquier servidor web.

Descarga el código del cliente de JavaScript de muestra

1. Clona la muestra en tu máquina local:

   git clone https://github.com/GoogleCloudPlatform/web-docs-samples
   

2. Ve al directorio que contiene el cliente de JavaScript:

   cd web-docs-samples/endpoints-frameworks
   

Cómo crear ID de cliente de OAuth 2.0

A fin de configurar la muestra para la autenticación, debes configurar un ID de cliente de OAuth 2.0 en el código de JavaScript de muestra y en el código de backend. La app de JavaScript usa el ID de cliente para obtener un token de ID de Google desde el servidor de OAuth 2.0 de Google y envía este token en la solicitud. Endpoints Frameworks usa el ID de cliente para autenticar el token de ID que la app de JavaScript envió en la solicitud.

Para crear el ID de cliente, realiza los siguientes pasos:

1. En Google Cloud Console, ve a la página Credenciales.

   Ir a la página Credenciales

2. En la lista de proyectos, selecciona el proyecto que creaste para la API de muestra.

3. Haz clic en el botón Crear credenciales y, luego, selecciona ID de cliente de OAuth. Si es la primera vez que creas un ID de cliente en este proyecto, usa los pasos secundarios para establecer un nombre de producto en la pantalla de consentimiento; de lo contrario, salta al paso siguiente.

   1. Haz clic en el botón Configurar pantalla de consentimiento.
   2. Ingresa un nombre en el campo Nombre de la aplicación.
   3. Haz clic en Guardar.

4. En Tipo de aplicación, haz clic en Aplicación web.

5. En el campo Orígenes autorizados de JavaScript, ingresa lo siguiente:

   http://localhost:8080
   

6. Haga clic en Crear.

7. Copia tu ID de cliente. Tu ID de cliente completo es similar al siguiente, pero es exclusivo de la aplicación web en tu proyecto.

   271473851874-mtll5dk2vultovbtilt31hakqbinpuvd.apps.googleusercontent.com

Para obtener más información sobre cómo crear varios ID de cliente, consulta la página sobre cómo configurar OAuth 2.0.

Cómo configurar el código de backend y volver a implementar

Para que Cloud Endpoints Frameworks autentique la solicitud enviada desde la aplicación de JavaScript, debes agregar el ID de cliente que acabas de crear al código de muestra y volver a implementar un documento actualizado de OpenAPI y el código de backend de la aplicación.

En el siguiente procedimiento, se da por sentado que ya implementaste la API de muestra de Comenzar a usar Endpoints Frameworks para Python. Asegúrate de obtener una respuesta exitosa cuando envíes una solicitud a la API, tal como se describe en Cómo enviar una solicitud a la API antes de iniciar el siguiente procedimiento.

Para configurar el código de backend y volver a implementar, realiza los siguientes pasos:

1. En el directorio en el que clonaste el repositorio python-docs-samples, ve al directorio que contiene la muestra de Python con el siguiente comando:

   cd YOUR_WORKING_DIRECTORY/python-docs-samples/appengine/standard/endpoints-frameworks-v2/echo
   

2. Abre el archivo main.py en el editor de texto.

3. En el decorador de la función get_user_email, reemplaza your-oauth-client-id.com por el ID de cliente que acabas de crear.

4. Guarda el archivo main.py.

5. Asegúrate de que estés en el directorio principal de muestra:

   python-docs-samples/appengine/standard/endpoints-frameworks-v2/echo
   

6. Vuelve a generar el documento de OpenAPI para que contenga el ID de cliente. En el siguiente comando, reemplaza YOUR_PROJECT_ID por el proyecto que creaste para la API de muestra.

   python lib/endpoints/endpointscfg.py get_openapi_spec main.EchoApi \
       --hostname YOUR_PROJECT_ID.appspot.com
   

   Cuando el proceso finaliza con éxito, se muestra el siguiente mensaje:

   OpenAPI spec written to ./echov1openapi.json
   

7. Asegúrate de que la CLI de Google Cloud (gcloud) esté autorizada para acceder a tus datos y servicios en Google Cloud:

   gcloud auth login
   

8. Configura el proyecto predeterminado para la CLI de Google Cloud. Reemplaza YOUR_PROJECT_ID por el proyecto que creaste para la API de muestra:

   gcloud config set project YOUR_PROJECT_ID
   

9. Implementa el documento actualizado de OpenAPI:

   gcloud endpoints services deploy echov1openapi.json
   

   Cuando el proceso finalice con éxito, el comando genera una línea como la que se indica a continuación:

   Service Configuration [2018-02-13r2] uploaded for service [example-project-12345.appspot.com]
   

10. Copia el nuevo ID de configuración del servicio.

11. Abre el archivo app.yaml en el texto. Reemplaza el valor del campo ENDPOINTS_SERVICE_VERSION por el nuevo ID de configuración del servicio. Por ejemplo:

    ENDPOINTS_SERVICE_NAME: example-project-12345.appspot.com
    ENDPOINTS_SERVICE_VERSION: 2018-02-13r2
    

12. Guarda el archivo app.yaml.

13. Vuelve a implementar el código de backend:

    gcloud app deploy
    

Cómo configurar el código de JavaScript

Para configurar el código de JavaScript, realiza los siguientes pasos:

1. En el directorio web-docs-samples/endpoints-frameworks, abre el archivo main.js con un editor de texto.

2. En la función initGoogleAuth, reemplaza YOUR_CLIENT_ID por el ID de cliente que creaste.

   endpoints-frameworks/main.js

   Ver en GitHub
   function initGoogleAuth (clientId = 'YOUR_CLIENT_ID') {
     gapi.auth2.init({
       client_id: clientId,
       scope: 'https://www.googleapis.com/auth/userinfo.email'
     }).then(() => {
       document.getElementById('sign-in-btn').disabled = false;
     }).catch(err => {
       console.log(err);
     });
   }

3. En la función sendSampleRequest, reemplaza YOUR_PROJECT_ID por el ID del proyecto que creaste para la API de muestra.

   endpoints-frameworks/main.js

   Ver en GitHub
   function sendSampleRequest (projectId = 'YOUR_PROJECT_ID') {
     var user = gapi.auth2.getAuthInstance().currentUser.get();
     var idToken = user.getAuthResponse().id_token;
     var endpoint = `https://${projectId}.appspot.com/_ah/api/echo/v1/email`;
     var xhr = new XMLHttpRequest();
     xhr.open('GET', endpoint + '?access_token=' + encodeURIComponent(idToken));
     xhr.onreadystatechange = function () {
       if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
         window.alert(xhr.responseText);
       }
     };
     xhr.send();
   }

Envía una solicitud autenticada

1. En el directorio en el que clonaste el repositorio web-docs-samples, ve al directorio que contiene la muestra de JavaScript:

   cd YOUR_WORKING_DIRECTORY/web-docs-samples/endpoints-frameworks
   

2. Inicia tu servidor web para entregar index.html en el puerto 8080. El siguiente ejemplo usa el servidor simple de Python:

   python -m http.server 8080
   

3. En tu navegador, ingresa localhost:8080.

   La aplicación de JavaScript muestra dos botones.

   

4. Haz clic en Acceder (Sign In). Aparecerá la página Acceder con Google.

5. Después de que hayas accedido, haz clic en el botón Enviar solicitud de muestra. La primera vez que envíes una solicitud, es posible que experimentes una demora de alrededor de 20 segundos mientras se inicia App Engine. Endpoints Frameworks intercepta las solicitudes y usa el ID de cliente que configuraste en el código de backend para autenticar la solicitud. Si la autenticación se realiza de forma correcta, pasará lo siguiente:

   1. Endpoints Frameworks pasará la solicitud al backend de muestra que se ejecuta en App Engine.

   2. En el código de backend, el método get_user_email muestra la dirección de correo electrónico de la cuenta de usuario que usaste para el acceso.

   3. El cliente de JavaScript muestra un cuadro diálogo con la dirección de correo electrónico.

Descripción general del cliente de JavaScript

El cliente de JavaScript usa el Acceso con Google, que administra el flujo de OAuth 2.0. En esta sección, se proporciona una descripción general breve del código del cliente de JavaScript.

Configuración de Auth

1. Carga la biblioteca de la plataforma de las API de Google para crear el objeto gapi:

   endpoints-frameworks/index.html

   Ver en GitHub
     <script src="https://apis.google.com/js/platform.js?onload=loadAuthClient" async defer></script>
   </head>

2. Después de que se cargue la biblioteca de la plataforma de las API de Google, carga la biblioteca auth2:

   endpoints-frameworks/main.js

   Ver en GitHub
   function loadAuthClient () {
     gapi.load('auth2', initGoogleAuth);
   }

3. Inicializa el objeto GoogleAuth:

   endpoints-frameworks/main.js

   Ver en GitHub
   function initGoogleAuth (clientId = 'YOUR_CLIENT_ID') {
     gapi.auth2.init({
       client_id: clientId,
       scope: 'https://www.googleapis.com/auth/userinfo.email'
     }).then(() => {
       document.getElementById('sign-in-btn').disabled = false;
     }).catch(err => {
       console.log(err);
     });
   }

Cuando inicializas el objeto GoogleAuth, lo configuras con tu ID de cliente de OAuth 2.0 y cualquier opción adicional que desees especificar. Por lo general, puedes especificar el nivel de acceso. Los alcances permiten que la aplicación solo solicite acceso a los recursos que necesita, al tiempo que permiten a los usuarios controlar el nivel de acceso que otorgan a tu aplicación. Antes de que comiences a implementar la autorización de OAuth 2.0, te recomendamos identificar los alcances para los que la aplicación necesitará permiso de acceso. En este ejemplo, se solicita acceso al alcance https://www.googleapis.com/auth/userinfo.email, que otorga acceso para ver la dirección de correo electrónico del usuario.

Acceder

Después de haber inicializado el objeto GoogleAuth, puedes solicitar al usuario que acceda mediante la llamada a la función signIn del objeto GoogleAuth:

endpoints-frameworks/main.js

Ver en GitHub

function signIn () {
  gapi.auth2.getAuthInstance().signIn().then(() => {
    document.getElementById('sign-in-btn').hidden = true;
    document.getElementById('sign-out-btn').hidden = false;
    document.getElementById('send-request-btn').disabled = false;
  }).catch(err => {
    console.log(err);
  });
}

Cómo hacer una solicitud con el token de ID

Cuando el usuario haya accedido, envía una solicitud con el encabezado Autorización mediante el token de ID del usuario:

endpoints-frameworks/main.js

Ver en GitHub

function sendSampleRequest (projectId = 'YOUR_PROJECT_ID') {
  var user = gapi.auth2.getAuthInstance().currentUser.get();
  var idToken = user.getAuthResponse().id_token;
  var endpoint = `https://${projectId}.appspot.com/_ah/api/echo/v1/email`;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', endpoint + '?access_token=' + encodeURIComponent(idToken));
  xhr.onreadystatechange = function () {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
      window.alert(xhr.responseText);
    }
  };
  xhr.send();
}

¿Qué sigue?

• Para obtener más información sobre el Acceso con Google, consulta la referencia del cliente de JavaScript en el Acceso con Google.