Implementierung

• Neue REST-API erstellen

  a. Klicken Sie in der AWS-Managementkonsole auf Services und dann unter „Anwendungs-Services“ auf API Gateway.
  b. Wählen Sie API erstellen aus.
  c. Wählen Sie Neue API aus und geben Sie WildRydes als API-Namen ein.
  d. Stellen Sie sicher, dass Edge-optimiert in der Dropdown-Liste Endpunkttyp ausgewählt ist. Hinweis: „Edge-optimiert” eignet sich am besten für öffentliche Dienste, 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.
  e. Wählen Sie API erstellen aus

• Cognito-Benutzerpool-Genehmiger erstellen

  Amazon API Gateway kann zur Authentifizierung von API-Aufrufen von Cognito-Benutzerpools zurückgegebene JWT-Token verwenden. In diesem Schritt konfigurieren Sie einen Genehmiger für Ihre API zur Verwendung des Benutzerpools, den Sie in Modul 2 erstellt haben.

  Erstellen Sie in der Amazon API Gateway-Konsole einen neuen Cognito-Benutzerpool-Genehmiger für Ihre API. Konfigurieren Sie diesen anhand der Details des Benutzerpools, den Sie im vorherigen Modul erstellt haben. Sie können die Konfiguration in der Konsole testen, indem Sie das Ihnen angezeigte Authentifizierungs-Token kopieren und einfügen, nachdem Sie sich über die Seite /signin.html Ihrer aktuellen Website anmelden.
  

  a. Wählen Sie unter Ihrer neu erstellten API Genehmiger aus.

  b. Wählen Sie Neuen Genehmiger erstellen.

  c. Geben Sie WildRydes als Genehmigernamen ein.

  d. Wählen Sie als Typ Cognito aus.

  e. Wählen Sie in der Dropdown-Liste „Region” unter Cognito-Benutzerpool die Region aus, in der Sie Ihren Cognito-Benutzerpool in Modul 2 angelegt haben (standardmäßig sollte die aktuelle Region ausgewählt sein).

  f. Geben Sie WildRydes (oder den Namen, den Sie Ihrem Benutzerpool gegeben haben) im Feld Cognito-Benutzerpool ein.

  g. Geben Sie Autorisierung für die Token-Quelle ein.

  h. Wählen Sie Erstellen aus.

  
  Überprüfen Ihrer Genehmigerkonfiguration

  j. Öffnen Sie ein neues Browserfenster und rufen Sie /ride.html unter Ihrer Website-Domäne auf.

  k. Wenn Sie zur Anmeldeseite weitergeleitet werden, melden Sie sich mit dem Benutzer an, den Sie im letzten Modul erstellt haben. Sie werden zurückgeleitet zu /ride.html.

  l. Kopieren Sie das Authentifizierungs-Token aus der Benachrichtigung auf der Website /ride.html.

  m. Gehen Sie zurück zur vorherigen Registerkarte, wo Sie gerade den Genehmiger angelegt haben.

  n. Klicken Sie auf Test am unteren Rand der Karte für den Genehmiger.

  o. Fügen Sie das Autorisierungs-Token in das Feld Autorisierungs-Token im Popup-Dialog ein.

  Klicken Sie auf die Schaltfläche Test und vergewissern Sie sich, dass der Antwortcode 200 ist und dass die Ansprüche für Ihren Benutzer angezeigt werden.

• Neue Ressource und Methode erstellen

  Erstellen Sie eine neue Ressource mit dem Namen „/ride” 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.

  a. Klicken Sie im linken Navigationsbereich unter Ihrer WildRydes-API auf Ressourcen.

  b. Wählen Sie im Dropdown-Menü Aktionen Ressource erstellen aus.

  c. Geben Sie ride als Ressourcennamen ein.

  d. Stellen Sie sicher, dass der Ressourcenpfad auf ride festgelegt ist.

  e. Wählen Sie API Gateway CORS aktivieren für die Ressource aus.

  f. Klicken Sie auf Ressource erstellen.

  g. Wählen Sie die neu erstellte Ressource /ride aus und wählen Sie dann im Dropdown-Menü Aktion die Option Methode erstellen aus.

  h. Wählen Sie POST aus der neu angezeigten Dropdown-Liste aus und klicken Sie dann auf das Häkchen.

  i. Wählen Sie Lambda-Funktion für den Integrationstyp aus.

  j. Aktivieren Sie das Kontrollkästchen für Lambda-Proxy-Integration verwenden.

  k. Wählen die Region aus, die Sie als Lambda-Region verwenden.

  l. Geben Sie als Lambda-Funktion den Namen der Funktion ein, die Sie im vorherigen Modul erstellt haben (RequestUnicorn).

  m. Wählen Sie Speichern aus. 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.

  n. Wenn Sie aufgefordert werden, Amazon API Gateway die Berechtigung zum Aufrufen Ihrer Funktion zu erteilen, wählen Sie OK.

  o. Wählen Sie die Karte Methodenanforderung aus.

  Klicken Sie auf das Stiftsymbol neben Autorisierung.

  q. Wählen Sie den WildRydes-Cognito-Benutzerpool-Genehmiger aus der Dropdown-Liste aus und klicken Sie auf das Häkchensymbol.

• Bereitstellen Ihrer API

  Wählen Sie in der Amazon API Gateway-Konsole „Aktionen“ und „API bereitstellen“ aus. Sie werden dazu aufgefordert, eine neue Stufe zu erstellen. Sie können als Stufennamen „prod“ verwenden.

  a. Wählen Sie in der Dropdown-Liste Aktionen API bereitstellen aus.
  b. Wählen Sie [Neue Stufe] aus der Dropdown-Liste Bereitstellungsstufe aus.
  c. Geben Sie prod als Stufennamen ein.
  d. Wählen Sie Bereitstellen.
  e. Notieren Sie die Aufruf-URL. Diese verwenden Sie im nächsten Abschnitt.
  

• Website-Konfiguration aktualisieren

  Aktualisieren Sie die Datei „/js/config.js“ in Ihrer Website-Bereitstellung, um die Aufruf-URL der Stufe einzuschließen, die Sie soeben 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 „_config.api.invokeUrl” Ihrer Datei „sites /js/config.js” ein. Stellen Sie beim Aktualisieren der Konfigurationsdatei sicher, dass die Aktualisierungen aus dem vorherigen Modul für Ihren Cognito-Benutzerpool auch weiterhin enthalten sind.

  a. Öffnen Sie die Datei „config.js“ in einem Text-Editor.
  b. Aktualisieren Sie die invokeUrl-Einstellung unter dem api-Schlüssel in der Datei „config.js”. Stellen Sie den Wert auf die Aufruf-URL für die Bereitstellungsstufe ein, die Sie im vorherigen Abschnitt erstellt haben.

  Ein Beispiel für eine vollständige config.js-Datei ist unten aufgeführt. 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, 
  
      } 
  
  };

  c. Speichern Sie die modifizierte Datei in Ihrem Git-Repository, damit sie automatisch der Amplify-Konsole bereitgestellt wird.
  

  $ git push
  

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

  a. Rufen Sie /ride.html unter Ihrer Website-Domain auf.
  b. Wenn Sie zur Anmeldeseite weitergeleitet werden, melden Sie sich mit dem Benutzer an, den Sie im vorherigen Modul erstellt haben.
  c. Klicken Sie nach dem Laden der Karte an eine beliebige Stelle auf ihr, um einen Abholort auszuwählen.
  d. 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.