إعداد "حزمة تطوير البرامج (SDK) للمستهلكين" بلغة JavaScript
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
باستخدام حزمة تطوير البرامج (SDK) للمستهلكين المستندة إلى JavaScript، يمكن لتطبيق المستهلك عرض الموقع الجغرافي للمركبات والمواقع الجغرافية الأخرى المهمة التي يتم تتبّعها في Fleet Engine على خريطة مستندة إلى الويب. يتيح ذلك للمستخدمين من المستهلكين الاطّلاع على حالة شحناتهم.
يفترض هذا الدليل أنّك قد أعددت Fleet Engine مع مشروع Google Cloud ومفاتيح واجهة برمجة التطبيقات المرتبطة به. راجِع Fleet Engine للحصول على التفاصيل.
يمكنك إعداد حزمة JavaScript Consumer SDK باتّباع الخطوات التالية:
- فعِّل Maps JavaScript API.
- إعداد التفويض
تفعيل Maps JavaScript API
فعِّل Maps JavaScript API في مشروع Google Cloud Console الذي تستخدمه لمثيل Fleet Engine. لمزيد من التفاصيل، يُرجى الاطّلاع على تفعيل واجهات برمجة التطبيقات في مستندات Maps JavaScript API.
إعداد التفويض
تتطلّب Fleet Engine استخدام رموز JSON المميّزة للويب (JWT) لإجراء عمليات استدعاء طرق واجهة برمجة التطبيقات
من البيئات ذات مستوى الثقة المنخفض، مثل الهواتف الذكية والمتصفحات.
يتم إنشاء رمز JWT على الخادم الخاص بك، ويتم توقيعه وتشفيره وتمريره إلى العميل
للتفاعلات اللاحقة مع الخادم إلى أن تنتهي صلاحيته أو يصبح غير صالح.
التفاصيل الأساسية
يجب أن يصادق تطبيقك المخصّص للمستهلكين على المستخدمين النهائيين باستخدام
دور
delivery_consumer
من مشروعك على Google Cloud لعرض المعلومات الخاصة بالمستهلكين فقط. بهذه الطريقة، يفلتر Fleet Engine جميع المعلومات الأخرى ويحذفها من الردود. على سبيل المثال، أثناء مهمة عدم التوفّر، لا تتم مشاركة أي معلومات عن الموقع الجغرافي مع المستخدم النهائي. راجِع
أدوار حساب الخدمة للمهام المجدوَلة.
كيف تعمل عملية التفويض؟
يتضمّن منح الإذن باستخدام بيانات Fleet Engine عملية تنفيذ من جهة الخادم ومن جهة العميل.
تفويض من جهة الخادم
قبل إعداد المصادقة والتفويض في تطبيقك المستند إلى الويب، يجب أن يتمكّن خادم الخلفية من إصدار رموز ويب مميّزة بتنسيق JSON لتطبيقك المستند إلى الويب من أجل الوصول إلى Fleet Engine. يرسل تطبيق الويب رموز JWT هذه مع طلباته لكي يتعرّف Fleet Engine على الطلبات على أنّها موثّقة ومصرّح لها بالوصول إلى البيانات في الطلب. للحصول على تعليمات حول تنفيذ JWT من جهة الخادم، راجِع إصدار رموز الويب المميزة بتنسيق JSON ضمن أساسيات Fleet Engine.
على وجه التحديد، يُرجى مراعاة ما يلي عند استخدام حزمة تطوير البرامج JavaScript Consumer SDK لتتبُّع الشحنات:
تفويض من جهة العميل
عند استخدام حزمة تطوير البرامج (SDK) الخاصة بالمستهلكين في JavaScript، يتم طلب رمز مميّز من الخادم باستخدام أداة جلب رموز التفويض المميزة. ويتم ذلك في أيٍّ من الحالات التالية:
لا يتوفّر رمز مميّز صالح، مثلاً عندما لم تستدعِ حزمة SDK أداة الجلب عند تحميل صفحة جديدة، أو عندما لم تعرض أداة الجلب رمزًا مميّزًا.
انتهت صلاحية الرمز المميّز.
الرمز المميز على وشك انتهاء الصلاحية خلال دقيقة واحدة.
وفي ما عدا ذلك، تستخدم حزمة تطوير البرامج (SDK) الخاصة بمستهلك JavaScript الرمز المميز الصالح الذي تم إصداره سابقًا ولا تستدعي أداة الجلب.
إنشاء أداة جلب الرمز المميز للتفويض
أنشئ أداة جلب رمز التفويض باستخدام الإرشادات التالية:
يجب أن يعرض برنامج الجلب بنية بيانات تتضمّن حقلَين، ويجب أن تكونا مضمّنتَين في Promise
على النحو التالي:
يجب أن يطلب برنامج الجلب عنوان URL على خادمك لاسترداد رمز مميز. يعتمد عنوان URL هذا، أي SERVER_TOKEN_URL
، على طريقة التنفيذ في الخلفية. عنوان URL التالي هو مثال على الخادم الخلفي لتطبيق العيّنة على GitHub:
https://SERVER_URL/token/delivery_consumer/TRACKING_ID
مثال - إنشاء أداة جلب لرمز المصادقة المميز
توضّح الأمثلة التالية كيفية إنشاء أداة لجلب رموز الدخول:
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,
};
}
الخطوات التالية
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2025-09-05 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-05 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eThe JavaScript Consumer SDK enables your web application to display the real-time location of vehicles and other points of interest tracked within Fleet Engine, enhancing shipment visibility for consumers.\u003c/p\u003e\n"],["\u003cp\u003ePrior to implementation, ensure you have a Google Cloud project configured with Fleet Engine, including necessary API keys and the Maps JavaScript API enabled.\u003c/p\u003e\n"],["\u003cp\u003eSecure your application by setting up authorization using JSON Web Tokens (JWTs) issued by your backend server, enabling authenticated access to Fleet Engine data.\u003c/p\u003e\n"],["\u003cp\u003eDevelop an authorization token fetcher on the client-side to retrieve and manage JWTs, ensuring seamless communication between your web application and Fleet Engine.\u003c/p\u003e\n"],["\u003cp\u003eRemember to adhere to the provided guidelines for generating JWTs and implementing the authorization token fetcher to maintain security and data integrity.\u003c/p\u003e\n"]]],[],null,["With 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 consumer users to see the progress of their shipments.\nThis guide assumes you have set up Fleet Engine with its associated\nGoogle Cloud project and API keys. See [Fleet Engine](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/create-project) for details.\n\nYou set up the JavaScript Consumer SDK following these steps:\n\n1. [Enable the Maps JavaScript API](#enable).\n2. [Set up authorization](#set-up-auth).\n\nEnable the Maps JavaScript API\n\nEnable the Maps JavaScript API in the Google Cloud Console project that you use\nfor your Fleet Engine instance. For more details, see [Enable APIs](/maps/documentation/javascript/cloud-setup#enabling-apis) in the\nMaps JavaScript API documentation.\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\nYour consumer app should authenticate your end users with the `delivery_consumer` role from your Google Cloud project to return only consumer-specific information. In this way, Fleet Engine filters and redacts all other information in the responses. For example, during an unavailability task, no location information is shared with an end user. See [Service account\nroles](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/service-accounts#scheduled-tasks) for scheduled tasks.\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 tracking shipments:\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- [Scheduled tasks JWT guidelines](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/issue-jwt#for_scheduled_tasks)\n- [Example token for a consumer app](/maps/documentation/mobility/fleet-engine/essentials/set-up-fleet/issue-jwt#example_token_for_a_consumer_app)\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/delivery_consumer/TRACKING_ID`\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 shipment](/maps/documentation/mobility/journey-sharing/scheduled/shipment-tracking/follow)"]]