JavaScript Fleet 추적 라이브러리 설정

JavaScript 차량 추적 라이브러리를 사용하기 전에 Fleet Engine을 숙지하고 설정했는지 확인하세요. 자세한 내용은 Fleet Engine을 참고하세요.

이 문서에서는 웹페이지 앱과 Fleet Engine 간에 승인을 사용 설정하는 방법을 보여줍니다. Fleet Engine에 대한 요청이 올바른 승인 토큰으로 설정되면 지도에서 차량을 추적할 수 있습니다.

승인 설정하기

Fleet Engine은 신뢰 수준이 낮은 환경(스마트폰 및 브라우저)의 API 메서드 호출에 JSON 웹 토큰(JWT)을 사용해야 합니다.

JWT는 서버에서 시작되어 서명되고 암호화된 후 만료되거나 더 이상 유효하지 않을 때까지 후속 서버 상호작용을 위해 클라이언트로 전달됩니다.

주요 세부정보

• 애플리케이션 기본 사용자 인증 정보를 사용하여 Fleet Engine에 대해 인증하고 승인합니다.
• 적절한 서비스 계정을 사용하여 JWT에 서명합니다. Fleet Engine 기본사항에서 Fleet Engine serviceaccount 역할을 참고하세요.

승인은 어떻게 작동하나요?

Fleet Engine 데이터를 사용한 승인에는 서버 측 구현과 클라이언트 측 구현이 모두 포함됩니다.

서버 측 승인

차량 추적 애플리케이션에서 인증 및 승인을 설정하기 전에 백엔드 서버가 차량 추적 애플리케이션에 JSON 웹 토큰을 발급하여 차량 엔진에 액세스할 수 있어야 합니다. 차량 추적 애플리케이션은 이러한 JWT를 요청과 함께 전송하여 Fleet Engine이 요청을 인증되고 요청의 데이터에 액세스할 권한이 있는 것으로 인식하도록 합니다. 서버 측 JWT 구현에 관한 안내는 플릿 엔진 기본사항의 JSON 웹 토큰 발급을 참고하세요.

Fleet 추적을 구현할 때 서버에서 토큰을 생성하려면 다음을 참고하세요.

• 주문형 이동 및 예약된 작업 섹션을 포함하여 JSON 웹 토큰을 발급하기 위한 일반 가이드라인
• 주문형 이동: 백엔드 서버 작업의 토큰 예시
• 예약된 작업: 차량의 모든 작업 및 차량을 추적하는 토큰의 예

클라이언트 측 승인

JavaScript Fleet 추적 라이브러리를 사용하면 승인 토큰 가져오기를 사용하여 서버에서 토큰을 요청합니다. 다음 중 하나라도 해당하는 경우 이 작업이 실행됩니다.

• 유효한 토큰이 없습니다(예: SDK가 새 페이지 로드 시 가져오기를 호출하지 않았거나 가져오기가 토큰을 반환하지 않은 경우).

• 토큰이 만료되었습니다.

• 토큰이 1분 이내에 만료됩니다.

그러지 않으면 JavaScript 차량 추적 라이브러리는 이전에 발급된 유효한 토큰을 사용하고 가져오기를 호출하지 않습니다.

승인 토큰 가져오기 도구 만들기

다음 가이드라인에 따라 승인 토큰 가져오기를 만듭니다.

• 가져오기는 다음과 같이 Promise로 래핑된 두 필드가 있는 데이터 구조를 반환해야 합니다.

  • token 문자열입니다.

  • 숫자 expiresInSeconds. 토큰은 가져온 후 이 시간 후에 만료됩니다. 인증 토큰 가져오기는 예와 같이 가져온 시점부터 라이브러리까지의 만료 시간을 초 단위로 전달해야 합니다.

• 가져오기 도구는 서버의 URL을 호출하여 토큰을 가져와야 합니다. 이 URL(SERVER_TOKEN_URL)은 백엔드 구현에 따라 다릅니다. 다음 URL 예시는 GitHub의 샘플 앱 백엔드의 URL입니다.

  • https://SERVER_URL/token/fleet_reader

예시 - 승인 토큰 가져오기 만들기

다음 예는 승인 토큰 가져오기를 만드는 방법을 보여줍니다.

자바스크립트

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

다음 단계

• 차량 추적하기
• 함대 보기