Google पिकर एपीआई

Google पिकर एपीआई एक JavaScript API है, जिसका इस्तेमाल अपने वेब ऐप्लिकेशन में किया जा सकता है, ताकि उपयोगकर्ता Google Drive की फ़ाइलें अपलोड करना. उपयोगकर्ता आपके ऐप्लिकेशन को यह ऐक्सेस करने की अनुमति दे सकते हैं: Drive के डेटा का इस्तेमाल करके, फ़ाइलों को सुरक्षित और अनुमति के साथ ऐक्सेस किया जा सकता है.

Google पिकर "फ़ाइल खोलने की सुविधा" की तरह काम करता है Drive पर सेव की गई जानकारी के लिए डायलॉग बॉक्स और इसमें ये सुविधाएं हैं:

• Google Drive के यूज़र इंटरफ़ेस (यूआई) से मिलता-जुलता.
• Drive में मौजूद फ़ाइलों की झलक और थंबनेल इमेज को कई बार देखा गया.
• यह इनलाइन और मॉडल विंडो है, ताकि उपयोगकर्ता मुख्य ऐप्लिकेशन से कभी बाहर न निकलें.

ध्यान दें कि Google पिकर से उपयोगकर्ता एक फ़ोल्डर में फ़ाइलें व्यवस्थित नहीं कर सकते, उन्हें एक जगह से दूसरी जगह ले जा सकते हैं या उन्हें कॉपी नहीं कर सकते अन्य को. ऐसा करने के लिए, Google Drive API का इस्तेमाल करें या Drive के यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करें.

आवेदन करने के लिए ज़रूरी शर्तें

Google पिकर का इस्तेमाल करने वाले ऐप्लिकेशन को सभी मौजूदा सेवा की शर्तें. सबसे ज़रूरी बात, आपको अपने समाचार संगठन के लिए भी शामिल हैं.

अपना एनवायरमेंट सेट अप करें

Google पिकर एपीआई का इस्तेमाल शुरू करने के लिए, आपको अपना एनवायरमेंट सेट अप करना होगा.

इस एपीआई को चालू करें

Google API का इस्तेमाल करने से पहले, आपको उन्हें Google Cloud प्रोजेक्ट में चालू करना होगा. किसी एक Google Cloud प्रोजेक्ट में, एक या उससे ज़्यादा एपीआई चालू किए जा सकते हैं.

• Google Cloud Console में, Google पिकर एपीआई को चालू करें.

  एपीआई चालू करना

एपीआई पासकोड बनाना

एपीआई पासकोड एक लंबी स्ट्रिंग होती है. इसमें अपर और लोअर केस अक्षरों, संख्याओं, अंडरस्कोर और हाइफ़न शामिल कर सकते हैं, जैसे कि AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe. पहचान छिपाकर सार्वजनिक तौर पर उपलब्ध कॉन्टेंट को ऐक्सेस करने के लिए, पुष्टि करने का यह तरीका इस्तेमाल किया जाता है जैसे, Google Workspace की वे फ़ाइलें जिन्हें "इंटरनेट पर कोई भी व्यक्ति ऐक्सेस कर सकता है" "इस लिंक का इस्तेमाल करके" शेयर करने की सेटिंग. ज़्यादा जानकारी के लिए, यह देखें एपीआई पासकोड का इस्तेमाल करके पुष्टि करें.

एपीआई पासकोड बनाने के लिए:

1. Google Cloud Console में, मेन्यू menu पर जाएं > एपीआई और सेवाएं > क्रेडेंशियल.

   क्रेडेंशियल पर जाएं

2. क्रेडेंशियल बनाएं पर क्लिक करें > एपीआई पासकोड.
3. आपकी नई API (एपीआई) कुंजी दिखाई गई.
   • कॉपी करें content_copy पर क्लिक करें का इस्तेमाल करें. एपीआई पासकोड ये भी हो सकता है: "एपीआई पासकोड" में मिली जानकारी सेक्शन पर जाएं.
   • बेहतर सेटिंग को अपडेट करने और इस्तेमाल को सीमित करने के लिए, कुंजी पर पाबंदी लगाएं पर क्लिक करें . ज़्यादा जानकारी के लिए, एपीआई पासकोड से जुड़ी पाबंदियां लागू करना लेख पढ़ें.

