इस दस्तावेज़ में, Google Picker API का इस्तेमाल करके, Google Picker को अपने वेब ऐप्लिकेशन में इंटिग्रेट करने का तरीका बताया गया है.
Google Picker API, JavaScript API है. इसे लागू करके, उपयोगकर्ताओं को Google Picker का इस्तेमाल करके Google Drive की फ़ाइलें चुनने या अपलोड करने की अनुमति दी जा सकती है. उपयोगकर्ता, आपके ऐप्लिकेशन को अपने Drive डेटा का ऐक्सेस दे सकते हैं. इससे, उन्हें अपनी फ़ाइलों के साथ सुरक्षित और अनुमति वाला इंटरैक्शन मिलता है.
सुविधाएं
Google Picker में ये सुविधाएं उपलब्ध हैं:
- Google Drive के यूज़र इंटरफ़ेस (यूआई) जैसा लुक और फ़ील.
- Drive की फ़ाइलों की झलक और थंबनेल इमेज दिखाने वाले कई व्यू.
- पहले से फ़िल्टर किए गए व्यू. इनमें सिर्फ़ खास तरह की फ़ाइलें (जैसे, पीडीएफ़ या इमेज) या कुछ फ़ोल्डर दिखते हैं.
- इनलाइन, मॉडल विंडो. इससे उपयोगकर्ता, मुख्य ऐप्लिकेशन से बाहर नहीं जाते.
ध्यान दें कि Google Picker से फ़ाइलें चुनी और अपलोड की जा सकती हैं. हालांकि, इससे उपयोगकर्ता, फ़ाइलों को व्यवस्थित, एक फ़ोल्डर से दूसरे फ़ोल्डर में ले जाने या कॉपी नहीं कर सकते. फ़ाइलें मैनेज करने के लिए, आपको Google Drive API या Drive के यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करना होगा.
ज़रूरी शर्तें
Google Picker का इस्तेमाल करने वाले ऐप्लिकेशन को, सेवा की सभी मौजूदा शर्तों का पालन करना होगा. सबसे ज़रूरी बात यह है कि आपको अपने अनुरोधों में अपनी सही पहचान देनी होगी.
आपके पास Google Cloud प्रोजेक्ट भी होना चाहिए.
अपना एनवायरमेंट सेट अप करने का तरीका
Google Picker API का इस्तेमाल शुरू करने के लिए, आपको अपना एनवायरमेंट सेट अप करना होगा.
एपीआई को चालू करें
Google API का इस्तेमाल करने से पहले, आपको उन्हें Google Cloud प्रोजेक्ट में चालू करना होगा. एक Google क्लाउड प्रोजेक्ट में, एक या एक से ज़्यादा एपीआई चालू किए जा सकते हैं.Google Cloud Console में, Google Picker API को चालू करें.
एपीआई पासकोड बनाएं
एपीआई पासकोड, एक लंबी स्ट्रिंग होती है. इसमें अंग्रेज़ी के बड़े और छोटे अक्षर, नंबर, अंडरस्कोर, और
हाइफ़न शामिल होते हैं. जैसे, AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe. इस पुष्टि करने के तरीके का इस्तेमाल, सार्वजनिक तौर पर उपलब्ध डेटा को गुमनाम तरीके से ऐक्सेस करने के लिए किया जाता है. जैसे, "इस लिंक वाले इंटरनेट पर मौजूद कोई भी व्यक्ति" शेयर करने की सेटिंग का इस्तेमाल करके शेयर की गई Google Workspace की फ़ाइलें. ज़्यादा जानकारी के लिए, एपीआई पासकोड मैनेज करना लेख पढ़ें.
एपीआई पासकोड बनाने के लिए:
- Google Cloud Console में, मेन्यू > एपीआई और सेवाएं > क्रेडेंशियल पर जाएं.
- क्रेडेंशियल बनाएं > एपीआई पासकोड पर क्लिक करें.
- आपको अपना नया एपीआई पासकोड दिखेगा.
- अपने ऐप्लिकेशन के कोड में इस्तेमाल करने के लिए, एपीआई पासकोड को कॉपी करने के लिए, कॉपी करें पर क्लिक करें. एपीआई पासकोड, आपके प्रोजेक्ट के क्रेडेंशियल के "एपीआई पासकोड" सेक्शन में भी मिल सकता है.
- अनधिकृत इस्तेमाल से बचने के लिए, हमारा सुझाव है कि आप यह पाबंदी लगाएं कि एपीआई पासकोड का इस्तेमाल कहां और किन एपीआई के लिए किया जा सकता है. ज़्यादा जानकारी के लिए, एपीआई पर पाबंदियां जोड़ना लेख पढ़ें.
वेब ऐप्लिकेशन के लिए क्रेडेंशियल को अनुमति देना
अपने ऐप्लिकेशन में, एंड यूज़र की पुष्टि करने और उपयोगकर्ता के डेटा को ऐक्सेस करने के लिए, आपको एक या एक से ज़्यादा OAuth 2.0 क्लाइंट आईडी बनाने होंगे. क्लाइंट आईडी का इस्तेमाल, Google के OAuth सर्वर पर किसी एक ऐप्लिकेशन की पहचान करने के लिए किया जाता है. अगर आपका ऐप्लिकेशन एक से ज़्यादा प्लैटफ़ॉर्म पर चलता है, तो आपको हर प्लैटफ़ॉर्म के लिए अलग-अलग क्लाइंट आईडी बनाना होगा.- Google Cloud Console में, मेन्यू > Google Auth प्लैटफ़ॉर्म > क्लाइंट पर जाएं.
- क्लाइंट बनाएं पर क्लिक करें.
- ऐप्लिकेशन का टाइप > वेब ऐप्लिकेशन पर क्लिक करें.
- नाम फ़ील्ड में, क्रेडेंशियल के लिए कोई नाम डालें. यह नाम सिर्फ़ Google Cloud Console में दिखता है.
- अपने ऐप्लिकेशन से जुड़े, अनुमति वाले यूआरआई जोड़ें:
- क्लाइंट-साइड ऐप्लिकेशन (JavaScript) – अनुमति वाले JavaScript ऑरिजन में जाकर, यूआरआई जोड़ें पर क्लिक करें. इसके बाद, ब्राउज़र के अनुरोधों के लिए इस्तेमाल किया जाने वाला यूआरआई डालें. इससे उन डोमेन की पहचान होती है जिनसे आपका ऐप्लिकेशन, OAuth 2.0 सर्वर को एपीआई अनुरोध भेज सकता है.
- सर्वर-साइड ऐप्लिकेशन (Java, Python वगैरह) – अनुमति वाले रीडायरेक्ट यूआरआई में जाकर, यूआरआई जोड़ें पर क्लिक करें. इसके बाद, एक एंडपॉइंट यूआरआई डालें, जिस पर OAuth 2.0 सर्वर, जवाब भेज सके.
- बनाएं पर क्लिक करें.
नया बनाया गया क्रेडेंशियल, OAuth 2.0 क्लाइंट आईडी में दिखता है.
ध्यान दें कि वेब ऐप्लिकेशन के लिए, क्लाइंट सीक्रेट का इस्तेमाल नहीं किया जाता.
अहम जानकारी: `Picker` ऑब्जेक्ट बनाते समय, आपके ऐप्लिकेशन को OAuth 2.0 ऐक्सेस टोकन भेजना होगा. इससे, निजी उपयोगकर्ता का डेटा ऐक्सेस किया जा सकेगा.Picker ऐक्सेस टोकन का अनुरोध करने के लिए,
Google API को ऐक्सेस करने के लिए OAuth 2.0 का इस्तेमाल करना लेख पढ़ें.
Google Picker को मैनेज करना
इस दस्तावेज़ के बाकी हिस्से में, वेब ऐप्लिकेशन से Google Picker को लोड और दिखाने के साथ-साथ, कॉलबैक लागू करने का तरीका बताया गया है. पूरा कोड सैंपल देखने के लिए, वेब ऐप्लिकेशन में Google Picker API की सुविधाओं का इस्तेमाल करना लेख पढ़ें.
Google Picker लाइब्रेरी लोड करना
Google Picker लाइब्रेरी लोड करने के लिए, 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() {
// 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 Picker की लाइब्रेरी लोड करता है. Google Picker की लाइब्रेरी के लोड होने के बाद, onPickerApiLoad कॉलबैक फ़ंक्शन को कॉल किया जाता है.
ध्यान दें: अगर TypeScript का इस्तेमाल किया जा रहा है, तो
@types/google.picker का इस्तेमाल करने के लिए,
window.google.picker इंस्टॉल किया जा सकता है. इन टाइप से जुड़ी किसी समस्या की शिकायत करने के लिए, सहायता टिकट खोलें.
Google Picker दिखाना
Google Picker का इंस्टेंस बनाने के लिए, आपको Picker ऑब्जेक्ट बनाने के लिए PickerBuilder का इस्तेमाल करना होगा. PickerBuilder View, OAuth 2.0 टोकन, डेवलपर कुंजी, और सफल होने पर कॉल किया जाने वाला
कॉलबैक फ़ंक्शन (pickerCallback) लेता है.
createPicker फ़ंक्शन यह पक्का करता है कि Google Picker API लोड हो जाए और OAuth 2.0 टोकन बन जाए. Drive ऐप्लिकेशन आईडी सेट करने के लिए, PickerBuilder.setAppId तरीके का इस्तेमाल करें. इसके लिए, क्लाउड प्रोजेक्ट नंबर का इस्तेमाल करें, ताकि
ऐप्लिकेशन को उपयोगकर्ता की फ़ाइलों को ऐक्सेस करने की अनुमति मिल सके. इसके बाद, यह फ़ंक्शन Google Picker का एक इंस्टेंस बनाता है और उसे दिखाता है:
// Create and render a Google Picker object for selecting from Drive.
function createPicker() {
const showPicker = () => {
// Replace with your API key and App ID.
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: ''});
}
}
इनकी जगह ये डालें:
API_KEY: आपका एपीआई पासकोड.APP_ID: आपके Cloud प्रोजेक्ट का नंबर.
Picker ऑब्जेक्ट, एक बार में एक View रेंडर करता है. कम से कम एक व्यू तय करें,
इसके लिए, ViewId
(google.picker.ViewId.*) का इस्तेमाल करें या DocsView का इंस्टेंस बनाएं, ताकि व्यू को
रेंडर करने के तरीके पर ज़्यादा कंट्रोल मिल सके.
अगर Google Picker में एक से ज़्यादा व्यू जोड़े जाते हैं, तो उपयोगकर्ता बाईं ओर मौजूद किसी टैब पर क्लिक करके, एक व्यू से दूसरे व्यू पर जा सकते हैं. टैब को लॉजिकल तरीके से ग्रुप में बांटा जा सकता है.ViewGroup
मान्य व्यू की सूची के लिए, ViewId Google Picker के रेफ़रंस में
देखें. इनमें से किसी भी व्यू के लिए टोकन पाने के लिए, https://www.googleapis.com/auth/drive.file स्कोप का इस्तेमाल करें.
Google Picker का कॉलबैक लागू करना
Google Picker के कॉलबैक का इस्तेमाल, Google Picker में उपयोगकर्ता के इंटरैक्शन पर प्रतिक्रिया देने के लिए किया जा सकता है. जैसे, कोई फ़ाइल चुनना या 'रद्द करें' पर क्लिक करना. The
ResponseObject इंटरफ़ेस, उपयोगकर्ता के चुने गए आइटम के बारे में जानकारी देता है.
// A callback implementation.
function pickerCallback(data) {
let url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
const doc = data[google.picker.Response.DOCUMENTS][0];
url = doc[google.picker.Document.URL];
}
const message = `You picked: ${url}`;
document.getElementById('result').textContent = message;
}
कॉलबैक को JSON-कोड में बदला गया डेटा ऑब्जेक्ट मिलता है. इस ऑब्जेक्ट में, Google Picker (google.picker.Response.ACTION) के साथ उपयोगकर्ता की ओर से की गई
action शामिल होती है. अगर उपयोगकर्ता
कोई आइटम चुनता है, तो docs
कलेक्शन भी भर जाता है. इस उदाहरण में, google.picker.Document.URL मुख्य पेज पर दिखता है. सभी प्रॉपर्टी के बारे में जानकारी के लिए, ResponseObject इंटरफ़ेस देखें.
खास तरह की फ़ाइलों को फ़िल्टर करना
खास आइटम को फ़िल्टर करने के लिए, ViewGroup का इस्तेमाल करें. यहां दिए गए कोड सैंपल में दिखाया गया है कि "Drive" के सबव्यू में सिर्फ़ दस्तावेज़ और प्रज़ेंटेशन कैसे दिखते हैं.
const 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)
.setAppId(cloudProjectNumber)
.setCallback(pickerCallback)
.build();
मान्य व्यू टाइप की सूची के लिए, देखें
ViewId. The DocsView ऑब्जेक्ट का इस्तेमाल, फ़िल्टर करने के अन्य
विकल्पों के लिए भी किया जा सकता है.
Google Picker के दिखने के तरीके को बेहतर बनाना
आप अलग-अलग व्यू के लिए सुविधाएं चालू या बंद करने के लिए Feature ऑब्जेक्ट का इस्तेमाल कर सकते हैं. Google Picker विंडो के दिखने के तरीके को बेहतर बनाने के लिए, PickerBuilder.enableFeature या
PickerBuilder.disableFeature
तरीके का इस्तेमाल करें. उदाहरण के लिए, अगर आपके पास सिर्फ़ एक व्यू है, तो हो सकता है कि आपको
नेविगेशन पैन (Feature.NAV_HIDDEN) छिपाना हो, ताकि
उपयोगकर्ताओं को आइटम देखने के लिए ज़्यादा जगह मिल सके.
यहां दिए गए कोड सैंपल में, स्प्रेडशीट के खोज पिकर का एक उदाहरण दिखाया गया है. इसमें इस सुविधा का इस्तेमाल किया गया है:
const picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.SPREADSHEETS)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Google Picker को iframe में एम्बेड करना
`PickerBuilder.toUri` तरीके का इस्तेमाल करके, Google Picker को सीधे एचटीएमएल iframe में एम्बेड किया जा सकता है. इसके लिए, डिफ़ॉल्ट डायलॉग का इस्तेमाल करने की ज़रूरत नहीं होती
. PickerBuilder.toUri
तरीका, PickerBuilder ऑब्जेक्ट के लिए यूआरआई जनरेट करता है.
यहां दिए गए कोड सैंपल में, Google Picker को iframe में एम्बेड करने का तरीका बताया गया है:
// Create a Google Picker builder.
const builder = new google.picker.PickerBuilder()
.setDeveloperKey('API_KEY')
.setAppId('APP_ID')
.setOAuthToken(accessToken)
.addView(google.picker.ViewId.DOCS)
.setCallback(pickerCallback);
// Create an iframe and use .toUri as the source.
const pickerContainer = document.getElementById('IFRAME_CONTAINER_ID');
const iframe = document.createElement('iframe');
iframe.setAttribute("src", builder.toUri().toString());
iframe.style.width = "100%";
iframe.style.height = "600px";
iframe.style.border = "none";
// Attach it to your page.
pickerContainer.appendChild(iframe);
इनकी जगह ये डालें:
API_KEY: आपका एपीआई पासकोड.APP_ID: आपके Cloud प्रोजेक्ट का नंबर.IFRAME_CONTAINER_ID: आपके iframe कंटेनर का आईडी.
मिलते-जुलते विषय
- कोड सैंपल: वेब ऐप्लिकेशन में Google Picker API की सुविधाओं का इस्तेमाल करना
- Google Picker वेब कॉम्पोनेंट का इस्तेमाल करना
- Google Drive API के स्कोप चुनना