प्रस्तावना

1. सर्वर के लिए भुगतान करने की आवश्यकता नहीं है, यह इसकी स्थिरता और उपलब्धता के बारे में सिर को चोट नहीं पहुंचाता है।
2. कम कोड, कम त्रुटियाँ।
3. उपयोगकर्ता को मेरे आवेदन में पंजीकरण करने की आवश्यकता नहीं है (यह बहुतों के लिए कष्टप्रद है)।
4. गोपनीयता अधिक है, और उपयोगकर्ता जानता है कि उसका डेटा एक ऐसी जगह पर संग्रहीत किया गया है कि वह सबसे अधिक मुझ पर भरोसा करता है।

ट्रेनिंग

चाबी प्राप्त करना

Google डेवलपर कंसोल में, एक नया प्रोजेक्ट बनाएं , एक नाम दर्ज करें।

"कंट्रोल पैनल" में "सक्षम एपीआई और सेवाएं" पर क्लिक करें और Google ड्राइव चालू करें।

इसके बाद, एपीआई और सेवाओं -> क्रेडेंशियल अनुभाग पर जाएं, "क्रेडेंशियल्स बनाएं" पर क्लिक करें। आपको तीन काम करने होंगे:

1. "OAuth एक्सेस अनुरोध विंडो" कॉन्फ़िगर करें। एप्लिकेशन का नाम, "अधिकृत डोमेन" अनुभाग में अपना डोमेन और आवेदन के मुख्य पृष्ठ का लिंक दर्ज करें। अन्य क्षेत्र वैकल्पिक हैं।
   
2. "क्रेडेंशियल" अनुभाग में, "क्रेडेंशियल्स बनाएं" -> "OAuth क्लाइंट आइडेंटिफ़ायर" पर क्लिक करें। "वेब एप्लिकेशन" का चयन करें। सेटिंग्स विंडो में, "स्वीकृत जावास्क्रिप्ट स्रोत" और "अनुमत रीडायरेक्ट URI" जोड़ें।
   
   • आपका डोमेन (आवश्यक)
     
   • http://localhost:8000 (स्थानीय स्तर पर काम करने के लिए वैकल्पिक)।
     
   
   
   
3. "क्रेडेंशियल" अनुभाग में, "क्रेडेंशियल्स बनाएं" -> "एपीआई कुंजी" पर क्लिक करें। मुख्य सेटिंग्स में, प्रतिबंध निर्दिष्ट करें:
   
   • अनुमत आवेदन प्रकार -> HTTP संदर्भ (वेबसाइट)
     
   • निम्नलिखित रेफ़रल स्रोतों (साइटों) -> अपने डोमेन और लोकलहोस्ट (बिंदु 2 में) से http अनुरोध स्वीकार करें।
     
   • मान्य API -> Google डिस्क 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) }) }) } 

फाइलों के साथ काम करें

बुनियादी कार्यों के लिए, आपको फ़ोल्डरों के साथ काम करने की आवश्यकता नहीं है, इसलिए नीचे दिए गए सभी कार्य एप्लिकेशन डेटा फ़ोल्डर की जड़ में फाइलों के साथ काम करते हैं। टिप्पणियाँ इंगित करती हैं कि फ़ोल्डर्स के साथ काम करने के लिए क्या बदलने की आवश्यकता है। Google से प्रलेखन यहाँ है ।

एक खाली फ़ाइल बनाएँ

 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 ड्राइव का उपयोग न करना बेहतर है।

फ़ाइल सामग्री के साथ काम करें

 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 ड्राइव से डाउनलोड किया जाता है, और फिर हर 3 मिनट में, स्थानीय कॉपी को अधिलेखित करता है;
2. स्थानीय परिवर्तन Google ड्राइव पर डाले गए हैं, जो वहाँ था, उस पर ओवरराइटिंग;
3. कॉन्फ़िगरेशन fileID को काम में तेजी लाने और अनुरोधों की संख्या को कम करने के लिए fileID में कैश किया गया है;
4. सही तरीके से (गलत तरीके से) स्थिति तब होती है जब Google ड्राइव में कई कॉन्फ़िगरेशन फ़ाइलें होती हैं, और जब किसी ने हमारी कॉन्फ़िगरेशन फ़ाइल को हटा दिया या इसे बर्बाद कर दिया।
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() } 

निष्कर्ष