वेब ऐप्लिकेशन के लिए क्रेडेंशियल को अनुमति देना

असली उपयोगकर्ताओं की पुष्टि करने और अपने ऐप्लिकेशन में उपयोगकर्ता का डेटा ऐक्सेस करने के लिए, आपको ये काम करने होंगे एक या उससे ज़्यादा OAuth 2.0 क्लाइंट आईडी बनाएं. Client-ID का इस्तेमाल, के लिए एक ऐप्लिकेशन बनाया है. अगर आपका ऐप्लिकेशन एक से ज़्यादा प्लैटफ़ॉर्म पर चलता है, आपको हर प्लैटफ़ॉर्म के लिए एक अलग क्लाइंट आईडी बनाना होगा.

1. Google Cloud Console में, मेन्यू menu > एपीआई और सेवाएं > क्रेडेंशियल.

   क्रेडेंशियल पर जाएं

2. क्रेडेंशियल बनाएं > OAuth क्लाइंट आईडी पर क्लिक करें.
3. ऐप्लिकेशन टाइप > वेब ऐप्लिकेशन पर क्लिक करें.
4. नाम फ़ील्ड में, क्रेडेंशियल के लिए कोई नाम लिखें. यह नाम सिर्फ़ Google Cloud Console में दिखता है.
5. अपने ऐप्लिकेशन से जुड़े आधिकारिक यूआरआई जोड़ें:
   • क्लाइंट-साइड ऐप्लिकेशन (JavaScript)–अनुमति वाले JavaScript ऑरिजिन में जाकर, यूआरआई जोड़ें पर क्लिक करें. इसके बाद, ब्राउज़र अनुरोधों के इस्तेमाल के लिए यूआरआई डालें. यह उन डोमेन की पहचान करता है जिनसे आपका ऐप्लिकेशन, OAuth 2.0 सर्वर को एपीआई अनुरोध भेज सकता है.
   • सर्वर-साइड ऐप्लिकेशन (Java, Python वगैरह)–अनुमति वाले रीडायरेक्ट यूआरआई में जाकर, यूआरआई जोड़ें पर क्लिक करें. इसके बाद, एंडपॉइंट यूआरआई डालें जिस पर OAuth 2.0 सर्वर जवाब भेज सके.
6. बनाएं पर क्लिक करें. OAuth क्लाइंट की बनाई गई स्क्रीन दिखेगी. इसमें आपका नया क्लाइंट आईडी और क्लाइंट सीक्रेट दिखेगा.

   Client-ID नोट करें. वेब ऐप्लिकेशन के लिए क्लाइंट सीक्रेट का इस्तेमाल नहीं किया जाता.

7. ठीक है पर क्लिक करें. नया क्रेडेंशियल, OAuth 2.0 क्लाइंट आईडी के तहत दिखता है.

Google पिकर दिखाएं

Google पिकर लाइब्रेरी लोड करें

Google पिकर लाइब्रेरी लोड करने के लिए, gapi.load() को लाइब्रेरी का नाम और सही तरीके से लोड होने के बाद शुरू करने के लिए कॉलबैक फ़ंक्शन:

    <script>
      let tokenClient;
      let accessToken = null;
      let pickerInited = false;
      let gisInited = false;

      // Use the API Loader script to load google.picker
      function onApiLoad() {
        gapi.load('picker', onPickerApiLoad);
      }

      function onPickerApiLoad() {
        pickerInited = true;
      }

      function gisLoaded() {
        // TODO(developer): Replace with your client ID and required scopes.
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: 'CLIENT_ID',
          scope: 'SCOPES',
          callback: '', // defined later
        });
        gisInited = true;
    }
    </script>
    <!-- Load the Google API Loader script. -->
    <script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
    

