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 Comienza a usar marcos de trabajo de Endpoints para Java. 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 procedimiento siguiente, se supone que ya implementaste la API de muestra según se indica en Comienza a usar marcos de trabajo de Endpoints para Java. 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 procedimiento siguiente.

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 java-docs-samples, ve al directorio que contiene la muestra de Java con el comando siguiente:

   cd YOUR_WORKING_DIRECTORY/java-docs-samples/appengine-java8/endpoints-v2-backend
   

2. Abre el archivo src/main/java/com/example/echo/Echo.java en el editor de texto.

3. En la anotación @ApiMethod del método getUserEmail, reemplaza YOUR_OAUTH_CLIENT_ID en los atributos audiences y clientIds con el ID de cliente que creaste.

   appengine-java8/endpoints-v2-backend/src/main/java/com/example/echo/Echo.java

   Ver en GitHub
   @ApiMethod(
       httpMethod = ApiMethod.HttpMethod.GET,
       authenticators = {EspAuthenticator.class},
       audiences = {"YOUR_OAUTH_CLIENT_ID"},
       clientIds = {"YOUR_OAUTH_CLIENT_ID"}
   )
   public Email getUserEmail(User user) throws UnauthorizedException {
     if (user == null) {
       throw new UnauthorizedException("Invalid credentials");
     }
   
     Email response = new Email();
     response.setEmail(user.getEmail());
     return response;
   }

4. Guarda el archivo Echo.java.

5. Limpia tu proyecto y, luego, compila tu API:

   Maven

   mvn clean package

   Gradle

         gradle clean
         gradle build

6. Vuelve a generar el documento de OpenAPI, openapi.json, para que contenga el ID de cliente.

   Maven

   mvn endpoints-framework:openApiDocs

   Gradle

   gradle endpointsOpenApiDocs

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 ID del proyecto que creaste para la API de muestra:

   gcloud config set project YOUR_PROJECT_ID
   

9. Implementa el documento actualizado de OpenAPI mediante el comando siguiente:

   gcloud endpoints services deploy target/openapi-docs/openapi.json
   

10. Espera a que el comando finalice y vuelve a implementar tu aplicación:

    Maven

    mvn appengine:deploy

    Gradle

    gradle appengineDeploy

Configura 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 getUserEmail 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.