دليل سريع للبدء باستخدام JavaScript

توضّح عمليات البدء السريع كيفية إعداد تطبيق يستدعي واجهة برمجة التطبيقات Google Workspace API وتشغيله.

تستخدِم عمليات الإعداد السريع في Google Workspace مكتبات عملاء واجهة برمجة التطبيقات لمعالجة بعض تفاصيل عملية المصادقة والتفويض. ننصحك باستخدام مكتبات العملاء لتطبيقاتك. يستخدم دليل البدء السريع هذا أسلوب مصادقة بسيطًا ومناسبًا لبيئة الاختبار. بالنسبة إلى بيئة الإنتاج، ننصحك بالاطّلاع على معلومات عن المصادقة والتفويض قبل اختيار بيانات اعتماد الوصول الملائمة لتطبيقك.

أنشئ تطبيق ويب JavaScript يُرسل طلبات إلى Google Drive API.

الأهداف

• اضبط إعدادات البيئة.
• إعداد العيّنة
• شغِّل العيّنة.

المتطلبات الأساسية

• Node.js وnpm مثبَّتَان
• أحد مشاريع Google Cloud

• حساب Google تم تفعيل Google Drive فيه

إعداد البيئة

لإكمال عملية الإعداد السريعة هذه، عليك إعداد بيئتك.

تفعيل واجهة برمجة التطبيقات

قبل استخدام واجهات برمجة تطبيقات Google، عليك تفعيلها في مشروع على Google Cloud. يمكنك تفعيل واجهة برمجة تطبيقات واحدة أو أكثر في مشروع واحد على Google Cloud.

• في Google Cloud Console، فعِّل Google Drive API.

  تفعيل واجهة برمجة التطبيقات

ضبط شاشة طلب الموافقة المتعلّقة ببروتوكول OAuth

إذا كنت تستخدِم مشروعًا جديدًا على Google Cloud لإكمال خطوات البدء السريع هذه، عليك ضبط شاشة موافقة OAuth. إذا سبق أن أكملت هذه الخطوة لمشروعك على Cloud، انتقِل إلى القسم التالي.

1. في وحدة تحكّم Google Cloud، انتقِل إلى رمز القائمة > > العلامة التجارية.

   الانتقال إلى "الهوية البصرية للعلامة التجارية"

2. إذا سبق لك ضبط ، يمكنك ضبط إعدادات شاشة طلب الموافقة المتعلّقة ببروتوكول OAuth التالية في العلامة التجارية وشريحة الجمهور والوصول إلى البيانات. إذا ظهرت لك رسالة تفيد بأنّ لم يتم ضبطه بعد، انقر على البدء:
1. ضمن معلومات التطبيق، أدخِل اسمًا للتطبيق في اسم التطبيق.
2. في عنوان البريد الإلكتروني لدعم المستخدمين، اختَر عنوان بريد إلكتروني لفريق الدعم يمكن للمستخدمين التواصل معك من خلاله إذا كانت لديهم أسئلة حول موافقتهم.
3. انقر على التالي.
4. ضمن الجمهور، اختَر داخلي.
5. انقر على التالي.
6. ضمن معلومات الاتصال، أدخِل عنوان بريد إلكتروني يمكننا من خلاله إعلامك بأي تغييرات تطرأ على مشروعك.
7. انقر على التالي.
8. ضمن إنهاء، راجِع سياسة بيانات المستخدمين في خدمات Google API، وإذا كنت توافق عليها، انقر على أوافق على "سياسة بيانات المستخدمين في خدمات Google API".
9. انقر على متابعة.
10. انقر على إنشاء.
3. يمكنك حاليًا تخطّي إضافة النطاقات. في المستقبل، عند إنشاء تطبيق لاستخدامه خارج مؤسستك على Google Workspace، عليك تغيير نوع المستخدم إلى خارجي. بعد ذلك، أضِف نطاقات التفويض التي يتطلبها تطبيقك. لمزيد من المعلومات، يُرجى الاطّلاع على الدليل الكامل ضبط موافقة OAuth.

تفويض بيانات الاعتماد لتطبيق ويب

