Menyiapkan JavaScript Consumer SDK

Pilih platform: Android iOS JavaScript

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

Siapkan 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 detail selengkapnya, lihat Mengaktifkan API dalam dokumentasi Google Cloud. Hal ini memungkinkan Consumer SDK untuk JavaScript.

Menyiapkan otorisasi

Untuk panggilan metode API dari lingkungan low-trust, Fleet Engine memerlukan penggunaan Token Web JSON (JWT) yang ditandatangani oleh akun layanan yang sesuai. Lingkungan 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 selanjutnya interaksi hingga kedaluwarsa atau tidak lagi valid.

Backend Anda harus melakukan autentikasi dan melakukan otorisasi terhadap Fleet Engine menggunakan mekanisme Kredensial Default Aplikasi standar. Merek 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 Armada Engine.

Sebaliknya, backend Anda harus melakukan autentikasi dan otorisasi terhadap Fleet Engine menggunakan Kredensial Default Aplikasi standar mekanisme atensi.

Bagaimana cara kerja otorisasi?

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

Otorisasi sisi server

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

Khususnya, perhatikan hal berikut untuk JavaScript Consumer SDK untuk berbagi perjalanan:

Otorisasi sisi klien

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

  • Tidak ada token yang valid, seperti saat SDK belum memanggil pengambil di 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 dikeluarkan sebelumnya dan tidak memanggil pengambil.

Membuat pengambil token otorisasi

Buat pengambil token otorisasi Anda menggunakan panduan ini:

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

    • String token.

    • Nomor expiresInSeconds. Masa berlaku token berakhir dalam jangka waktu ini setelah pengambilan. Pengambil token autentikasi harus meneruskan masa berlaku waktu dalam detik, dari waktu pengambilan ke koleksi seperti yang ditampilkan di contoh.

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

    • https://SERVER_URL/token/consumer/TRIPID

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

Mengikuti perjalanan di JavaScript