Menyiapkan JavaScript Consumer SDK

Dengan JavaScript Consumer SDK, aplikasi konsumen Anda dapat menampilkan lokasi kendaraan dan lokasi menarik lainnya yang dilacak di Fleet Engine pada peta berbasis web. Hal ini memungkinkan konsumen Anda melihat progres perjalanan pengemudi. 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. Mengaktifkan Maps JavaScript API
2. Menyiapkan otorisasi

Mengaktifkan Maps JavaScript API

Aktifkan Maps JavaScript API di Konsol Google Cloud. Untuk mengetahui detail selengkapnya, lihat Mengaktifkan API di dokumentasi Google Cloud. Tindakan ini akan mengaktifkan Consumer SDK untuk JavaScript.

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 berakhir atau tidak lagi valid.

Detail utama

• Gunakan Kredensial Default Aplikasi untuk melakukan autentikasi dan otorisasi terhadap Fleet Engine.
• Gunakan akun layanan yang sesuai untuk menandatangani JWT. Lihat peran akun layanan Fleet Engine di Dasar-Dasar Fleet Engine.

Bagaimana cara kerja otorisasi?

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

Otorisasi sisi server

Sebelum 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 mengirimkan JWT ini dengan permintaannya sehingga Fleet Engine mengenali permintaan tersebut sebagai autentikasi dan diotorisasi untuk mengakses data dalam permintaan. Untuk mengetahui petunjuk tentang implementasi JWT sisi server, lihat Menerbitkan Token Web JSON di bagian Dasar-Dasar Fleet Engine.

• Panduan umum untuk menerbitkan Token Web JSON
• Panduan JWT perjalanan sesuai permintaan
• Contoh token untuk operasi konsumen

Otorisasi sisi klien

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

• 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 waktu satu menit.

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

Membuat pengambil token otorisasi

Buat pengambil token otorisasi menggunakan panduan berikut:

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

  • token string.

  • expiresInSeconds angka. Masa berlaku token akan berakhir 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/consumer/TRIPID

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 perjalanan di JavaScript