لمصادقة المستخدمين النهائيين والوصول إلى بيانات المستخدمين في تطبيقك، عليك إنشاء معرّف عميل واحد أو أكثر من معرّفات OAuth 2.0. يُستخدَم معرّف العميل لتحديد تطبيق واحد على خوادم OAuth في Google. إذا كان تطبيقك يعمل على منصات متعددة، يجب إنشاء معرّف عميل منفصل لكل منصة.

1. في وحدة تحكّم Google Cloud، انتقِل إلى رمز القائمة > > العملاء.

   الانتقال إلى "العملاء"

2. انقر على إنشاء عميل.
3. انقر على نوع التطبيق > تطبيق الويب.
4. في حقل الاسم، اكتب اسمًا لبيانات الاعتماد. ولا يظهر هذا الاسم إلا في "وحدة تحكّم Google Cloud".
5. أضِف معرّفات الموارد المنتظمة (URI) المعتمَدة ذات الصلة بتطبيقك:
   • التطبيقات من جهة العميل (JavaScript): ضمن مصادر JavaScript المسموح بها، انقر على إضافة معرّف الموارد المنتظم (URI). بعد ذلك، أدخِل عنوان URL لاستخدامه في طلبات المتصفّح. يحدِّد هذا النطاقات التي يمكن لتطبيقك إرسال طلبات واجهة برمجة التطبيقات منها إلى خادم OAuth 2.0.
   • التطبيقات من جهة الخادم (Java وPython والمزيد): ضمن معرّفات الموارد المنتظمة (URI) المعتمَدة لإعادة التوجيه، انقر على إضافة معرّف الموارد المنتظم (URI). بعد ذلك، أدخِل معرّف موارد منتظم (URI) لنقطة نهاية يمكن لخادم OAuth 2.0 إرسال الاستجابات إليها.
6. انقر على إنشاء.

   تظهر بيانات الاعتماد التي تم إنشاؤها حديثًا ضمن معرِّفات عملاء OAuth 2.0.

   سجِّل معرِّف العميل. لا يتم استخدام أسرار العملاء لتطبيقات الويب.

دوِّن بيانات الاعتماد هذه لأنّك ستحتاج إليها لاحقًا في هذا الدليل السريع.

إنشاء مفتاح واجهة برمجة التطبيقات

1. في وحدة تحكّم Google Cloud، انتقِل إلى رمز القائمة > واجهات برمجة التطبيقات والخدمات > بيانات الاعتماد.

   الانتقال إلى "بيانات الاعتماد"

2. انقر على إنشاء بيانات اعتماد > مفتاح واجهة برمجة التطبيقات.
3. يتم عرض مفتاح واجهة برمجة التطبيقات الجديد.
   • انقر على رمز النسخ لنسخ مفتاح واجهة برمجة التطبيقات لاستخدامه في رمز تطبيقك. يمكن أيضًا العثور على مفتاح واجهة برمجة التطبيقات في قسم "مفاتيح واجهة برمجة التطبيقات" ضمن بيانات اعتماد مشروعك.
   • انقر على تقييد المفتاح لتعديل الإعدادات المتقدّمة والحد من استخدام مفتاح واجهة برمجة التطبيقات. لمزيد من التفاصيل، يُرجى الاطّلاع على فرض قيود على مفاتيح واجهة برمجة التطبيقات.

إعداد العيّنة

1. في دليل العمل، أنشئ ملفًا باسم index.html.

