Menyiapkan library pelacakan fleet JavaScript

Sebelum menggunakan library pelacakan armada JavaScript, pastikan Anda memahami dan telah menyiapkan Fleet Engine. Untuk mengetahui detailnya, lihat Fleet Engine.

Dokumen ini menunjukkan cara mengaktifkan otorisasi antara aplikasi halaman web dan Fleet Engine. Setelah permintaan Anda ke Fleet Engine disiapkan dengan token otorisasi yang benar, Anda akan siap melacak kendaraan di peta.

Menyiapkan otorisasi

Fleet Engine mewajibkan penggunaan Token Web JSON (JWT) untuk panggilan metode API dari lingkungan dengan tingkat kepercayaan rendah: smartphone dan browser.

JWT berasal dari server Anda, ditandatangani, dienkripsi, dan diteruskan ke klien untuk interaksi server berikutnya hingga masa berlakunya habis atau tidak lagi valid.

Detail utama

Bagaimana cara kerja otorisasi?

Otorisasi dengan data Fleet Engine melibatkan penerapan sisi server dan sisi klien.

Otorisasi sisi server

Sebelum menyiapkan autentikasi dan otorisasi di aplikasi Pelacakan armada, server backend Anda harus dapat menerbitkan Token Web JSON ke aplikasi Pelacakan armada Anda untuk mengakses Fleet Engine. Aplikasi Pelacakan armada Anda mengirimkan JWT ini dengan permintaannya sehingga Fleet Engine mengenali permintaan tersebut sebagai permintaan yang diautentikasi dan diberi otorisasi untuk mengakses data dalam permintaan. Untuk mengetahui petunjuk tentang penerapan JWT di sisi server, lihat Mengeluarkan Token Web JSON di bagian Dasar-Dasar Fleet Engine.

Untuk membuat token dari server Anda saat menerapkan Pelacakan armada, lihat berikut ini:

Otorisasi sisi klien

Saat Anda menggunakan library Pelacakan armada JavaScript, library tersebut akan meminta token dari server menggunakan pengambil token otorisasi. Hal ini dilakukan saat salah satu kondisi berikut terpenuhi:

  • Tidak ada token yang valid, seperti saat SDK belum memanggil fetcher pada pemuatan halaman baru, atau saat fetcher belum menampilkan token.

  • Masa berlaku token telah berakhir.

  • Masa berlaku token akan berakhir dalam satu menit.

Jika tidak, library pelacakan Fleet JavaScript akan menggunakan token valid yang dikeluarkan sebelumnya dan tidak memanggil fetcher.

Membuat pengambilan token otorisasi

Buat pengambilan token otorisasi Anda menggunakan panduan berikut:

  • Pengambilan data harus menampilkan struktur data dengan dua kolom, yang di-wrap dalam Promise sebagai berikut:

    • String token.

    • Angka expiresInSeconds. Masa berlaku token akan berakhir setelah jangka waktu ini setelah pengambilan. Pengambil token autentikasi harus meneruskan waktu berakhir dalam detik, dari waktu pengambilan ke library seperti yang ditunjukkan dalam contoh.

  • Pengambil harus memanggil URL di server Anda untuk mengambil token. URL ini--SERVER_TOKEN_URL--bergantung pada penerapan backend Anda. URL contoh berikut adalah untuk backend aplikasi contoh di GitHub:

    • https://SERVER_URL/token/fleet_reader

Contoh - Membuat pengambilan token otorisasi

Contoh berikut menunjukkan cara membuat pengambilan token otorisasi:

JavaScript

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

TypeScript

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

Langkah berikutnya