實作

• 建立新的 REST API
  1. 在 Amazon API Gateway 主控台中，選取左側導覽窗格中的 API。 
  2. 在 REST API  下，選擇建置。
  3. 在選擇協定區段中，選取 REST。 
  4. 在建立新的 API區段中，選取新 API。
  5. 在設定區段中，輸入WildRydes 做為 API 名稱，然後在端點類型下拉式清單中選取邊緣最佳化。
     注意：對於從網際網路存取的公共服務，請使用邊緣最佳化端點。區域端點通常用於主要從相同 AWS 區域內存取的 API。
  6. 選擇建立 API。
• 建立授權方

  您必須建立 Amazon Cognito 使用者集區授權方。Amazon API Gateway 使用由 Amazon Cognito 使用者集區 (在單元 2 中建立) 所傳的 JSON Web Token (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 Proxy 整合 (由您在本單元第一個步驟中建立的 RequestUnicorn 函數提供支援)。

  1. 在 WildRydes API 的左側導覽窗格中，選取資源。
  2. 從動作下拉式清單中，選取建立資源。
  3. 輸入 ride 做為資源名稱，隨即將自動建立資源路徑 /ride。
  4. 選取啟用 API Gateway CORS 核取方塊。
  5. 選擇建立資源。
  6. 選取新建立的 /ride 資源之後，從動作下拉式清單中選取建立方法。
  7. 從選項下方顯示的新下拉式清單中選取 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 和區域所做的更新。

  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.選取請求獨角獸。您應該會在側邊欄中看到一個通知，獨角獸正在路上，然後看到獨角獸飛到您的搭車位置。