مقدمة

1. لا حاجة لدفع ثمن الخادم ، فإنه لا يضر الرأس حول استقراره وتوافره.
2. رمز أقل ، أخطاء أقل.
3. لا يحتاج المستخدم للتسجيل في طلبي (هذا أمر مزعج للكثيرين).
4. الخصوصية أعلى ، ويعرف المستخدم أن بياناته مخزنة في مكان يثق فيه أكثر مني على الأرجح.

التحضير

تلقي المفاتيح

في Google Developer Console ، أنشئ مشروعًا جديدًا ، وأدخل اسمًا.

في "لوحة التحكم" ، انقر على "تمكين API والخدمات" وقم بتشغيل Google Drive.

بعد ذلك ، انتقل إلى واجهة برمجة التطبيقات والخدمات -> قسم بيانات الاعتماد ، انقر فوق "إنشاء بيانات اعتماد". هناك ثلاثة أشياء تحتاج إلى القيام بها:

1. تكوين "نافذة طلب وصول OAuth". أدخل اسم التطبيق ونطاقك في قسم "المجالات المعتمدة" ورابطًا إلى الصفحة الرئيسية للتطبيق. الحقول الأخرى اختيارية.
   
2. في قسم "بيانات الاعتماد" ، انقر فوق "إنشاء بيانات اعتماد" -> "معرف عميل OAuth". حدد نوع "تطبيق الويب". في نافذة الإعدادات ، أضف "مصادر Javascript المسموح بها" و "عناوين URL المسموح بها لإعادة التوجيه":
   
   • المجال الخاص بك (مطلوب)
     
   • http://localhost:8000 (اختياري للعمل محليا).
     
   
   
   
3. في قسم "بيانات الاعتماد" ، انقر فوق "إنشاء بيانات اعتماد" -> "مفتاح API". في الإعدادات الرئيسية ، حدد القيود:
   
   • نوع التطبيق المسموح به -> الإحالات HTTP (المواقع)
     
   • اقبل طلبات HTTP من مصادر الإحالة (المواقع) التالية -> المجال والمضيف المحلي (كما في النقطة 2).
     
   • واجهات برمجة تطبيقات صالحة -> Google Drive API
     
   
   
   

يجب أن يبدو قسم بيانات الاعتماد كالتالي:



هنا انتهينا. نمرر الى الكود

