इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी
1. परिचय
खास जानकारी
Google Wallet API की मदद से, अलग-अलग तरह के पास दिखाकर उपयोगकर्ताओं से जुड़ा जा सकता है. जैसे, लॉयल्टी कार्ड, ऑफ़र, उपहार कार्ड, इवेंट के टिकट, बस, मेट्रो वगैरह के टिकट, बोर्डिंग पास वगैरह. हर तरह के पास या पास क्लास में, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, इस्तेमाल के उदाहरण के हिसाब से फ़ील्ड और सुविधाएं होती हैं.
हालांकि, हो सकता है कि ये हर तरह के इस्तेमाल के उदाहरण के लिए सही न हों. ज़्यादा पसंद के मुताबिक अनुभव बनाने के लिए, सामान्य पास टाइप का इस्तेमाल किया जा सकता है. यहां सामान्य पास टाइप के इस्तेमाल के कुछ उदाहरण दिए गए हैं:
- पार्किंग पास
- लाइब्रेरी की सदस्यता के कार्ड
- स्टोर की गई रकम वाले वाउचर
- जिम की सदस्यता के कार्ड
- बुकिंग
सामान्य पास का इस्तेमाल, इस्तेमाल के ऐसे किसी भी उदाहरण के लिए किया जा सकता है जिसे इनके साथ दिखाया जा सकता है:
- जानकारी की ज़्यादा से ज़्यादा तीन पंक्तियां
- (ज़रूरी नहीं) बारकोड ग्राफ़िक
- (ज़रूरी नहीं) जानकारी वाला सेक्शन
Google Wallet API के बारे में ज़्यादा जानने या किसी वेब पेज पर Google Wallet में जोड़ें बटन जोड़ने के लिए, कृपया Google Wallet के डेवलपर दस्तावेज़ देखें.
क्लास और ऑब्जेक्ट पास करना
Google Wallet API, इन चीज़ों को बनाने के तरीके उपलब्ध कराता है:
टाइप | ब्यौरा |
पास की क्लास | किसी पास ऑब्जेक्ट के लिए टेंप्लेट. इसमें इस क्लास के सभी पास ऑब्जेक्ट के लिए सामान्य जानकारी होती है. |
पास ऑब्जेक्ट | पास क्लास का एक ऐसा इंस्टेंस जो किसी यूज़र आईडी के लिए यूनीक होता है. |
इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी
इस कोडलैब में, आपको ये काम करने होंगे.
- डेमो मोड में, वाउचर जारी करने वाला नया खाता बनाना
- पास जारी करने के लिए सेवा खाता बनाना
- नई जेनरिक पास क्लास बनाना
- नया पास ऑब्जेक्ट बनाना
- पास सेव करने के लिए, Google Wallet में जोड़ें बटन बनाएं
- अपने वेब पेज पर बटन दिखाना
- पास की जानकारी सेव करने का नतीजा मैनेज करना
ज़रूरी शर्तें
- Git
- Google Cloud Console का ऐक्सेस वाला Google खाता
- Node.js का 10 या उसके बाद का वर्शन
मकसद
इस कोडलैब को पूरा करने के बाद, ये काम किए जा सकेंगे:
- Google Wallet का इस्तेमाल करके पास ऑब्जेक्ट बनाना
- Google Wallet में जोड़ें बटन बनाना
सहायता
अगर आपको कोडलैब में किसी भी समय समस्या आती है, तो google-pay/wallet-web-codelab GitHub डेटा स्टोर में रेफ़रंस के लिए पूरा समाधान मौजूद है.
2. सेटअप
इस चरण में, आपको डेमो मोड में जारीकर्ता खाता बनाना होगा. इससे, आपको पास क्लास और ऑब्जेक्ट बनाने की सुविधा मिलेगी. इन्हें उपयोगकर्ता के वॉलेट में जोड़ा जा सकता है. इसके बाद, आपको Google Cloud प्रोजेक्ट और सेवा खाता बनाना होगा. इनका इस्तेमाल, प्रोग्राम के हिसाब से पास क्लास और ऑब्जेक्ट बनाने के लिए किया जाएगा. यह प्रोसेस, बैकएंड सर्वर की तरह ही होगी. आखिर में, आपको Google Cloud के सेवा खाते को अपने Google Wallet के जारीकर्ता खाते में पास मैनेज करने की अनुमति देनी होगी.
Google Wallet जारी करने वाले खाते के लिए साइन अप करना
Google Wallet के लिए पास बनाने और उन्हें डिस्ट्रिब्यूट करने के लिए, जारी करने वाला खाता ज़रूरी है. Google Pay और Wallet Console का इस्तेमाल करके साइन अप किया जा सकता है. शुरुआत में, आपके पास डेमो मोड में पास बनाने का ऐक्सेस होगा. इसका मतलब है कि सिर्फ़ टेस्ट में शामिल कुछ उपयोगकर्ता ही आपके बनाए गए पास जोड़ पाएंगे. टेस्ट उपयोगकर्ताओं को Google Pay और Wallet Console में मैनेज किया जा सकता है.
डेमो मोड के बारे में ज़्यादा जानने के लिए, पास करने से जुड़ी ज़रूरी शर्तें देखें.
- Google Pay और Wallet Console खोलें
- जारीकर्ता खाता बनाने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें
- Google Wallet API चुनें
- पुष्टि करें कि आपको सेवा की शर्तें और निजता नीति के बारे में पता है
- इश्यूअर आईडी की वैल्यू को टेक्स्ट एडिटर या किसी दूसरी जगह पर कॉपी करें
- मैनेज करें टैब में जाकर, टेस्ट खाते सेट अप करें को चुनें
- इस कोडलैब में इस्तेमाल किए जाने वाले ईमेल पते जोड़ें
Google Wallet API को चालू करना
- Google Cloud Console में साइन इन करें
- अगर आपके पास पहले से कोई Google Cloud प्रोजेक्ट नहीं है, तो अभी एक प्रोजेक्ट बनाएं. ज़्यादा जानकारी के लिए, प्रोजेक्ट बनाना और मैनेज करना देखें
- अपने प्रोजेक्ट के लिए Google Wallet API (इसे Passes के लिए Google Pay API भी कहा जाता है) को चालू करें
सेवा खाता और पासकोड बनाना
Google Wallet API को कॉल करने के लिए, सेवा खाता और सेवा खाता कुंजी ज़रूरी है. सेवा खाता वह पहचान है जो Google Wallet API को कॉल करता है. सेवा खाते की कुंजी में एक निजी कुंजी होती है, जो आपके ऐप्लिकेशन की पहचान सेवा खाते के तौर पर करती है. यह पासकी संवेदनशील होती है. इसलिए, इसे गोपनीय रखें.
सेवा खाता बनाना
- Google Cloud Console में, सेवा खाते खोलें
- अपने सेवा खाते के लिए नाम, आईडी, और जानकारी डालें
- बनाएं और जारी रखें को चुनें
- हो गया चुनें
सेवा खाते की कुंजी बनाना
- अपना सेवा खाता चुनना
- KEYS मेन्यू चुनें
- कुंजी जोड़ें को चुनें. इसके बाद, नई कुंजी बनाएं को चुनें
- JSON कुंजी का टाइप चुनें
- बनाएं चुनें
आपको पासकोड वाली फ़ाइल को अपने लोकल वर्कस्टेशन में सेव करने के लिए कहा जाएगा. इसकी जगह याद रखें.
GOOGLE_APPLICATION_CREDENTIALS एनवायरमेंट वैरिएबल सेट करना
Google SDK टूल, GOOGLE_APPLICATION_CREDENTIALS एनवायरमेंट वैरिएबल का इस्तेमाल सेवा खाते के तौर पर पुष्टि करने और Google Cloud प्रोजेक्ट के लिए अलग-अलग एपीआई को ऐक्सेस करने के लिए करते हैं.
GOOGLE_APPLICATION_CREDENTIALSएनवायरमेंट वैरिएबल सेट करने के लिए, Google Cloud सेवा खाते की कुंजियों के दस्तावेज़ में दिए गए निर्देशों का पालन करें- पुष्टि करें कि एनवायरमेंट वैरिएबल, नए टर्मिनल (MacOS/Linux) या कमांड-लाइन (Windows) सेशन में सेट है. अगर आपका कोई सेशन पहले से खुला है, तो आपको नया सेशन शुरू करना पड़ सकता है
echo $GOOGLE_APPLICATION_CREDENTIALS
सेवा खाते को अनुमति देना
आखिर में, आपको Google Wallet पास मैनेज करने के लिए, सेवा खाते को अनुमति देनी होगी.
- Google Pay और Wallet Console खोलें
- उपयोगकर्ता चुनें
- किसी उपयोगकर्ता को न्योता भेजें को चुनें
- सेवा खाते का ईमेल पता डालें (उदाहरण के लिए,
test-svc@myproject.iam.gserviceaccount.com) - ऐक्सेस लेवल ड्रॉप-डाउन मेन्यू से, डेवलपर या एडमिन चुनें
- न्योता भेजें चुनें
3. सैंपल Node.js ऐप्लिकेशन शुरू करना
अवधि 10:00
इस चरण में, आपको एक सैंपल Node.js ऐप्लिकेशन चलाना होगा, जो शॉपिंग वेबसाइट और बैकएंड सर्वर के तौर पर काम करता है.
सैंपल रिपॉज़िटरी का क्लोन बनाना
google-pay/wallet-web-codelab रिपॉज़िटरी में, Node.js पर आधारित सैंपल प्रोजेक्ट और अलग-अलग स्क्रिप्ट फ़ाइलें शामिल हैं. ये फ़ाइलें, पास क्लास और ऑब्जेक्ट को प्रोवाइड करने के लिए इस्तेमाल किए जाने वाले बैकएंड सर्वर की नकल करती हैं. आपको इनमें बदलाव करके, प्रॉडक्ट की जानकारी वाली स्क्रीन पर Google Wallet में जोड़ें बटन जोड़ना होगा.
- अपने लोकल वर्कस्टेशन पर रिपॉज़िटरी को क्लोन करना
git clone https://github.com/google-pay/wallet-web-codelab.git
प्रोजेक्ट डिपेंडेंसी इंस्टॉल करना
- अपने टर्मिनल या कमांड-लाइन प्रॉम्प्ट में क्लोन किया गया रिपॉज़िटरी खोलें
webडायरेक्ट्री पर जाएं. इस कोडलैब के बाकी हिस्से में, आपको इसी ऐप्लिकेशन में बदलाव करना होगाcd web- Node.js की डिपेंडेंसी इंस्टॉल करना
npm install . - ऐप्लिकेशन शुरू करना
node app.js - http://localhost:3000 पर चल रहा ऐप्लिकेशन खोलें
अगर आपने अपना ईमेल पता डाला और पासवर्ड बनाएं को चुना, तो कुछ नहीं होगा. अगले चरणों में, आपको ऐप्लिकेशन को कॉन्फ़िगर करके नई पास क्लास और ऑब्जेक्ट बनाना होगा.
4. जेनरिक पास क्लास बनाना
इस चरण में, आपको अपने पास के लिए बेस क्लास बनानी होगी. जब भी किसी उपयोगकर्ता के लिए नया पास बनाया जाता है, तो उसे पास क्लास में तय की गई प्रॉपर्टी इनहेरिट करनी होंगी.
इस कोडलैब के दौरान बनाई जाने वाली पास क्लास, सामान्य पास की सुविधाओं का इस्तेमाल करके एक ऐसा ऑब्जेक्ट बनाती है जो पहचान का बैज और चैलेंज पॉइंट ट्रैकर, दोनों के तौर पर काम करता है. इस क्लास से पास ऑब्जेक्ट बनाने पर, यह नीचे दिए गए ग्राफ़िक की तरह दिखेगा.
पास क्लास को सीधे Google Pay और Wallet Console में या Google Wallet API का इस्तेमाल करके बनाया जा सकता है. इस कोडलैब में, एपीआई का इस्तेमाल करके सामान्य पास क्लास बनाई जाएगी. यह उस प्रोसेस का पालन करता है जिसका इस्तेमाल, पास क्लास बनाने के लिए निजी बैकएंड सर्वर करता है.
web/app.jsफ़ाइल खोलेंissuerIdकी वैल्यू को Google Pay और Wallet Console से अपने जारीकर्ता आईडी से बदलें// TODO: Define Issuer ID
const issuerId = 'ISSUER_ID';createPassClassफ़ंक्शन ढूंढना- फ़ंक्शन में, पुष्टि किया गया एचटीटीपी क्लाइंट बनाएं और नई पास क्लास बनाने के लिए, Google Wallet API का इस्तेमाल करें
// TODO: Create a Generic pass class
let genericClass = {
'id': `${classId}`,
'classTemplateInfo': {
'cardTemplateOverride': {
'cardRowTemplateInfos': [
{
'twoItems': {
'startItem': {
'firstValue': {
'fields': [
{
'fieldPath': 'object.textModulesData["points"]'
}
]
}
},
'endItem': {
'firstValue': {
'fields': [
{
'fieldPath': 'object.textModulesData["contacts"]'
}
]
}
}
}
}
]
},
'detailsTemplateOverride': {
'detailsItemInfos': [
{
'item': {
'firstValue': {
'fields': [
{
'fieldPath': 'class.imageModulesData["event_banner"]'
}
]
}
}
},
{
'item': {
'firstValue': {
'fields': [
{
'fieldPath': 'class.textModulesData["game_overview"]'
}
]
}
}
},
{
'item': {
'firstValue': {
'fields': [
{
'fieldPath': 'class.linksModuleData.uris["official_site"]'
}
]
}
}
}
]
}
},
'imageModulesData': [
{
'mainImage': {
'sourceUri': {
'uri': 'https://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/google-io-2021-card.png'
},
'contentDescription': {
'defaultValue': {
'language': 'en-US',
'value': 'Google I/O 2022 Banner'
}
}
},
'id': 'event_banner'
}
],
'textModulesData': [
{
'header': 'Gather points meeting new people at Google I/O',
'body': 'Join the game and accumulate points in this badge by meeting other attendees in the event.',
'id': 'game_overview'
}
],
'linksModuleData': {
'uris': [
{
'uri': 'https://io.google/2022/',
'description': 'Official I/O \'22 Site',
'id': 'official_site'
}
]
}
};
let response;
try {
// Check if the class exists already
response = await httpClient.request({
url: `${baseUrl}/genericClass/${classId}`,
method: 'GET'
});
console.log('Class already exists');
console.log(response);
} catch (err) {
if (err.response && err.response.status === 404) {
// Class does not exist
// Create it now
response = await httpClient.request({
url: `${baseUrl}/genericClass`,
method: 'POST',
data: genericClass
});
console.log('Class insert response');
console.log(response);
} else {
// Something else went wrong
console.log(err);
res.send('Something went wrong...check the console logs!');
}
}
आपका कोड चलने पर, यह एक नई पास क्लास बनाएगा और क्लास आईडी दिखाएगा. क्लास आईडी, आईडी जारी करने वाले का आईडी और डेवलपर का तय किया गया सफ़िक्स होता है. इस मामले में, सफ़िक्स को codelab_class पर सेट किया गया है (क्लास आईडी, 1234123412341234123.codelab_class जैसा दिखेगा). आउटपुट लॉग में, Google Wallet API का जवाब भी शामिल होगा.
5. सामान्य पास ऑब्जेक्ट बनाना
इस चरण में, आपको अपने Node.js ऐप्लिकेशन को कॉन्फ़िगर करना होगा, ताकि आपने जो क्लास पहले बनाई थी उसका इस्तेमाल करके, कोई सामान्य पास ऑब्जेक्ट बनाया जा सके. उपयोगकर्ताओं के लिए पास ऑब्जेक्ट बनाने के दो तरीके हैं.
बैकएंड सर्वर पर पास ऑब्जेक्ट बनाना
इस तरीके में, पास ऑब्जेक्ट को बैकएंड सर्वर पर बनाया जाता है और हस्ताक्षर किए गए जेडब्लयूटी के तौर पर क्लाइंट ऐप्लिकेशन को वापस भेजा जाता है. यह उन मामलों के लिए सबसे सही है जहां उपयोगकर्ताओं की संख्या ज़्यादा है. इससे यह पक्का किया जा सकता है कि उपयोगकर्ता अपने वॉलेट में जोड़ने से पहले, ऑब्जेक्ट मौजूद है या नहीं.
जब उपयोगकर्ता अपने वॉलेट में पास जोड़ता है, तब पास ऑब्जेक्ट बनाना
इस तरीके में, पास ऑब्जेक्ट को बैकएंड सर्वर पर, हस्ताक्षर किए गए JWT में परिभाषित और कोड में बदला जाता है. इसके बाद, क्लाइंट ऐप्लिकेशन में Google Wallet में जोड़ें बटन रेंडर किया जाता है, जो जेडब्लयूटी का रेफ़रंस देता है. जब उपयोगकर्ता बटन चुनता है, तो पास ऑब्जेक्ट बनाने के लिए JWT का इस्तेमाल किया जाता है. यह उन मामलों के लिए सबसे सही है जहां उपयोगकर्ताओं के अपनाने की दर में बदलाव होता रहता है या यह पता नहीं होता कि उपयोगकर्ताओं ने इसे अपनाया है या नहीं. ऐसा इसलिए, क्योंकि इससे पास ऑब्जेक्ट न तो बनते हैं और न ही उनका इस्तेमाल किया जाता है. इस तरीके का इस्तेमाल कोडलैब में किया जाएगा.
web/app.jsफ़ाइल खोलेंcreatePassObjectफ़ंक्शन ढूंढना- फ़ंक्शन में, अपने उपयोगकर्ता के लिए एक नया पास ऑब्जेक्ट तय करें
// TODO: Create a new Generic pass for the user
let objectSuffix = `${req.body.email.replace(/[^\w.-]/g, '_')}`;
let objectId = `${issuerId}.${objectSuffix}`;
let genericObject = {
'id': `${objectId}`,
'classId': classId,
'genericType': 'GENERIC_TYPE_UNSPECIFIED',
'hexBackgroundColor': '#4285f4',
'logo': {
'sourceUri': {
'uri': 'https://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/pass_google_logo.jpg'
}
},
'cardTitle': {
'defaultValue': {
'language': 'en',
'value': 'Google I/O \'22'
}
},
'subheader': {
'defaultValue': {
'language': 'en',
'value': 'Attendee'
}
},
'header': {
'defaultValue': {
'language': 'en',
'value': 'Alex McJacobs'
}
},
'barcode': {
'type': 'QR_CODE',
'value': `${objectId}`
},
'heroImage': {
'sourceUri': {
'uri': 'https://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/google-io-hero-demo-only.jpg'
}
},
'textModulesData': [
{
'header': 'POINTS',
'body': '1234',
'id': 'points'
},
{
'header': 'CONTACTS',
'body': '20',
'id': 'contacts'
}
]
};
// TODO: Create the signed JWT and link
res.send("Form submitted!");
ऐप्लिकेशन को फिर से लोड करने, अपना ईमेल पता डालने, और फ़ॉर्म सबमिट करने पर, आपको कोई आउटपुट नहीं दिखेगा. पास ऑब्जेक्ट को बैकएंड ऐप्लिकेशन से तय किया जा रहा है, लेकिन कोई आउटपुट नहीं दिया जा रहा है. इसके बाद, आपको पास को Google Wallet में जोड़ें लिंक में बदलना होगा.
6. Google Wallet में जोड़ें बटन बनाना
आखिरी चरण में, आपको हस्ताक्षर वाला JWT बनाना होगा और एक ऐसा लिंक देना होगा जिसका इस्तेमाल Google Wallet में जोड़ें बटन में किया जा सके. जब उपयोगकर्ता बटन को चुनता है, तो उसे अपने वॉलेट में पास को सेव करने के लिए कहा जाएगा.
- JWT क्लेम बनाएं और उन्हें सेवा खाते की निजी कुंजी का इस्तेमाल करके कोड में बदलें. साथ ही, एम्बेड किए गए लिंक के साथ Google Wallet में जोड़ें बटन दिखाएं
// TODO: Create the signed JWT and link
const claims = {
iss: credentials.client_email,
aud: 'google',
origins: [],
typ: 'savetowallet',
payload: {
genericObjects: [
genericObject
]
}
};
const token = jwt.sign(claims, credentials.private_key, { algorithm: 'RS256' });
const saveUrl = `https://pay.google.com/gp/v/save/${token}`;
res.send(`<a href='${saveUrl}'><img src='wallet-button.png'></a>`); - अपने ब्राउज़र में चल रहे ऐप्लिकेशन को फिर से लोड करें
- फ़ॉर्म में अपना ईमेल पता डालें और पासवर्ड बनाएं को चुनें
- यह विकल्प दिखने पर, Google Wallet में जोड़ें बटन को चुनें
7. बधाई हो
बधाई हो, आपने वेब पर Google Wallet API को इंटिग्रेट कर लिया है!
ज़्यादा जानें
google-pay/wallet-web-codelab GitHub डेटा स्टोर करने की जगह में, पूरे इंटिग्रेशन को देखें.
पास बनाना और प्रोडक्शन ट्रैक का ऐक्सेस पाने का अनुरोध करना
जब आप प्रोडक्शन में अपने पास जारी करने के लिए तैयार हों, तो प्रोडक्शन ट्रैक के ऐक्सेस का अनुरोध करने के लिए, Google Pay और Wallet Console पर जाएं.
ज़्यादा जानने के लिए, वेब एपीआई से जुड़ी ज़रूरी शर्तें देखें.