इन्हें बदलें:

• CLIENT_ID: आपके वेब ऐप्लिकेशन का क्लाइंट आईडी.
• SCOPES: एक या एक से ज़्यादा OAuth 2.0 स्कोप, जिनकी ज़रूरत आपको Google API को ऐक्सेस करने के लिए देनी होगी. यह इस बात पर निर्भर करता है कि आपको किस लेवल का ऐक्सेस चाहिए. ज़्यादा जानकारी के लिए, Google API के लिए OAuth 2.0 का दायरा देखें.

google.accounts.oauth2 JavaScript लाइब्रेरी की मदद से, उपयोगकर्ता की सहमति के लिए अनुरोध किया जा सकता है. साथ ही, उपयोगकर्ता के डेटा के साथ काम करने के लिए, ऐक्सेस टोकन पाया जा सकता है. initTokenClient() वाला तरीका, आपके वेब ऐप्लिकेशन के क्लाइंट आईडी से एक नए टोकन क्लाइंट को शुरू करता है. ज़्यादा जानकारी के लिए, टोकन मॉडल का इस्तेमाल करना लेख पढ़ें.

onApiLoad() फ़ंक्शन, Google पिकर लाइब्रेरी को लोड करता है. कॉन्टेंट बनाने Google पिकर लाइब्रेरी के बाद, onPickerApiLoad() कॉलबैक फ़ंक्शन को कॉल किया जाता है सफलतापूर्वक लोड होता है.

Google पिकर दिखाएं

createPicker() फ़ंक्शन यह पक्का करने के लिए जांच करता है कि Google पिकर एपीआई पूरी तरह लोड हो गया है या नहीं और यह कि एक OAuth टोकन बना दिया गया है. इसका इस्तेमाल करें setAppId फ़ील्ड Drive का ऐप्लिकेशन आईडी, ताकि ऐप्लिकेशन को उपयोगकर्ता की फ़ाइलें ऐक्सेस करने की अनुमति मिल सके. इसके बाद यह फ़ंक्शन Google पिकर का एक इंस्टेंस बनाता है और उसे दिखाता है:

    // Create and render a Google Picker object for selecting from Drive.
    function createPicker() {
      const showPicker = () => {
        // TODO(developer): Replace with your API key
        const picker = new google.picker.PickerBuilder()
            .addView(google.picker.ViewId.DOCS)
            .setOAuthToken(accessToken)
            .setDeveloperKey('API_KEY')
            .setCallback(pickerCallback)
            .setAppId(APP_ID)
            .build();
        picker.setVisible(true);
      }

      // Request an access token.
      tokenClient.callback = async (response) => {
        if (response.error !== undefined) {
          throw (response);
        }
        accessToken = response.access_token;
        showPicker();
      };

      if (accessToken === 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: ''});
      }
    }
    

Google पिकर इंस्टेंस बनाने के लिए, आपको Picker बनाना होगा ऑब्जेक्ट को ढूंढने के लिए, PickerBuilder का इस्तेमाल कर रहे हैं. कॉन्टेंट बनाने PickerBuilder एक OAuth टोकन, View, सफलता पाने के लिए कॉल करने के लिए डेवलपर कुंजी और कॉलबैक फ़ंक्शन (pickerCallback).

Picker ऑब्जेक्ट एक बार में एक View रेंडर करता है. कम से कम एक व्यू तय करें. इसके लिए, ViewId (google.​picker.​ViewId.*) का इस्तेमाल करें या टाइप (google.​picker.​*View). ज़्यादा जानकारी के लिए, टाइप के हिसाब से व्यू तय करें तय करें कि व्यू कैसे रेंडर होगा.

अगर Google पिकर में एक से ज़्यादा व्यू जोड़े गए हैं, तो उपयोगकर्ता बाईं ओर मौजूद टैब पर क्लिक करें. टैब को ViewGroup ऑब्जेक्ट की मदद से, लॉजिकल तरीके से ग्रुप किया जा सकता है.

