Implementación

• Crear una nueva API de REST
  1. En la consola de Amazon API Gateway, seleccione API en el panel de navegación de la izquierda. 
  2. En API de REST, elija Crear.
  3. En la sección Elegir el protocolo, seleccione REST. 
  4. En la sección Crear nueva API, seleccione Nueva API.
  5. En la sección Configuración, escriba WildRydes como nombre de la API y seleccione Optimizado para bordes en el menú desplegable Tipo de punto de conexión.
     Nota: Use tipos de punto de conexión optimizados para bordes para los servicios públicos a los cuales se obtiene acceso a través de Internet. Normalmente, los puntos de conexión regionales se utilizan para las API a las cuales se obtiene acceso principalmente desde el interior de la misma región de AWS.
  6. Elija Crear API.
• Crear autorizador

  Debe crear un autorizador de grupos de usuarios de Amazon Cognito. Amazon API Gateway utiliza tokens web JSON (JWT) que devuelve el grupo de usuarios de Amazon Cognito (creado en el módulo 2) para autenticar las llamadas a la API. En esta sección, crearemos un autorizador para la API, de modo que podamos utilizar el grupo de usuarios.

  Siga estos pasos para configurar el autorizador en la consola de Amazon API Gateway:

  1. En el panel de navegación izquierdo de la API de WildRydes que acaba de crear, seleccione Autorizadores.
  2. Elija Crear nuevo autorizador. 
  3. Ingrese WildRydes en el campo Nombre del autorizador.
  4. Seleccione Cognito como Tipo. 
  5. En Grupo de usuarios de Cognito, en el menú desplegable Región, seleccione la misma región que ha estado utilizando durante el resto del tutorial. Ingrese WildRydes en el campo de nombre del grupo de usuarios de Cognito. 
  6. Ingrese Autorización en el Origen de token. 
  7. Elija Crear.
  8. Para verificar la configuración del autorizador, seleccione Probar. 
  9. Pegue el token de autorización copiado de la página web ride.html en la sección Valide su implementación del Módulo 2 en el campo Autorización (encabezado) y verifique que el código de respuesta de estado HTTP sea 200. 

   

   

• Crear un nuevo recurso y método

  En esta sección, creará un nuevo recurso dentro de la API. A continuación, cree un método POST para ese recurso y configúrelo para que use una integración de proxy de Lambda respaldada por la función RequestUnicorn que creó en el primer paso de este módulo.

  1. En el panel de navegación izquierdo de la API WildRydes, seleccione Recursos.
  2. En el menú desplegable Acciones, seleccione Crear recurso.
  3. Ingrese ride como Nombre del recurso, que creará automáticamente la ruta del recurso /ride.
  4. Seleccione la casilla de verificación Habilitar API Gateway CORS.
  5. Elija Crear recurso.
  6. Con el recurso recién creado /ride seleccionado, en el menú desplegable Acciones, seleccione Crear método.
  7. Seleccione POST en el nuevo menú desplegable que aparece en OPCIONES y, a continuación, seleccione el ícono de marca de verificación.
  8. Seleccione Función de Lambda en Tipo de integración.
  9. Seleccione la casilla de verificación Usar integración de proxy de Lambda.
  10. Seleccione la misma región que ha estado utilizando durante todo el tutorial para Región de Lambda.
  11. Ingrese RequestUnicorn para la función de Lambda.
  12. Elija Guardar.
      Nota: Si recibe un error de que no existe la función, verifique que la región que seleccionó coincida con la que utilizó en los módulos anteriores.
  13. Cuando se le solicite que conceda permiso a Amazon API Gateway para invocar la función, elija Aceptar.
  14. Seleccione la tarjeta Solicitud de método.
  15. Elija el ícono del lápiz que aparece junto a Autorización.
  16. Seleccione el autorizador del grupo de usuarios de Cognito WildRydes en la lista desplegable y seleccione el ícono de la marca de verificación.
