Implementación

• Crear una nueva API REST

  a. En la consola de administración de AWS, haga clic en Servicios y seleccione API Gateway en Servicios de aplicaciones.
  b. Elija Crear API.
  c. Seleccione Nueva API e ingrese WildRydes en Nombre de la API.
  d. Mantenga seleccionada la opción Optimizado para borde en el menú desplegable Tipo de punto de enlace. Nota: Los elementos optimizados para borde son los mejores para los servicios públicos a los cuales se obtiene acceso a través de Internet. Normalmente, los puntos de enlace regionales se utilizan para las API a las cuales se obtiene acceso principalmente desde el interior de la misma región de AWS.
  e. Elija Crear API

• Crear un autorizador de grupos de usuarios de Cognito

  Amazon API Gateway puede utilizar los tokens de JWT que devuelven los grupos de usuarios de Cognito para autenticar las llamadas a la API. En este paso, configurará un autorizador para que la API utilice el grupo de usuarios que creó en el módulo 2.

  En la consola de Amazon API Gateway, cree un nuevo autorizador de grupo de usuarios de Cognito para la API. Configúrelo con los detalles del grupo de usuarios que creó en el módulo anterior. Puede probar la configuración en la consola al copiar y pegar el token de autenticación que se le presenta después de iniciar sesión mediante la página /signin.html del sitio web actual.
  

  a. En la API recién creada, elija Autorizadores.

  b. Elija Crear nuevo autorizador.

  c. Ingrese WildRydes en el nombre del autorizador.

  d. Seleccione Cognito para el tipo.

  e. En el menú desplegable de regiones en Grupo de usuarios de Cognito, seleccione la región en la que creó el grupo de usuarios de Cognito en el módulo 2 (se selecciona la región actual de manera predeterminada).

  f. Ingrese WildRydes (o el nombre que asignó al grupo de usuarios) en la entrada Grupo de usuarios de Cognito.

  g. Ingrese Autorización en la Fuente de token.

  h. Elija Crear.

  
  Verificar la configuración de autorizador

  j. Abra una pestaña nueva en el navegador y vaya a /ride.html , en el dominio del sitio web.

  k. Si es redirigido a la página de inicio de sesión, inicie sesión con el usuario que creó en el último módulo. Se le redirigirá nuevamente a /ride.html.

  l. Copie el token de autorización de la notificación en /ride.html,

  m. Regrese a la pestaña anterior en la que acaba de finalizar la creación del Autorizador

  n. Haga clic en Probar en la sección inferior de la tarjeta del autorizador.

  o. Pegue el token de autorización en el campo Token de autorización en el cuadro de diálogo emergente.

  p. Haga clic en el botón Probar y verifique que el código de respuesta sea 200 y que se muestran las solicitudes correspondientes a su usuario.

• Crear un nuevo recurso y método

  Cree un nuevo recurso llamado /ride en su API. A continuación, cree un método POST para ese recurso y configúrelo para que use una integración de proxy Lambda respaldada por la función RequestUnicorn que creó en el primer paso de este módulo.

  a. En la barra de navegación izquierda, haga clic en Recursos en la API de WildRydes.

  b. En el menú desplegable Acciones, elija Crear recurso.

  c. Ingrese ride en Nombre de recurso.

  d. Asegúrese de que la Ruta de recursos tenga el valor ride.

  e. Seleccione Habilitar API Gateway CORS para el recurso.

  f. Haga clic en Crear recurso.

  g. Con el recién creado recurso /ride seleccionado, en el menú desplegable Acción, seleccione Crear método.

  h. Seleccione POST en el nuevo menú desplegable que aparece y, a continuación, haga clic en la marca de verificación.

  i. Seleccione Función Lambda para el tipo de integración.

  j. Marque la casilla Usar integración de proxy de Lambda.

  k. Seleccione la región que utiliza para Región de Lambda.

  l. Ingrese el nombre de la función que creó en el módulo anterior, RequestUnicorn, en Función Lambda.

  m. Elija Guardar. Si recibe un error de que no existe la función, verifique que la región que seleccionó coincida con la que utilizó en el módulo anterior.

  n. Cuando se le solicite que conceda permiso a Amazon API Gateway para invocar la función, elija Aceptar.

  o. Elija la tarjeta Solicitud de método.

  p. Elija el icono del lápiz que aparece junto a Autorización.

  q. Seleccione el autorizador del grupo de usuarios de Cognito WildRydes en la lista desplegable y haga clic en el icono de la marca de verificación.

• Implementar la API

  En la consola de Amazon API Gateway, elija Actions (Acciones), Deploy API (Implementar API). Se le pedirá que cree una nueva etapa. Puede utilizar prod en el nombre de la etapa.

  a. En la lista desplegable Acciones, seleccione Implementar la API.
  b. En la lista desplegable Etapa de implementación, seleccione [Nueva etapa].
  c. Ingrese prod en Nombre de etapa.
  d. Elija Implementar.
  e. Anote el valor de URL de invocación. Lo usará en la sección siguiente.
  

• Actualizar la configuración del sitio web

  Actualice el archivo /js/config.js en la implementación del sitio web para incluir la URL de invocación de la etapa que acaba de crear. Debe copiar la URL de invocación directamente de la parte superior de la página del editor de etapas en la consola de Amazon API Gateway y pegarla en la clave _config.api.invokeUrl del archivo /js/config.js de su sitio. Asegúrese de que, al actualizar el archivo de configuración, este todavía contenga las actualizaciones que efectuó en el módulo anterior para el grupo de usuarios de Cognito.

  a. Abra el archivo config.js en un editor de texto.
  b. Actualice la configuración invokeUrl en la clave api del archivo config.js. Defina el valor de URL de invocación de la etapa de implementación que creó en la sección anterior.

  A continuación, se muestra un ejemplo de un archivo config.js completo. Tenga en cuenta que los valores reales del archivo serán distintos.
  

  window._config = {
  
      cognito: {
  
          userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         
  
          userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
  
          region: 'us-west-2' // e.g. us-east-2 
  
      }, 
  
      api: { 
  
          invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 
  
      } 
  
  };

  c. Guarde el archivo modificado y envíelo al repositorio de Git para que se implemente de forma automática en la consola de Amplify.
  

  $ git push
  

• Validar la implementación

  Nota: Es posible que experimente un retraso entre la actualización del archivo config.js en el bucket de S3 y el momento en que el contenido actualizado sea visible en el navegador. También debe asegurarse de vaciar la memoria caché del navegador antes de ejecutar los siguientes pasos.

  a. Vaya a /ride.html ubicado en el dominio del sitio web.
  b. Si se le redirecciona a la página de inicio de sesión, inicie la sesión con el usuario que creó en el módulo anterior.
  c. Después de que se haya cargado el mapa, haga clic en cualquier lugar del mapa para establecer una ubicación de recogida.
  d. Elija Solicitar unicornio. Debe ver una notificación en la barra lateral derecha de que un unicornio está en camino y, a continuación, ver un icono de unicornio que vuela hacia el lugar de recogida.