2. في ملف index.html، الصِق نموذج الرمز التالي:

   drive/quickstart/index.html

   العرض على GitHub
   <!DOCTYPE html>
   <html>
     <head>
       <title>Drive API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Drive API Quickstart</p>
   
       <!--Add buttons to initiate auth sequence and sign out-->
       <button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
       <button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>
   
       <pre id="content" style="white-space: pre-wrap;"></pre>
   
       <script type="text/javascript">
         /* exported gapiLoaded */
         /* exported gisLoaded */
         /* exported handleAuthClick */
         /* exported handleSignoutClick */
   
         // TODO(developer): Set to client ID and API key from the Developer Console
         const CLIENT_ID = '<YOUR_CLIENT_ID>';
         const API_KEY = '<YOUR_API_KEY>';
   
         // Discovery doc URL for APIs used by the quickstart
         const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';
   
         let tokenClient;
         let gapiInited = false;
         let gisInited = false;
   
         document.getElementById('authorize_button').style.visibility = 'hidden';
         document.getElementById('signout_button').style.visibility = 'hidden';
   
         /**
          * Callback after api.js is loaded.
          */
         function gapiLoaded() {
           gapi.load('client', initializeGapiClient);
         }
   
         /**
          * Callback after the API client is loaded. Loads the
          * discovery doc to initialize the API.
          */
         async function initializeGapiClient() {
           await gapi.client.init({
             apiKey: API_KEY,
             discoveryDocs: [DISCOVERY_DOC],
           });
           gapiInited = true;
           maybeEnableButtons();
         }
   
         /**
          * Callback after Google Identity Services are loaded.
          */
         function gisLoaded() {
           tokenClient = google.accounts.oauth2.initTokenClient({
             client_id: CLIENT_ID,
             scope: SCOPES,
             callback: '', // defined later
           });
           gisInited = true;
           maybeEnableButtons();
         }
   
         /**
          * Enables user interaction after all libraries are loaded.
          */
         function maybeEnableButtons() {
           if (gapiInited && gisInited) {
             document.getElementById('authorize_button').style.visibility = 'visible';
           }
         }
   
         /**
          *  Sign in the user upon button click.
          */
         function handleAuthClick() {
           tokenClient.callback = async (resp) => {
             if (resp.error !== undefined) {
               throw (resp);
             }
             document.getElementById('signout_button').style.visibility = 'visible';
             document.getElementById('authorize_button').innerText = 'Refresh';
             await listFiles();
           };
   
           if (gapi.client.getToken() === null) {
             // Prompt the user to select a Google Account and ask for consent to share their data
             // when establishing a new session.
             tokenClient.requestAccessToken({prompt: 'consent'});
           } else {
             // Skip display of account chooser and consent dialog for an existing session.
             tokenClient.requestAccessToken({prompt: ''});
           }
         }
   
         /**
          *  Sign out the user upon button click.
          */
         function handleSignoutClick() {
           const token = gapi.client.getToken();
           if (token !== null) {
             google.accounts.oauth2.revoke(token.access_token);
             gapi.client.setToken('');
             document.getElementById('content').innerText = '';
             document.getElementById('authorize_button').innerText = 'Authorize';
             document.getElementById('signout_button').style.visibility = 'hidden';
           }
         }
   
         /**
          * Print metadata for first 10 files.
          */
         async function listFiles() {
           let response;
           try {
             response = await gapi.client.drive.files.list({
               'pageSize': 10,
               'fields': 'files(id, name)',
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
           const files = response.result.files;
           if (!files || files.length == 0) {
             document.getElementById('content').innerText = 'No files found.';
             return;
           }
           // Flatten to string to display
           const output = files.reduce(
               (str, file) => `${str}${file.name} (${file.id})\n`,
               'Files:\n');
           document.getElementById('content').innerText = output;
         }
       </script>
       <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
       <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
     </body>
   </html>

   غيِّر القيم في السلسلة على الشكل التالي:

   • YOUR_CLIENT_ID: معرّف العميل الذي أنشأته عند تفويض بيانات الاعتماد لتطبيق ويب.
   • YOUR_API_KEY: مفتاح واجهة برمجة التطبيقات الذي أنشأته كأحد المتطلّبات الأساسية

تشغيل العيّنة

1. في دليل العمل، ثبِّت حزمة http-server:

   npm install http-server
   

2. في دليل العمل، ابدأ خادم ويب:

   npx http-server -p 8000
   

3. في المتصفّح، انتقِل إلى http://localhost:8000.
4. ستظهر لك رسالة تطلب منك تفويض الوصول:
   1. إذا لم تكن مسجِّلاً الدخول إلى حسابك على Google، سجِّل الدخول عندما يُطلب منك ذلك. إذا كنت مسجّلاً الدخول إلى حسابات متعددة، اختَر حسابًا واحدًا لاستخدامه في التفويض.
   2. انقر على قبول.

يتم تشغيل تطبيق JavaScript ويطلب Google Drive API.

الخطوات التالية

• تحديد المشاكل في المصادقة والتفويض وحلّها
• المستندات المرجعية لواجهة برمجة التطبيقات Drive API
• قسم google-api-javascript-client في GitHub