Google पिकर, Google Drive में सेव की गई जानकारी के लिए एक "फ़ाइल खोलें" डायलॉग है. Google पिकर में ये सुविधाएं होती हैं:
- Google Drive यूज़र इंटरफ़ेस (यूआई) से मिलता-जुलता डिज़ाइन.
- Drive में मौजूद फ़ाइलों की झलक और थंबनेल कई व्यू में दिख रहे हैं.
- एक इनलाइन, मॉडल विंडो, ताकि उपयोगकर्ता मुख्य ऐप्लिकेशन से कभी बाहर न जाएं.
Google पिकर API एक JavaScript API है, जिसका इस्तेमाल आप अपने वेब ऐप्लिकेशन में कर सकते हैं, ताकि उपयोगकर्ता Drive फ़ाइलों को खोल सकें या अपलोड कर सकें.
आवेदन करने से जुड़ी ज़रूरी शर्तें
Google पिकर का इस्तेमाल करने वाले ऐप्लिकेशन को सभी मौजूदा सेवा की शर्तों का पालन करना होगा. सबसे ज़रूरी बात, आपको अपने अनुरोधों में खुद की सही पहचान करनी चाहिए.
आपके पास Google Cloud प्रोजेक्ट भी होना चाहिए.अपना एनवायरमेंट सेट अप करें
Google पिकर एपीआई का इस्तेमाल शुरू करने के लिए, आपको अपना एनवायरमेंट सेट अप करना होगा.
एपीआई चालू करें
Google API का इस्तेमाल करने से पहले, आपको उन्हें Google Cloud प्रोजेक्ट में चालू करना होगा. आपके पास एक Google Cloud प्रोजेक्ट में एक या एक से ज़्यादा एपीआई चालू करने का विकल्प होता है.
Google Cloud Console में, Google पिकर एपीआई को चालू करें.
एपीआई पासकोड बनाना
एपीआई कुंजी एक लंबी स्ट्रिंग होती है, जिसमें अंग्रेज़ी के बड़े और छोटे अक्षर, संख्याएं, अंडरस्कोर, और हाइफ़न जैसे कि AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe होते हैं.
पुष्टि करने के इस तरीके का इस्तेमाल, आपकी पहचान छिपाकर सार्वजनिक तौर पर उपलब्ध डेटा को ऐक्सेस करने के लिए किया जाता है. जैसे, "इंटरनेट पर मौजूद ऐसा कोई भी व्यक्ति जिसके पास यह लिंक है" शेयर करने की सेटिंग का इस्तेमाल करके शेयर की गई, Google Workspace की फ़ाइलें. ज़्यादा जानकारी के लिए, एपीआई कुंजियों का इस्तेमाल करके पुष्टि करें देखें.
एपीआई पासकोड बनाने के लिए:
- Google Cloud Console में, मेन्यू > एपीआई और सेवाएं > क्रेडेंशियल पर जाएं.
- क्रेडेंशियल बनाएं > एपीआई पासकोड पर क्लिक करें.
- इसके बाद, आपका नया एपीआई पासकोड दिखेगा.
- अपने ऐप्लिकेशन के कोड में इस्तेमाल करने के लिए, एपीआई पासकोड को कॉपी करें. इसके लिए, कॉपी करें पर क्लिक करें. एपीआई पासकोड, आपके प्रोजेक्ट के क्रेडेंशियल के "एपीआई पासकोड" सेक्शन में भी मिल सकता है.
- बेहतर सेटिंग को अपडेट करने और एपीआई पासकोड के इस्तेमाल को सीमित करने के लिए, कुंजी पर पाबंदी लगाएं पर क्लिक करें. ज़्यादा जानकारी के लिए, एपीआई पासकोड से जुड़ी पाबंदियां लागू करना लेख पढ़ें.
वेब ऐप्लिकेशन के लिए क्रेडेंशियल की अनुमति देना
असली उपयोगकर्ता के तौर पर पुष्टि करने और अपने ऐप्लिकेशन में उपयोगकर्ता का डेटा ऐक्सेस करने के लिए, आपको एक या उससे ज़्यादा OAuth 2.0 क्लाइंट आईडी बनाने होंगे. Client-ID का इस्तेमाल Google के OAuth सर्वर पर किसी एक ऐप्लिकेशन की पहचान करने के लिए किया जाता है. अगर आपका ऐप्लिकेशन एक से ज़्यादा प्लैटफ़ॉर्म पर काम करता है, तो आपको हर प्लैटफ़ॉर्म के लिए एक अलग क्लाइंट आईडी बनाना होगा.
- Google Cloud Console में, मेन्यू > एपीआई और सेवाएं > क्रेडेंशियल पर जाएं.
- क्रेडेंशियल बनाएं > OAuth क्लाइंट आईडी पर क्लिक करें.
- ऐप्लिकेशन का टाइप > वेब ऐप्लिकेशन पर क्लिक करें.
- नाम फ़ील्ड में, क्रेडेंशियल के लिए कोई नाम लिखें. यह नाम सिर्फ़ Google Cloud Console में दिखता है.
- अपने ऐप्लिकेशन से जुड़े, अनुमति पा चुके यूआरआई जोड़ें:
- क्लाइंट-साइड ऐप्लिकेशन (JavaScript)–अनुमति वाले JavaScript ऑरिजिन में जाकर, यूआरआई जोड़ें पर क्लिक करें. इसके बाद, ब्राउज़र के अनुरोधों के लिए इस्तेमाल करने के लिए यूआरआई डालें. यह उन डोमेन की पहचान करता है जिनसे आपका ऐप्लिकेशन OAuth 2.0 सर्वर को एपीआई अनुरोध भेज सकता है.
- सर्वर-साइड ऐप्लिकेशन (Java, Python वगैरह)–अनुमति वाले रीडायरेक्ट यूआरआई में जाकर, यूआरआई जोड़ें पर क्लिक करें. इसके बाद, एक एंडपॉइंट यूआरआई डालें जिस पर OAuth 2.0 सर्वर जवाब भेज सके.
- बनाएं पर क्लिक करें. अब OAuth क्लाइंट के बनाए गए पेज पर, आपका नया क्लाइंट आईडी और क्लाइंट सीक्रेट दिखता है.
Client-ID नोट करें. क्लाइंट सीक्रेट का इस्तेमाल वेब ऐप्लिकेशन के लिए नहीं किया जाता.
- ठीक है पर क्लिक करें. नया क्रेडेंशियल, OAuth 2.0 Client ID में दिखता है.
Picker ऑब्जेक्ट बनाते समय, उपयोगकर्ता का निजी डेटा ऐक्सेस करते हैं. ऐक्सेस टोकन का अनुरोध करने के लिए, Google API को ऐक्सेस करने के लिए OAuth 2.0 का इस्तेमाल करना लेख पढ़ें.
Google पिकर दिखाएं
इस गाइड के बाकी हिस्से में, वेब ऐप्लिकेशन से Google पिकर को लोड करने और दिखाने के तरीके के बारे में बताया गया है. पूरा उदाहरण देखने के लिए, 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 टोकन बनाया गया है या नहीं. इसके बाद यह फ़ंक्शन 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)
.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 पिकर इंस्टेंस बनाने के लिए, आपको PickerBuilder का इस्तेमाल करके Picker ऑब्जेक्ट बनाना होगा. सफल होने पर कॉल करने के लिए PickerBuilder, View, OAuth टोकन, डेवलपर कुंजी, और कॉलबैक फ़ंक्शन की मदद लेता है (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();
मान्य व्यू टाइप की सूची देखने के लिए, ViewId देखें.
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 पिकर को अन्य भाषाओं में रेंडर करना
यूज़र इंटरफ़ेस (यूआई) भाषा तय करने के लिए, setLocale(locale) तरीके का इस्तेमाल करके PickerBuilder इंस्टेंस में स्थान-भाषा दें.
नीचे दिया गया कोड सैंपल दिखाता है कि स्थान-भाषा को फ़्रेंच पर कैसे सेट करें:
let picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.IMAGE_SEARCH)
.setLocale('fr')
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
फ़िलहाल, इस्तेमाल की जा सकने वाली स्थान-भाषाओं की सूची नीचे दी गई है:
afamarbgbncacs |
dadeelenen-GBeses-419 |
eteufafifilfrfr-CA |
glguhihrhuidis |
itiwjaknkoltlv |
mlmrmsnlnoplpt-BR |
pt-PTroruskslsrsv |
swtatethtrukur |
vizh-CNzh-HKzh-TWzu |