Menyiapkan JavaScript Consumer SDK

Dengan Consumer SDK JavaScript, aplikasi pelanggan Anda dapat menampilkan lokasi kendaraan dan lokasi menarik lainnya yang dilacak di Fleet Engine pada peta berbasis web. Hal ini memungkinkan pengguna konsumen Anda 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.

Siapkan Consumer SDK JavaScript dengan mengikuti langkah-langkah berikut:

  1. Mengaktifkan 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 mengetahui detail selengkapnya, lihat Mengaktifkan API dalam dokumentasi Maps JavaScript API.

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

Aplikasi konsumen Anda harus mengautentikasi pengguna akhir dengan peran delivery_consumer dari project Google Cloud Anda untuk menampilkan hanya informasi khusus konsumen. Dengan cara ini, Fleet Engine memfilter dan menyamarkan semua informasi lain dalam respons. Misalnya, selama tugas ketidaktersediaan, tidak ada informasi lokasi yang dibagikan kepada pengguna akhir. Lihat Peran akun layanan untuk tugas terjadwal.

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 Anda untuk akses ke Fleet Engine. Aplikasi berbasis web Anda mengirimkan JWT ini bersama permintaannya sehingga Fleet Engine mengenali permintaan tersebut sebagai diautentikasi dan diizinkan untuk mengakses data dalam permintaan. Untuk petunjuk tentang penerapan JWT sisi server, lihat Mengeluarkan Token Web JSON di bagian Dasar-Dasar Fleet Engine.

Secara khusus, perhatikan hal berikut untuk Consumer SDK JavaScript untuk melacak pengiriman:

Otorisasi sisi klien

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

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

  • Masa berlaku token telah berakhir.

  • Masa berlaku token akan berakhir dalam satu menit.

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

Membuat pengambil token otorisasi

Buat pengambil token otorisasi Anda menggunakan panduan berikut:

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

    • String token.

    • Angka expiresInSeconds. Token akan berakhir masa berlakunya dalam jangka waktu ini setelah pengambilan. Pengambil token autentikasi harus meneruskan waktu habis masa berlaku 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 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:

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