Configurer le SDK JavaScript Consumer

Avec le SDK JavaScript Consumer, votre application grand public peut afficher l'emplacement des véhicules et d'autres lieux d'intérêt suivis dans Fleet Engine sur une carte Web. Vos clients peuvent ainsi suivre le parcours du chauffeur. Ce guide suppose que vous avez configuré Fleet Engine avec le projet Google Cloud et les clés API associés. Pour en savoir plus, consultez Fleet Engine.

Pour configurer le SDK JavaScript Consumer, procédez comme suit :

1. Activer l'API Maps JavaScript
2. Configurer les autorisations

Activer l'API Maps JavaScript

Activez l'API Maps JavaScript dans la console Google Cloud. Pour en savoir plus, consultez Activer des API dans la documentation Google Cloud. Cela active le SDK Consumer pour JavaScript.

Configurer les autorisations

Fleet Engine nécessite l'utilisation de jetons Web JSON (JWT) pour les appels de méthode d'API à partir d'environnements à faible niveau de confiance : smartphones et navigateurs.

Un jeton JWT provient de votre serveur, est signé, chiffré et transmis au client pour les interactions ultérieures avec le serveur jusqu'à ce qu'il expire ou ne soit plus valide.

Informations clés

• Utilisez les identifiants par défaut de l'application pour vous authentifier et vous autoriser auprès de Fleet Engine.
• Utilisez un compte de service approprié pour signer les jetons JWT. Consultez les rôles de compte de service Fleet Engine dans Principes de base de Fleet Engine.

Comment fonctionne l'autorisation ?

L'autorisation avec les données Fleet Engine implique une implémentation côté serveur et côté client.

Autorisation côté serveur

Avant de configurer l'authentification et l'autorisation dans votre application Web, votre serveur backend doit pouvoir émettre des jetons Web JSON pour votre application Web afin d'accéder à Fleet Engine. Votre application Web envoie ces jetons JWT avec ses requêtes afin que Fleet Engine les reconnaisse comme authentifiées et autorisées à accéder aux données de la requête. Pour obtenir des instructions sur l'implémentation des jetons JWT côté serveur, consultez Émettre des jetons Web JSON sous Principes de base de Fleet Engine.

• Consignes générales pour l'émission de jetons Web JSON
• Consignes concernant les jetons JWT pour les trajets à la demande
• Exemple de jeton pour une opération client

Autorisation côté client

Lorsque vous utilisez le SDK JavaScript Consumer, il demande un jeton au serveur à l'aide d'un récupérateur de jetons d'autorisation. Il le fait lorsque l'une des conditions suivantes est remplie :

• Aucun jeton valide n'existe, par exemple lorsque le SDK n'a pas appelé le récupérateur lors d'un nouveau chargement de page ou lorsque le récupérateur n'a pas renvoyé de jeton.

• Le jeton est arrivé à expiration.

• Le jeton expire dans moins d'une minute.

Sinon, le SDK JavaScript Consumer utilise le jeton valide émis précédemment et n'appelle pas le récupérateur.

Créer un récupérateur de jetons d'autorisation

Créez votre récupérateur de jetons d'autorisation en suivant ces consignes :

• L'extracteur doit renvoyer une structure de données avec deux champs, encapsulés dans un Promise comme suit :

  • Une chaîne token.

  • Un nombre expiresInSeconds. Un jeton expire après ce délai après la récupération. Le récupérateur de jetons d'authentification doit transmettre le délai d'expiration en secondes, à partir du moment de la récupération jusqu'à la bibliothèque, comme illustré dans l'exemple.

• Le récupérateur doit appeler une URL sur votre serveur pour récupérer un jeton. Cette URL, SERVER_TOKEN_URL, dépend de votre implémentation backend. L'exemple d'URL suivant concerne le backend de l'application exemple sur GitHub :

  • https://SERVER_URL/token/consumer/TRIPID

Exemple : Créer un récupérateur de jetons d'authentification

Les exemples suivants montrent comment créer un récupérateur de jetons d'autorisation :

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,
  };
}

Étape suivante

Suivre un trajet en JavaScript