Implementierung

• Neue REST-API erstellen
  1. Wählen Sie in der Amazon-API-Gateway-Konsole im linken Navigationsbereich APIs aus. 
  2. Wählen Sie die Option Entwickeln unter REST-API. 
  3. Wählen Sie im Abschnitt Protokoll auswählen die Option REST aus. 
  4. Wählen Sie im Abschnitt Neue API erstellen die Option Neue API aus.
  5. Geben Sie im Abschnitt Einstellungen WildRydes als API-Namen ein und wählen Sie in der Dropdownliste Endpunkt-Typ die Option Edge-optimiert aus.
     Hinweis: Verwenden Sie Edge-optimierte Endpunkt-Typen für öffentliche Services, auf die über das Internet zugegriffen wird. Regionale Endpunkte werden typischerweise für APIs verwendet, auf die primär von der gleichen AWS-Region aus zugegriffen wird.
  6. Wählen Sie API erstellen aus.
• Genehmiger erstellen

  Sie müssen einen Amazon-Cognito-Benutzerpool-Genehmiger erstellen. Amazon API Gateway verwendet JSON-Web-Token (JWT), die vom Amazon-Cognito-Benutzerpool (erstellt in Modul 2) zurückgegeben werden, um die API-Aufrufe zu authentifizieren. In diesem Abschnitt erstellen wir einen Genehmiger für die API, damit wir den Benutzerpool nutzen können.

  Gehen Sie wie folgt vor, um den Genehmiger in der Amazon-API-Gateway-Konsole zu konfigurieren:

  1. Wählen Sie im linken Navigationsbereich der WildRydes-API, die Sie gerade erstellt haben, Genehmiger aus.
  2. Wählen Sie Neuen Genehmiger erstellen. 
  3. Geben Sie WildRydes in das Feld Genehmiger-Name ein.
  4. Wählen Sie Cognito als Typ aus. 
  5. Wählen Sie unter Cognito-Benutzerpool in der Dropdown-Liste Region dieselbe Region aus, die Sie für den Rest des Tutorials verwendet haben. Geben Sie WildRydes in das Feld Cognito-Benutzerpool-Name ein. 
  6. Geben Sie Autorisierung für die Token-Quelle ein. 
  7. Wählen Sie Erstellen aus.
  8. Um die Genehmiger-Konfiguration zu überprüfen, wählen Sie Test aus. 
  9. Fügen Sie das von der Webseite ride.html kopierte Autorisierungstoken im Abschnitt „Implementierung validieren“ von Modul 2 in das Feld Autorisierung (Header) ein und überprüfen Sie, ob der HTTP-Status-Antwortcode 200 ist. 

   

   

• Neue Ressource und Methode erstellen

  In diesem Abschnitt erstellen Sie eine neue Ressource in Ihrer API. Erstellen Sie anschließend eine POST-Methode für diese Ressource und konfigurieren Sie sie für die Verwendung einer Lambda-Proxy-Integration, die durch die RequestUnicorn-Funktion geschützt wird, die Sie im ersten Schritt dieses Moduls erstellt haben.

  1. Wählen Sie im linken Navigationsbereich Ihrer WildRydes-API Ressourcen aus.
  2. Wählen Sie im Dropdown-Menü Aktionen die Option Ressource erstellen aus.
  3. Geben Sie ride alsRessourcennamen ein, wodurch automatisch der Ressourcenpfad /ride erstellt wird.
  4. Aktivieren Sie das Kontrollkästchen für API Gateway CORS aktivieren.
  5. Wählen Sie Ressource erstellen.
  6. Wählen Sie die neu erstellte Ressource /ride aus und wählen Sie im Dropdown-Menü Aktionen  die Option Methode erstellen aus.
  7. Wählen Sie POST aus dem neuen Dropdown-Menü, das unter OPTIONEN angezeigt wird, und wählen Sie dann das Häkchen-Symbol aus.
  8. Wählen Sie Lambda-Funktion für den Integrationstyp aus.
  9. Aktivieren Sie das Kontrollkästchen für Lambda-Proxy-Integration verwenden.
  10. Wählen Sie dieselbe Region aus, die Sie im gesamten Tutorial für Lambda-Region verwendet haben.
  11. Geben Sie RequestUnicorn für Lambda-Funktion ein.
  12. Wählen Sie Speichern aus.
      Hinweis: Erhalten Sie die Fehlermeldung, dass Ihre Funktion nicht existiert, stellen Sie sicher, dass die von Ihnen ausgewählte Region der entspricht, die Sie im vorherigen Modul verwendet haben.
  13. Wenn Sie aufgefordert werden, Amazon API Gateway die Berechtigung zum Aufrufen Ihrer Funktion zu erteilen, wählen Sie OK.
  14. Wählen Sie die Karte Methodenanforderung aus.
  15. Klicken Sie auf das Stiftsymbol neben Autorisierung.
  16. Wählen Sie den WildRydes-Cognito-Benutzerpool-Genehmiger aus der Dropdown-Liste aus und klicken Sie auf das Häkchen-Symbol.
