Configurar o SDK JavaScript Consumer

Com o SDK do consumidor JavaScript, seu app pode mostrar a localização de veículos e outros locais de interesse rastreados no Fleet Engine em um mapa baseado na Web. Isso permite que os usuários consumidores acompanhem o andamento dos envios. Neste guia, pressupomos que você tenha configurado o Fleet Engine com as chaves de API e o projeto do Google Cloud associado. Consulte Fleet Engine para saber mais detalhes.

Configure o SDK do consumidor JavaScript seguindo estas etapas:

1. Ative a API Maps JavaScript.
2. Configurar a autorização.

Ativar a API Maps JavaScript

Ative a API Maps JavaScript no projeto do console do Google Cloud que você usa para a instância do Fleet Engine. Para mais detalhes, consulte Ativar APIs na documentação da API Maps JavaScript.

configurar a autorização

O Fleet Engine exige o uso de JSON Web Tokens (JWTs) para chamadas de método de API de ambientes de baixa confiança: smartphones e navegadores.

Um JWT é originado no servidor, é assinado, criptografado e transmitido ao cliente para interações subsequentes do servidor até que ele expire ou não seja mais válido.

Detalhes importantes

• Use as credenciais padrão do aplicativo para autenticar e autorizar o Fleet Engine.
• Use uma conta de serviço adequada para assinar JWTs. Consulte os papéis da conta de serviço do Fleet Engine em Noções básicas do Fleet Engine.

Como funciona a autorização?

A autorização com dados do Fleet Engine envolve a implementação do lado do servidor e do lado do cliente.

Autorização do lado do servidor

Antes de configurar a autenticação e a autorização no seu aplicativo baseado na Web, o servidor de back-end precisa emitir tokens da Web do JSON para o aplicativo baseado na Web para ter acesso ao Fleet Engine. Seu aplicativo baseado na Web envia esses JWTs com as solicitações para que o Fleet Engine reconheça as solicitações como autenticadas e autorizadas a acessar os dados na solicitação. Para instruções sobre a implementação de JWTs no servidor, consulte Emitir tokens JSON da Web em Noções básicas do Fleet Engine.

• Diretrizes gerais para emissão de JSON Web Tokens
• Diretrizes de JWT para tarefas programadas
• Exemplo de token para um app de consumidor

Autorização do lado do cliente

Quando você usa o SDK do consumidor JavaScript, ele solicita um token do servidor usando um buscador de tokens de autorização. Isso acontece quando uma das seguintes condições é verdadeira:

• Nenhum token válido existe, como quando o SDK não chamou o coletor em uma nova carga de página ou quando o coletor não retornou com um token.

• O token expirou.

• O token está prestes a expirar em um minuto.

Caso contrário, o SDK do consumidor JavaScript vai usar o token válido emitido anteriormente e não vai chamar o fetcher.

Criar um extrator de token de autorização

Crie o extrator de tokens de autorização usando estas diretrizes:

• O fetcher precisa retornar uma estrutura de dados com dois campos, envolvidos em um Promise da seguinte maneira:

  • Uma string token.

  • Um número expiresInSeconds. Um token expira após esse período após a busca. O coletor de tokens de autenticação precisa transmitir o tempo de expiração em segundos, desde o momento da busca até a biblioteca, conforme mostrado no exemplo.

• O fetcher precisa chamar um URL no seu servidor para recuperar um token. Esse URL, SERVER_TOKEN_URL, depende da implementação do back-end. O URL de exemplo a seguir é para o back-end do app de exemplo no GitHub:

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

Exemplo: criar um coletor de tokens de autenticação

Os exemplos a seguir mostram como criar um coletor de tokens de autorização:

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

A seguir

• Seguir uma remessa