জাভাস্ক্রিপ্ট কনজিউমার SDK সেট আপ করুন
সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন
আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।
JavaScript Consumer SDK-এর সাহায্যে, আপনার ভোক্তা অ্যাপ একটি ওয়েব-ভিত্তিক মানচিত্রে যানবাহন এবং ফ্লিট ইঞ্জিনে ট্র্যাক করা আগ্রহের অন্যান্য অবস্থানগুলি দেখাতে পারে। এটি আপনার গ্রাহকদের ড্রাইভারের যাত্রার অগ্রগতি দেখতে দেয়। এই নির্দেশিকা অনুমান করে যে আপনি ফ্লিট ইঞ্জিন এর সাথে যুক্ত Google ক্লাউড প্রকল্প এবং API কীগুলির সাথে সেট আপ করেছেন৷ বিস্তারিত জানার জন্য ফ্লিট ইঞ্জিন দেখুন।
আপনি এই ধাপগুলি অনুসরণ করে জাভাস্ক্রিপ্ট কনজিউমার SDK সেট আপ করেন:
- মানচিত্র জাভাস্ক্রিপ্ট API সক্ষম করুন৷
- অনুমোদন সেট আপ করুন
মানচিত্র জাভাস্ক্রিপ্ট API সক্ষম করুন৷
Google ক্লাউড কনসোলে মানচিত্র জাভাস্ক্রিপ্ট API সক্ষম করুন৷ আরও বিশদ বিবরণের জন্য, Google ক্লাউড ডকুমেন্টেশনে APIs সক্ষম করুন দেখুন৷ এটি জাভাস্ক্রিপ্টের জন্য উপভোক্তা SDK সক্ষম করে।
অনুমোদন সেট আপ করুন
ফ্লিট ইঞ্জিনের জন্য JSON ওয়েব টোকেন ব্যবহার করতে হবে (JWTs) স্বল্প-বিশ্বাসের পরিবেশ থেকে API পদ্ধতি কলের জন্য: স্মার্টফোন এবং ব্রাউজার।
একটি JWT আপনার সার্ভারে উদ্ভূত হয়, স্বাক্ষরিত হয়, এনক্রিপ্ট করা হয় এবং পরবর্তী সার্ভার ইন্টারঅ্যাকশনের জন্য ক্লায়েন্টের কাছে পাঠানো হয় যতক্ষণ না এটি মেয়াদ শেষ হয় বা আর বৈধ না হয়।
মূল বিবরণ
অনুমোদন কিভাবে কাজ করে?
ফ্লিট ইঞ্জিন ডেটা সহ অনুমোদন সার্ভার-সাইড এবং ক্লায়েন্ট-সাইড বাস্তবায়ন উভয়ই জড়িত।
সার্ভার-সাইড অনুমোদন
আপনি আপনার ওয়েব-ভিত্তিক অ্যাপ্লিকেশনে প্রমাণীকরণ এবং অনুমোদন সেট আপ করার আগে, আপনার ব্যাকএন্ড সার্ভার অবশ্যই ফ্লিট ইঞ্জিনে অ্যাক্সেসের জন্য আপনার ওয়েব-ভিত্তিক অ্যাপ্লিকেশনে JSON ওয়েব টোকেন ইস্যু করতে সক্ষম হবে। আপনার ওয়েব-ভিত্তিক অ্যাপ্লিকেশন এই JWTগুলিকে তার অনুরোধের সাথে পাঠায় যাতে Fleet Engine অনুরোধগুলিকে প্রমাণীকৃত এবং অনুরোধের ডেটা অ্যাক্সেস করার জন্য অনুমোদিত হিসাবে স্বীকৃতি দেয়। সার্ভার-সাইড JWT বাস্তবায়নের নির্দেশাবলীর জন্য, Fleet Engine Essentials-এর অধীনে JSON ওয়েব টোকেন ইস্যু করুন দেখুন।
বিশেষত, জাভাস্ক্রিপ্ট কনজিউমার SDK-এর জন্য ট্রিপের অগ্রগতি ভাগ করে নেওয়ার জন্য নিম্নলিখিতগুলি মনে রাখবেন:
ক্লায়েন্ট-সাইড অনুমোদন
আপনি যখন JavaScript Consumer SDK ব্যবহার করেন, এটি একটি অনুমোদন টোকেন ফেচার ব্যবহার করে সার্ভার থেকে একটি টোকেনের অনুরোধ করে৷ নিম্নলিখিতগুলির মধ্যে যে কোনওটি সত্য হলে এটি এটি করে:
কোনো বৈধ টোকেন বিদ্যমান নেই, যেমন যখন SDK একটি নতুন পৃষ্ঠা লোডে ফেচারকে কল করেনি, অথবা যখন ফেচার টোকেন নিয়ে ফিরে আসেনি৷
টোকেনের মেয়াদ শেষ হয়ে গেছে।
টোকেন মেয়াদ শেষ হওয়ার এক মিনিটের মধ্যে।
অন্যথায়, JavaScript Consumer SDK পূর্বে ইস্যু করা, বৈধ টোকেন ব্যবহার করে এবং ফেচারকে কল করে না।
একটি অনুমোদন টোকেন ফেচার তৈরি করুন৷
এই নির্দেশিকাগুলি ব্যবহার করে আপনার অনুমোদন টোকেন ফেচার তৈরি করুন:
ফেচারকে অবশ্যই দুটি ক্ষেত্র সহ একটি ডেটা কাঠামো ফেরত দিতে হবে , একটি Promise মোড়ানো নিম্নরূপ:
একটি টোকেন পুনরুদ্ধার করার জন্য ফেচারের আপনার সার্ভারে একটি URL কল করা উচিত । এই URL-- SERVER_TOKEN_URL --আপনার ব্যাকএন্ড বাস্তবায়নের উপর নির্ভর করে। নিম্নলিখিত উদাহরণ URLটি GitHub এ নমুনা অ্যাপ্লিকেশন ব্যাকএন্ডের জন্য:
-
https://SERVER_URL/token/consumer/TRIPID
উদাহরণ -- একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করুন
নিম্নলিখিত উদাহরণগুলি দেখায় কিভাবে একটি অনুমোদন টোকেন ফেচার তৈরি করতে হয়:
জাভাস্ক্রিপ্ট
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,
};
}
এরপর কি
জাভাস্ক্রিপ্টে একটি ট্রিপ অনুসরণ করুন
অন্য কিছু উল্লেখ না করা থাকলে, এই পৃষ্ঠার কন্টেন্ট Creative Commons Attribution 4.0 License-এর অধীনে এবং কোডের নমুনাগুলি Apache 2.0 License-এর অধীনে লাইসেন্স প্রাপ্ত। আরও জানতে, Google Developers সাইট নীতি দেখুন। Java হল Oracle এবং/অথবা তার অ্যাফিলিয়েট সংস্থার রেজিস্টার্ড ট্রেডমার্ক।
2025-09-04 UTC-তে শেষবার আপডেট করা হয়েছে।
[[["সহজে বোঝা যায়","easyToUnderstand","thumb-up"],["আমার সমস্যার সমাধান হয়েছে","solvedMyProblem","thumb-up"],["অন্যান্য","otherUp","thumb-up"]],[["এতে আমার প্রয়োজনীয় তথ্য নেই","missingTheInformationINeed","thumb-down"],["খুব জটিল / অনেক ধাপ","tooComplicatedTooManySteps","thumb-down"],["পুরনো","outOfDate","thumb-down"],["অনুবাদ সংক্রান্ত সমস্যা","translationIssue","thumb-down"],["নমুনা / কোড সংক্রান্ত সমস্যা","samplesCodeIssue","thumb-down"],["অন্যান্য","otherDown","thumb-down"]],["2025-09-04 UTC-তে শেষবার আপডেট করা হয়েছে।"],[[["\u003cp\u003eThe JavaScript Consumer SDK enables web-based display of vehicle locations and other points of interest tracked within Fleet Engine, letting consumers monitor driver progress.\u003c/p\u003e\n"],["\u003cp\u003eBefore using the SDK, enable the Maps JavaScript API and set up authorization, which in low-trust environments like browsers requires JSON Web Tokens (JWTs) issued by your server.\u003c/p\u003e\n"],["\u003cp\u003eServer-side authorization involves your backend issuing JWTs signed by a service account, while client-side authorization uses an authorization token fetcher within the JavaScript Consumer SDK to request and manage these tokens.\u003c/p\u003e\n"],["\u003cp\u003eYou must create an authorization token fetcher that retrieves a token and its expiry time from your server, ensuring secure access to Fleet Engine data for your web application.\u003c/p\u003e\n"]]],["The JavaScript Consumer SDK allows consumer apps to display vehicle locations from Fleet Engine on a web map. Setup involves enabling the Maps JavaScript API and configuring authorization. Fleet Engine uses JSON Web Tokens (JWTs) for API calls. A backend server must issue JWTs, which the client-side uses for authenticated requests. An authorization token fetcher, created by developers, retrieves JWTs from the server when needed. The fetcher must return a `token` and its `expiresInSeconds`.\n"],null,["Select platform: [Android](/maps/documentation/mobility/journey-sharing/on-demand/android/setup \"View this page for the Android platform docs.\") [iOS](/maps/documentation/mobility/journey-sharing/on-demand/ios/setup \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/mobility/journey-sharing/on-demand/javascript/setup \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nWith the JavaScript Consumer SDK, your consumer app can show the location of\nvehicles and other locations of interest tracked in Fleet Engine on a web-based\nmap. This allows your consumers to see the progress of the driver's journey.\nThis guide assumes you have set up Fleet Engine with its associated Google Cloud\nproject and API keys. See [Fleet Engine](/maps/documentation/mobility/fleet-engine) for details.\n\nYou set up the JavaScript Consumer SDK following these steps:\n\n1. [Enable the Maps JavaScript API](#enable-api)\n2. [Set up authorization](#set-up-auth)\n\nEnable the Maps JavaScript API\n\nEnable the Maps JavaScript API in the Google Cloud Console. For more details,\nsee [Enable APIs](https://cloud.google.com/apis/docs/getting-started#enabling_apis) in the Google Cloud documentation. This enables the\nConsumer SDK for JavaScript.\n\nSet up authorization\n\nFleet Engine requires the use of **JSON Web Tokens** (JWTs) for API method calls\nfrom **low-trust environments**: smartphones and browsers.\n\nA JWT originates on your server, is signed, encrypted, and passed to the client\nfor subsequent server interactions until it expires or is no longer valid.\n\n**Key details**\n\n- Use [Application Default Credentials](https://google.aip.dev/auth/4110) to authenticate and authorize against Fleet Engine.\n- Use an appropriate service account to sign JWTs. See [Fleet Engine serviceaccount](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/service-accounts#fleet_engine_service_account_roles) roles in **Fleet Engine Basics**.\n\nHow does authorization work?\n\nAuthorization with Fleet Engine data involves both server-side and client-side\nimplementation.\n\nServer-side authorization\n\nBefore you set up authentication and authorization in your web-based\napplication, your backend server must be able to issue JSON Web Tokens to your\nweb-based application for access to Fleet Engine. Your web-based application\nsends these JWTs with its requests so Fleet Engine recognizes the requests as\nauthenticated and authorized to access the data in the\nrequest. For instructions on server-side JWT implementation, see [Issue JSON Web\nTokens](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/issue-jwt) under **Fleet Engine Essentials**.\nSpecifically, keep in mind the following for the JavaScript Consumer SDK for sharing trip progress:\n\n\u003cbr /\u003e\n\n- [General guidelines](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/issue-jwt#general_guidelines) for issuing JSON Web Tokens\n- [On-demand trips JWT guidelines](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/issue-jwt#for_on-demand_trips)\n- [Example token for a consumer operation](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/issue-jwt#example_token_for_a_consumer_app_operation)\n\nClient-side authorization\n\nWhen you use the JavaScript Consumer SDK, it requests a token from the server using an\nauthorization token fetcher. It does this when any of the following is true:\n\n- No valid token exists, such as when the SDK hasn't called the fetcher on a\n fresh page load, or when the fetcher hasn't returned with a token.\n\n- The token has expired.\n\n- The token is within one minute of expiring.\n\nOtherwise, the JavaScript Consumer SDK uses the previously-issued, valid token and does not\ncall the fetcher.\n\nCreate an authorization token fetcher\n\nCreate your authorization token fetcher using these guidelines:\n\n- **The fetcher must return a data structure with two fields** , wrapped in a\n `Promise` as follows:\n\n - A string `token`.\n\n - A number `expiresInSeconds`. A token expires in this amount of time\n after fetching. The authentication token fetcher must pass the expiry\n time in seconds, from the time of fetching to the library as shown in\n the example.\n\n- **The fetcher should call a URL on your server** to retrieve a token. This\n URL--the `SERVER_TOKEN_URL`--depends on your backend implementation. The\n following example URL is for the [sample app backend on GitHub](https://github.com/googlemaps/last-mile-fleet-solution-samples/tree/main/backend):\n\n - `https://SERVER_URL/token/consumer/TRIPID`\n\nExample -- Create an authentication token fetcher\n\nThe following examples show how to create an authorization token fetcher: \n\nJavaScript \n\n async function authTokenFetcher(options) {\n // options is a record containing two keys called\n // serviceType and context. The developer should\n // generate the correct SERVER_TOKEN_URL and request\n // based on the values of these fields.\n const response = await fetch(SERVER_TOKEN_URL);\n if (!response.ok) {\n throw new Error(response.statusText);\n }\n const data = await response.json();\n return {\n token: data.Token,\n expiresInSeconds: data.ExpiresInSeconds\n };\n }\n\nTypeScript \n\n function authTokenFetcher(options: {\n serviceType: google.maps.journeySharing.FleetEngineServiceType,\n context: google.maps.journeySharing.AuthTokenContext,\n }): Promise\u003cgoogle.maps.journeySharing.AuthToken\u003e {\n // The developer should generate the correct\n // SERVER_TOKEN_URL based on options.\n const response = await fetch(SERVER_TOKEN_URL);\n if (!response.ok) {\n throw new Error(response.statusText);\n }\n const data = await response.json();\n return {\n token: data.token,\n expiresInSeconds: data.ExpiresInSeconds,\n };\n }\n\nWhat's next\n\n[Follow a trip in JavaScript](/maps/documentation/mobility/journey-sharing/on-demand/javascript/share-journey)"]]