Google पिकर कॉलबैक लागू करें

Google पिकर कॉलबैक का इस्तेमाल, Google पिकर में उपयोगकर्ता के इंटरैक्शन पर प्रतिक्रिया देने के लिए किया जा सकता है. जैसे, क्लिक करने या 'रद्द करें' बटन को दबाकर. Response ऑब्जेक्ट, उपयोगकर्ता के चुने हुए विकल्पों के बारे में जानकारी देता है.

    // A simple callback implementation.
    function pickerCallback(data) {
      let url = 'nothing';
      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        let doc = data[google.picker.Response.DOCUMENTS][0];
        url = doc[google.picker.Document.URL];
      }
      let message = `You picked: ${url}`;
      document.getElementById('result').innerText = message;
    }
    

कॉलबैक को JSON कोड में बदला गया data ऑब्जेक्ट मिलता है. इस ऑब्जेक्ट में एक Action उपयोगकर्ता Google पिकर (google.picker.Response.ACTION) की मदद से परफ़ॉर्म करता है. अगर उपयोगकर्ता किसी Document आइटम को चुनता है, google.picker.Response.DOCUMENTS सरणी भी अपने-आप जानकारी भर जाएगी. इस उदाहरण में, google.picker.Document.URL को मुख्य पेज पर दिखाया गया है. डेटा फ़ील्ड के बारे में ज़्यादा जानकारी के लिए, JSON रेफ़रंस देखें.

खास फ़ाइल टाइप को फ़िल्टर करें

खास आइटम को फ़िल्टर करने के लिए, ViewGroup का इस्तेमाल करें. नीचे दिया गया कोड सैंपल दिखाता है कि "Google Drive" सबव्यू में सिर्फ़ दस्तावेज़ और प्रज़ेंटेशन दिखते हैं.

    let picker = new google.picker.PickerBuilder()
        .addViewGroup(
          new google.picker.ViewGroup(google.picker.ViewId.DOCS)
              .addView(google.picker.ViewId.DOCUMENTS)
              .addView(google.picker.ViewId.PRESENTATIONS))
        .setOAuthToken(oauthToken)
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
    

Google पिकर की ड्राइंग को बेहतर बनाएं

अलग-अलग व्यू के लिए सुविधाएं चालू या बंद करने के लिए, Feature ऑब्जेक्ट का इस्तेमाल किया जा सकता है. Google पिकर विंडो के रंग-रूप को ठीक करने के लिए, PickerBuilder.enableFeature() या PickerBuilder.disableFeature() फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए, अगर आपके पास सिर्फ़ एक व्यू है, तो हो सकता है कि आप नेविगेशन पैनल (Feature.NAV_HIDDEN) का इस्तेमाल करें.

नीचे दिया गया कोड सैंपल, इस सुविधा का इस्तेमाल करने वाले स्प्रेडशीट के सर्च पिकर का एक उदाहरण दिखाता है:

     let picker = new google.picker.PickerBuilder()
         .addView(google.picker.ViewId.SPREADSHEETS)
         .enableFeature(google.picker.Feature.NAV_HIDDEN)
         .setDeveloperKey(developerKey)
         .setCallback(pickerCallback)
         .build();
     

Google पिकर को अन्य भाषाओं में रेंडर करें

PickerBuilder में स्थान-भाषा देकर, यूज़र इंटरफ़ेस (यूआई) की भाषा बताएं इंस्टेंस को बदलने के लिए, setLocale(locale) तरीके का इस्तेमाल करें.

नीचे दिया गया कोड सैंपल, स्थान-भाषा को फ़्रेंच पर सेट करने का तरीका बताता है:

    let picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.IMAGE_SEARCH)
        .setLocale('fr')
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
    

फ़िलहाल इस्तेमाल की जा सकने वाली स्थान-भाषाओं की सूची नीचे दी गई है: