实施

• 创建新的 REST API
  1. 在 Amazon API Gateway 控制台中，选择左侧导航窗格中的 API。 
  2. 在 REST API 下，选择构建。
  3. 在选择协议部分中，选择 REST。 
  4. 在创建新 API 部分中，选择新建 API。
  5. 在设置部分中，输入 WildRydes 作为 API 名称，然后在端点类型下拉列表中选择边缘优化。
     注意：对于通过 Internet 访问的公共服务，请使用边缘优化的端点类型。区域端点通常用于主要从相同 AWS 区域访问的 API。
  6. 选择创建 API
• 创建授权方

  您必须创建 Amazon Cognito 用户池授权方。Amazon API Gateway 使用 Amazon Cognito 用户池（在模块 2 中创建）返回的 JSON Web 令牌（JWT）对 API 调用进行身份验证。在本节中，我们将为 API 创建授权器，以便我们可以使用用户池。

  使用以下步骤在 Amazon API Gateway 控制台中配置授权方：

  1. 在您刚刚创建的 WildRydes API 的左侧导航窗格中，选择授权方。
  2. 选择创建新授权方。 
  3. 在授权方名称字段中输入 WildRydes。
  4. 选择 Cognito 作为类型。 
  5. 在 Cognito 用户池下方的区域下拉列表中，选择您在本教程其余部分中使用的相同区域。在 Cognito 用户池名称字段中输入 WildRydes。
  6. 在令牌来源中输入 Authorization。 
  7. 选择创建。
  8. 要验证授权方配置，请选择测试。 
  9. 将从模块 2 的“验证您的实施”部分中的 ride.html 网页复制的授权令牌粘贴到授权（标头）字段中，并验证 HTTP 状态响应代码是否为 200。 

   

   

• 创建新的资源和方法

  在本节中，您将在 API 中创建新资源。然后，为该资源创建一个 POST 方法并对其进行配置，以使用 Lambda 代理集成，该集成由您在本模块第一步中创建的 RequestUnicorn 函数提供支持。

  1. 在 WildRydes API 的左侧导航窗格中，选择资源。
  2. 从操作下拉菜单中，选择创建资源。
  3. 输入 ride 作为资源名称，这将自动创建资源路径 /ride。
  4. 选中启用 API Gateway CORS 复选框。
  5. 选择创建资源。
  6. 在选中新创建的 /ride 资源的情况下，从操作下拉列表中选择创建方法。
  7. 从 OPTIONS 下显示的新下拉列表中选择 POST，然后选择选中标记图标。
  8. 选择 Lambda 函数作为集成类型。
  9. 选中使用 Lambda 代理集成复选框。
  10. 选择您在整个教程中为 Lambda 区域使用的相同区域。
  11. 输入 RequestUnicorn 作为 Lambda 函数。
  12. 选择保存。
      注意：如果您收到错误提示表示此函数不存在，请检查您选择的地区是否与您在上一模块中使用的地区相一致。
  13. 当系统提示您授予 Amazon API Gateway 权限以调用您的函数时，请选择确定。
  14. 选择方法请求卡。
  15. 选择授权旁的铅笔图标。
  16. 从下拉列表中，选择 WildRydes Cognito 用户池授权方，然后选择选中标记图标。
• 部署您的 API

  在本节中，您将从 Amazon API Gateway 控制台部署您的 API 。 

  1. 在操作下拉列表中，选择部署 API。
  2. 在部署阶段下拉列表中，选择 [新阶段]。
  3. 为​​​​阶段名称输入 prod。
  4. 选择部署。
  5. 复制调用 URL。您将在下一部分中使用它。
     
• 更新网站配置

  在此步骤中，您将更新网站部署中的 /js/config.js 文件，以包含刚创建的阶段的调用 URL。您需要直接从 Amazon API Gateway 控制台阶段编辑器页面的顶部复制此调用 URL，并将其粘贴到站点 config.js 文件的 invokeUrl 键中。您的配置文件仍将包含您在上一个模块中对 Amazon Cognito userPoolID、userPoolClientID 和 region 所做的更新。

  1. 在本地计算机上，导航到 js 文件夹，然后在所选的文本编辑器中打开 config.js 文件
  2. 将您在上一部分中从 Amazon API Gateway 控制台复制的调用 URL 粘贴到 config.js 文件的 invokeUrl 值中。 
  3. 保存文件。

  参见以下已完成的 config.js 文件的示例。请注意，文件中的实际值可能有所不同。
  

  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

  复制

      3.添加、提交更新后的 config.js 文件并将其推送到您的 Git 存储库，以将其自动部署至 Amplify 控制台。

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

  Code snippet copied

  复制
• 验证您的实施

  注意：您可能会发现，在更新 S3 存储桶中的 config.js 文件与更新的内容呈现在您的浏览器中之间可能存在延迟。您还应该确保在执行以下步骤前清除浏览器缓存。

  1. 将 ride.html 文件中的 ArcGIS JS 版本从 4.3 更新到 4.6（新版本不适用于本教程），如下所示：
     

  <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

  复制

  下面提供了完整的 ride.html 文件的示例。请注意，文件中的某些值可能有所不同。

  <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

  复制

      2.保存修改后的文件。 添加、提交修改后的文件并将其 git 推送到您的 Git 存储库，以将其自动部署至 AWS Amplify 控制台。

      3.访问您的网站域下的 /ride.html。

      4.如果您被重定向到 ArcGIS 登录页面，请使用之前在简介部分创建的用户凭证进行登录，这是本教程的先决条件。

      5.地图成功加载后，单击地图上的任意位置以设置出发位置。

      6.选择请求 Unicorn。您将看到右侧边栏中有一条通知，告知您独角兽正在途中，然后您将看到一个独角兽图标正在朝着您的出发位置飞奔。