Menyiapkan JavaScript Consumer SDK

Dengan JavaScript Consumer SDK, aplikasi konsumen Anda dapat menampilkan lokasi kendaraan dan lokasi minat lainnya yang dilacak di Fleet Engine pada peta berbasis web. Informasi ini memungkinkan pengguna konsumen melihat progres pengiriman mereka. Panduan ini mengasumsikan bahwa Anda telah menyiapkan Fleet Engine dengan project Google Cloud dan kunci API terkait. Lihat Fleet Engine untuk mengetahui detailnya.

Anda menyiapkan JavaScript Consumer SDK dengan mengikuti langkah-langkah berikut:

1. Aktifkan Maps JavaScript API.
2. Menyiapkan otorisasi.

Mengaktifkan Maps JavaScript API

Aktifkan Maps JavaScript API di project Konsol Google Cloud yang Anda gunakan untuk instance Fleet Engine. Untuk detail selengkapnya, lihat Mengaktifkan API di dokumentasi Maps JavaScript API.

Menyiapkan otorisasi

Untuk panggilan metode API dari lingkungan low-trust, Fleet Engine mengharuskan penggunaan Token Web JSON (JWT) yang ditandatangani oleh akun layanan yang sesuai. Lingkungan dengan tingkat kepercayaan rendah mencakup smartphone dan browser. JWT berasal dari server Anda, yang merupakan lingkungan yang sepenuhnya tepercaya. JWT ditandatangani, dienkripsi, dan diteruskan ke klien untuk interaksi server berikutnya hingga habis masa berlakunya atau tidak lagi valid.

Backend Anda harus melakukan autentikasi dan otorisasi terhadap Fleet Engine menggunakan mekanisme Kredensial Default Aplikasi standar. Pastikan untuk menggunakan JWT yang telah ditandatangani oleh akun layanan yang sesuai. Untuk daftar peran akun layanan, lihat peran akun layanan Fleet Engine di Dasar-Dasar Fleet Engine.

Sebaliknya, backend Anda harus mengautentikasi dan memberikan otorisasi ke Fleet Engine menggunakan mekanisme Kredensial Default Aplikasi standar.

Bagaimana cara kerja otorisasi?

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

Otorisasi sisi server

Sebelum Anda menyiapkan autentikasi dan otorisasi di aplikasi berbasis web, server backend Anda harus dapat menerbitkan Token Web JSON ke aplikasi berbasis web untuk mengakses Fleet Engine. Aplikasi berbasis web Anda mengirim JWT ini dengan permintaannya sehingga Fleet Engine mengenali permintaan tersebut sebagai diautentikasi dan diberi otorisasi untuk mengakses data dalam permintaan. Untuk petunjuk tentang implementasi JWT sisi server, lihat Masalah Token Web JSON di bagian Fleet Engine Essentials.

• Panduan umum untuk menerbitkan Token Web JSON
• Panduan JWT tugas terjadwal
• Contoh token untuk aplikasi konsumen

Otorisasi sisi klien

Saat Anda menggunakan JavaScript Consumer SDK, JavaScript akan meminta token dari server menggunakan pengambil token otorisasi. Hal ini dilakukan jika salah satu hal berikut benar:

• Tidak ada token yang valid, seperti saat SDK belum memanggil pengambil pada muat ulang halaman, atau saat pengambil belum ditampilkan dengan token.

• Masa berlaku token telah berakhir.

• Masa berlaku token akan berakhir dalam waktu satu menit.

Jika tidak, JavaScript Consumer SDK akan menggunakan token valid yang dikeluarkan sebelumnya dan tidak memanggil pengambil.

Membuat pengambil token otorisasi

Buat pengambil token otorisasi menggunakan panduan ini:

• Pengambil harus menampilkan struktur data dengan dua kolom, yang digabungkan dalam Promise sebagai berikut:

  • String token.

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

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

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

Contoh - Membuat pengambil token autentikasi

Contoh berikut menunjukkan cara membuat pengambil token otorisasi:

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

Langkah berikutnya

• Mengikuti pengiriman