التهيئة وتسجيل الدخول

 <script src="https://apis.google.com/js/api.js" onload="this.onload=function(){}; gapi.load('client:auth2', initClient)" onreadystatechange="if (this.readyState === 'complete') this.onload()"> </script> 

 function initClient() { gapi.client.init({ //   API apiKey: GOOGLE_API_KEY, //    clientId: GOOGLE_CLIENT_ID, // ,     Google Drive API v3 discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'], //    application data folder (. ) scope: 'https://www.googleapis.com/auth/drive.appfolder' }).then(() => { //    / (. ) gapi.auth2.getAuthInstance().isSignedIn.listen(onSignIn) //   initApp() }, error => { console.log('Failed to init GAPI client', error) //    initApp({showAlert: 'google-init-failed-alert'}) }) } 

1. لا يرى المستخدم ذلك مباشرةً: الملفات منه لا تسد مساحته الشخصية ، ولا يمكنه تدمير بياناتنا.
2. التطبيقات الأخرى لا تراها ولا يمكنها إفسادها أيضًا.
3. النطاق ، المذكور أعلاه ، يمنح التطبيق إمكانية الوصول إليه ، لكنه لا يمنح حق الوصول إلى بقية ملفات المستخدم. أي أننا لن نخيف أي شخص عن طريق طلبات الوصول إلى بياناته الشخصية.

1. يبدأ في متابعة أحداث تسجيل الدخول / الخروج - على الأرجح ، يجب أن يتم ذلك دائمًا.
2. تهيئة التطبيق. يمكن القيام بذلك قبل تحميل GAPI وتهيئته - كما تفضل. كان إجراء التهيئة مختلفًا قليلاً إذا كانت Google غير متوفرة. قد يقول شخص ما أن هذا لا يحدث :) ولكن ، أولاً ، يمكنك أن تكون ذكيًا بالمفاتيح وحقوق الوصول في المستقبل. ثانياً ، على سبيل المثال ، في الصين ، تم حظر Google.

 function isGapiLoaded() { return gapi && gapi.auth2 } function logIn() { if (isGapiLoaded()) { //    Google    gapi.auth2.getAuthInstance().signIn() } } function logOut() { if (isGapiLoaded()) { gapi.auth2.getAuthInstance().signOut() } } 

 function isLoggedIn() { return isGapiLoaded() && gapi.auth2.getAuthInstance().isSignedIn.get() } function onSignIn() { if (isLoggedIn()) { //   } else { //   } //   .    "" } 

مساعد الوعد

 function prom(gapiCall, argObj) { return new Promise((resolve, reject) => { gapiCall(argObj).then(resp => { if (resp && (resp.status < 200 || resp.status > 299)) { console.log('GAPI call returned bad status', resp) reject(resp) } else { resolve(resp) } }, err => { console.log('GAPI call failed', err) reject(err) }) }) } 

العمل مع الملفات

بالنسبة للمهام الأساسية ، لا تحتاج إلى العمل مع المجلدات ، لذلك تعمل جميع الوظائف أدناه مع الملفات الموجودة في جذر مجلد Application Data. تشير التعليقات إلى ما يجب تغييره للعمل مع المجلدات. الوثائق من جوجل هنا .

إنشاء ملف فارغ

 async function createEmptyFile(name, mimeType) { const resp = await prom(gapi.client.drive.files.create, { resource: { name: name, //     // mimeType = 'application/vnd.google-apps.folder' mimeType: mimeType || 'text/plain', //  'appDataFolder'   ID  parents: ['appDataFolder'] }, fields: 'id' }) //    —    return resp.result.id } 

Google Drive ليست قاعدة بيانات كاملة. على سبيل المثال ، إذا كنت تريد أن يعمل عدة مستخدمين من نفس حساب Google في وقت واحد من أجهزة مختلفة ، فقد تكون هناك مشاكل في حل التعارضات بسبب نقص المعاملات. لهذه المهام ، من الأفضل عدم استخدام Google Drive.

العمل مع محتويات الملف

 async function upload(fileId, content) { //    ,  ,     JSON return prom(gapi.client.request, { path: `/upload/drive/v3/files/${fileId}`, method: 'PATCH', params: {uploadType: 'media'}, body: typeof content === 'string' ? content : JSON.stringify(content) }) } async function download(fileId) { const resp = await prom(gapi.client.drive.files.get, { fileId: fileId, alt: 'media' }) // resp.body      // resp.result —    resp.body  JSON. //   ,  resp.result  false // ..    ,   return resp.result || resp.body } 

ملف البحث

 async function find(query) { let ret = [] let token do { const resp = await prom(gapi.client.drive.files.list, { //  'appDataFolder'   ID  spaces: 'appDataFolder', fields: 'files(id, name), nextPageToken', pageSize: 100, pageToken: token, orderBy: 'createdTime', q: query }) ret = ret.concat(resp.result.files) token = resp.result.nextPageToken } while (token) // :    [{id: '...', name: '...'}], //     return ret } 

  if ((await find('name = "config.json"')).length > 0) { // ()  } 

حذف الملفات

 async function deleteFile(fileId) { try { await prom(gapi.client.drive.files.delete, { fileId: fileId }) return true } catch (err) { if (err.status === 404) { return false } throw err } } 

مزامنة

1. يتم تنزيل التكوين الجديد من Google Drive مع تسجيل الدخول ، ثم كل 3 دقائق ، الكتابة فوق النسخة المحلية ؛
2. يتم سكب التغييرات المحلية على Google Drive ، الكتابة فوق ما كان هناك ؛
3. fileID التخزين المؤقت fileID التخزين المؤقت في localStorage لتسريع العمل وتقليل عدد الطلبات ؛
4. تكون الحالات (الخاطئة) التي يتم التعامل معها بشكل صحيح عندما يكون لدى Google Drive العديد من ملفات التكوين ، وعندما يقوم شخص ما بحذف ملف التكوين الخاص بنا أو تدميره.
5. لا تؤثر تفاصيل المزامنة على باقي رمز التطبيق. للعمل مع التكوين ، يمكنك استخدام وظيفتين فقط: getConfig() و saveConfig(newConfig) .

 //     const SYNC_PERIOD = 1000 * 60 * 3 // 3  //    const DEFAULT_CONFIG = { // ... } //  ID  ,      let configSyncTimeoutId async function getConfigFileId() { //  configFileId let configFileId = localStorage.getItem('configFileId') if (!configFileId) { //     Google Drive const configFiles = await find('name = "config.json"') if (configFiles.length > 0) { //   (  )  configFileId = configFiles[0].id } else { //   configFileId = await createEmptyFile('config.json') } //  ID localStorage.setItem('configFileId', configFileId) } return configFileId } async function onSignIn() { //   / (. ) if (isLoggedIn()) { //   //  (  -?)    scheduleConfigSync(0) } else { //   //          //   config file ID localStorage.removeItem('configFileId') //  localStorage   ,    } } function getConfig() { let ret try { ret = JSON.parse(localStorage.getItem('config')) } catch(e) {} //    ,    return ret || {...DEFAULT_CONFIG} } async function saveConfig(newConfig) { //    ,     localStorage.setItem('config', JSON.stringify(newConfig)) if (isLoggedIn()) { //  config file ID const configFileId = await getConfigFileId() //     Google Drive upload(configFileId, newConfig) } } async function syncConfig() { if (!isLoggedIn()) { return } //  config file ID const configFileId = await getConfigFileId() try { //   const remoteConfig = await download(configFileId) if (!remoteConfig || typeof remoteConfig !== 'object') { //    ,   upload(configFileId, getConfig()) } else { //  ,    localStorage.setItem('config', JSON.stringify(remoteConfig)) } //  ,  localStorage   } catch(e) { if (e.status === 404) { // -   ,   fileID     localStorage.removeItem('configFileId') syncConfig() } else { throw e } } } function scheduleConfigSync(delay) { //   ,    if (configSyncTimeoutId) { clearTimeout(configSyncTimeoutId) } configSyncTimeoutId = setTimeout(() => { //      syncConfig() .catch(e => console.log('Failed to synchronize config', e)) .finally(() => scheduleSourcesSync()) }, typeof delay === 'undefined' ? SYNC_PERIOD : delay) } function initApp() { //      scheduleConfigSync() } 

الخاتمة