• Bereitstellen Ihrer API

  In diesem Abschnitt stellen Sie Ihre API von der Amazon-API-Gateway-Konsole aus bereit. 

  1. Wählen Sie in der Dropdown-Liste Aktionen API bereitstellen aus.
  2. Wählen Sie [Neue Stufe] aus der Dropdown-Liste Bereitstellungsstufe aus.
  3. Geben Sie prod als Stufennamen ein.
  4. Wählen Sie Bereitstellen.
  5. Kopieren Sie die Aufruf-URL. Diese verwenden Sie im nächsten Abschnitt.
     
• Website-Konfiguration aktualisieren

  In diesem Schritt aktualisieren Sie die Datei /js/config.js in Ihrer Website-Bereitstellung, sodass sie die Aufruf-URL der Stufe enthält, die Sie gerade erstellt haben. Kopieren Sie die Aufruf-URL direkt aus dem oberen Bereich der Bearbeitungsseite für die Stufe der Amazon-API-Gateway-Konsole und fügen Sie sie in den Schlüssel invokeUrl der Datei config.js Ihrer Site ein. Ihre Konfigurationsdatei enthält weiterhin die Aktualisierungen, die Sie im vorherigen Modul für Ihre Amazon Cognito userPoolID, userPoolClientID und Region vorgenommen haben.

  1. Navigieren Sie auf Ihrem lokalen Rechner zum Ordner js und öffnen Sie die Datei config.js in einem Texteditor Ihrer Wahl
  2. Fügen Sie die Aufruf-URL, die Sie im vorherigen Abschnitt aus der Amazon-API-Gateway-Konsole kopiert haben, in den invokeUrl-Wert der Datei config.js ein. 
  3. Speichern Sie die Datei.

  Sehen Sie sich das folgende Beispiel einer abgeschlossenen Datei config.js an. Beachten Sie, dass die tatsächlichen Werte für Ihre Daten abweichen werden.
  

  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

  Kopieren

      3. Fügen Sie die aktualisierte Datei config.js hinzu, legen Sie sie fest und übertragen Sie sie in Ihr Git-Repository, damit sie automatisch in der Amplify-Konsole bereitgestellt wird.

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

  Code snippet copied

  Kopieren
• Eigene Implementierung überprüfen

  Hinweis: Möglicherweise tritt zwischen dem Aktualisieren des S3-Buckets und der Anzeige des aktualisierten Inhalts in Ihrem Browser eine Verzögerung auf. Sie sollten zudem sicherstellen, dass Sie vor dem Ausführen der folgenden Schritte Ihren Browser-Cache löschen.

  1. Aktualisieren Sie die ArcGIS-JS-Version von 4.3 auf 4.6 (neuere Versionen funktionieren in diesem Tutorial nicht) in der Datei ride.html als:
     

  <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

  Kopieren

  Ein Beispiel für eine vollständige ride.html-Datei ist unten aufgeführt. Beachten Sie, dass einige Werte in Ihrer Datei unterschiedlich sein können.

  <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

  Kopieren

      2. Speichern Sie die geänderte Datei. Fügen Sie sie hinzu, legen Sie sie fest und übertragen Sie sie in Ihr Git-Repository, damit sie automatisch auf der AWS-Amplify-Konsole bereitgestellt wird.

      3. Rufen Sie /ride.html unter Ihrer Website-Domain auf.

      4. Wenn Sie zur ArcGIS-Anmeldeseite weitergeleitet werden, melden Sie sich als Voraussetzung für dieses Tutorial mit den Benutzeranmeldeinformationen an, die Sie zuvor im Abschnitt Einführung erstellt haben.

      5. Klicken Sie nach dem Laden der Karte an eine beliebige Stelle auf der Karte, um einen Abholort auszuwählen.

      6. Wählen Sie Einhorn anfordern aus. In der rechten Seitenleiste sollte die Benachrichtigung angezeigt werden, dass ein Einhorn unterwegs ist, und das Symbol eines Einhorns fliegt zu Ihrem Abholort.