JavaScript Consumer SDK einrichten

Mit dem JavaScript Consumer SDK kann Ihre Consumer-App den Standort von Fahrzeugen und andere Orte von Interesse, die in Fleet Engine erfasst werden, auf einer webbasierten Karte anzeigen. So können Ihre Consumer-Nutzer den Fortschritt ihrer Sendungen verfolgen. In diesem Leitfaden wird davon ausgegangen, dass Sie Fleet Engine mit dem zugehörigen Google Cloud-Projekt und den API-Schlüsseln eingerichtet haben. Weitere Informationen finden Sie unter Fleet Engine.

So richten Sie das JavaScript Consumer SDK ein:

1. Maps JavaScript API aktivieren
2. Autorisierung einrichten.

Maps JavaScript API aktivieren

Aktivieren Sie die Maps JavaScript API im Google Cloud Console-Projekt, das Sie für Ihre Fleet Engine-Instanz verwenden. Weitere Informationen finden Sie in der Maps JavaScript API-Dokumentation unter APIs aktivieren.

Autorisierung einrichten

Für API-Methodenaufrufe aus Umgebungen mit geringem Vertrauensgrad (Smartphones und Browser) ist in Fleet Engine die Verwendung von JSON Web Tokens (JWTs) erforderlich.

Ein JWT wird auf Ihrem Server erstellt, signiert, verschlüsselt und an den Client weitergegeben, um für nachfolgende Serverinteraktionen verwendet zu werden, bis es abläuft oder nicht mehr gültig ist.

Wichtige Details

• Verwenden Sie Standardanmeldedaten für Anwendungen, um sich bei Fleet Engine zu authentifizieren und zu autorisieren.
• Verwenden Sie ein geeignetes Dienstkonto, um JWTs zu signieren. Weitere Informationen finden Sie unter Dienstkontorollen für Fleet Engine in Grundlagen von Fleet Engine.

Wie funktioniert die Autorisierung?

Die Autorisierung mit Fleet Engine-Daten umfasst sowohl die serverseitige als auch die clientseitige Implementierung.

Serverseitige Autorisierung

Bevor Sie die Authentifizierung und Autorisierung in Ihrer webbasierten Anwendung einrichten, muss Ihr Back-End-Server JSON Web Tokens für Ihre webbasierte Anwendung ausstellen können, um auf Fleet Engine zuzugreifen. Ihre webbasierte Anwendung sendet diese JWTs mit ihren Anfragen, damit Fleet Engine die Anfragen als authentifiziert erkennt und autorisiert, auf die Daten in der Anfrage zuzugreifen. Eine Anleitung zur serverseitigen JWT-Implementierung finden Sie unter JSON Web Tokens ausstellen in Grundlagen von Fleet Engine.

• Allgemeine Richtlinien für die Ausstellung von JSON Web Tokens
• JWT-Richtlinien für geplante Aufgaben
• Beispieltoken für eine Consumer-App

Clientseitige Autorisierung

Wenn Sie das JavaScript Consumer SDK verwenden, wird mit einem Autorisierungstoken-Fetcher ein Token vom Server angefordert. Dies geschieht, wenn eine der folgenden Bedingungen erfüllt ist:

• Es ist kein gültiges Token vorhanden, z. B. wenn das SDK den Fetcher bei einem neuen Seitenaufbau nicht aufgerufen hat oder wenn der Fetcher kein Token zurückgegeben hat.

• Das Token ist abgelaufen.

• Das Token läuft in weniger als einer Minute ab.

Andernfalls verwendet das JavaScript Consumer SDK das zuvor ausgestellte, gültige Token und ruft den Fetcher nicht auf.

Autorisierungstoken-Fetcher erstellen

Erstellen Sie Ihren Autorisierungstoken-Fetcher anhand dieser Richtlinien:

• Der Fetcher muss eine Datenstruktur mit zwei Feldern zurückgeben, die wie folgt in ein Promise eingeschlossen sind:

  • Ein String token.

  • Eine Zahl expiresInSeconds. Ein Token läuft nach dieser Zeit nach dem Abrufen ab. Der Fetcher für das Authentifizierungstoken muss die Ablaufzeit in Sekunden ab dem Zeitpunkt des Abrufs an die Bibliothek übergeben, wie im Beispiel gezeigt.

• Der Fetcher sollte eine URL auf Ihrem Server aufrufen , um ein Token abzurufen. Diese URL (SERVER_TOKEN_URL) hängt von Ihrer Back-End-Implementierung ab. Die folgende Beispiel-URL gilt für das Back-End der Beispiel-App auf GitHub:

  • https://SERVER_URL/token/delivery_consumer/TRACKING_ID

Beispiel: Fetcher für Authentifizierungstoken erstellen

In den folgenden Beispielen wird gezeigt, wie Sie einen Fetcher für Autorisierungstoken erstellen:

async function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.ExpiresInSeconds,
  };
}

Nächste Schritte

• Sendung verfolgen