• Implementar la API

  En esta sección, implementará la API desde la consola de Amazon API Gateway. 

  1. En la lista desplegable Acciones, seleccione Implementar API.
  2. En la lista desplegable Etapa de implementación, seleccione [Nueva etapa].
  3. Ingrese prod en Nombre de etapa.
  4. Elija Implementar.
  5. Copie el valor de URL de invocación. Lo usará en la sección siguiente.
     
• Actualizar la configuración del sitio web

  En este paso, actualizará 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. 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 la pegará en la clave invokeUrl del archivo config.js del sitio. El archivo de configuración seguirá conteniendo las actualizaciones que realizó en el módulo anterior para sus valores de userPoolID, userPoolClientID y region de Amazon Cognito.

  1. En la máquina local, navegue hasta la carpeta js y abra el archivo config.js en el editor de texto de su elección.
  2. Pegue la URL de invocación que copió de la consola de Amazon API Gateway en la sección anterior en el valor de invokeUrl del archivo config.js. 
  3. Guarde el archivo.

  Consulte el siguiente 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, 
  
      } 
  
  };

  Code snippet copied

  Copiar

      3. Agregue, confirme y envíe el archivo config.js actualizado al repositorio de Git para que se implemente automáticamente en la consola de Amplify.

  $ git add .
  $ git commit -m "new_configuration"
  $ git push
  

  Code snippet copied

  Copiar
• 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.

  1. Actualice la versión JS de ArcGIS de 4.3 a 4.6 (las versiones más recientes no funcionarán en este tutorial) en el archivo ride.html de la siguiente manera:
     

  <script src="https://js.arcgis.com/4.6/"></script>
   <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

  Code snippet copied

  Copiar

  A continuación, se muestra un ejemplo de un archivo ride.html completo. Tenga en cuenta que algunos valores del archivo pueden ser diferentes.

  <div id="noApiMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">Successfully Authenticated!</h3>
              </div>
              <div class="panel-body">
                  <p>This page is not functional yet because there is no API invoke URL configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 3.</p>
                  <p>In the meantime, if you'd like to test the Amazon Cognito user pool authorizer for your API, use the auth token below:</p>
                  <textarea class="authToken"></textarea>
              </div>
          </div>
      </div>
  
      <div id="noCognitoMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">No Cognito User Pool Configured</h3>
              </div>
              <div class="panel-body">
                  <p>There is no user pool configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 2 of the workshop.</p>
              </div>
          </div>
      </div>
  
      <div id="main">
          <div id="map">
          </div>
      </div>
  
      <div id="authTokenModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="authToken">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Your Auth Token</h4>
                  </div>
                  <div class="modal-body">
                      <textarea class="authToken"></textarea>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
              </div>
          </div>
      </div>
  
  
      <script src="js/vendor/jquery-3.1.0.js"></script>
      <script src="js/vendor/bootstrap.min.js"></script>
      <script src="js/vendor/aws-cognito-sdk.min.js"></script>
      <script src="js/vendor/amazon-cognito-identity.min.js"></script>
      <script src="https://js.arcgis.com/4.6/"></script>
      <script src="js/config.js"></script>
      <script src="js/cognito-auth.js"></script>
      <script src="js/esri-map.js"></script>
      <script src="js/ride.js"></script>
  </body>
  
  </html>

  Code snippet copied

  Copiar

      2. Guarde el archivo modificado. Agréguelo, confírmelo y envíelo al repositorio de Git para que se implemente de forma automática en la consola de AWS Amplify.

      3. Vaya a /ride.html en el dominio del sitio web.

      4. Si se le redirige a la página de inicio de sesión de ArcGIS, inicie sesión con las credenciales de usuario que creó anteriormente en la sección Introducción como requisito previo de este tutorial.

      5. Después de que se haya cargado el mapa, haga clic en cualquier lugar del mapa para establecer una ubicación de recogida.

      6. 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 ícono de unicornio que vuela hacia la ubicación de recogida.