เกี่ยวกับ Codelab นี้
1 บทนำ
ภาพรวม
Google Wallet API ช่วยให้คุณเข้าถึงผู้ใช้ผ่านบัตรประเภทต่างๆ เช่น บัตรสะสมคะแนน ข้อเสนอ บัตรของขวัญ ตั๋วเข้างาน ตั๋วโดยสาร บอร์ดดิ้งพาส และอื่นๆ บัตรแต่ละประเภทหรือคลาสบัตรจะมีช่องและฟีเจอร์เฉพาะสำหรับ Use Case เพื่อปรับปรุงประสบการณ์ของผู้ใช้
อย่างไรก็ตาม กรณีการใช้งานเหล่านี้อาจไม่เหมาะกับบางกรณี หากต้องการสร้างประสบการณ์การใช้งานที่ปรับแต่งมากขึ้น คุณสามารถใช้ประเภทบัตรทั่วไปได้ ตัวอย่างกรณีการใช้งานประเภทบัตรทั่วไปมีดังนี้
- บัตรจอดรถ
- บัตรสมาชิกห้องสมุด
- บัตรมูลค่าที่เก็บไว้
- บัตรสมาชิกฟิตเนส
- การจอง
คุณสามารถใช้บัตรทั่วไปสำหรับ Use Case ใดก็ได้ที่แสดงด้วยสิ่งต่อไปนี้
- ข้อมูลได้สูงสุด 3 แถว
- (ไม่บังคับ) กราฟิกบาร์โค้ด
- (ไม่บังคับ) ส่วนรายละเอียด
ดูข้อมูลเพิ่มเติมเกี่ยวกับ Google Wallet API หรือการเพิ่มปุ่มเพิ่มลงใน Google Wallet ลงในหน้าเว็บได้ที่เอกสารสำหรับนักพัฒนาซอฟต์แวร์ Google Wallet
ส่งคลาสและออบเจ็กต์
Google Wallet API จะแสดงวิธีการสร้างรายการต่อไปนี้
ประเภท | คำอธิบาย |
คลาสพาส | เทมเพลตสำหรับออบเจ็กต์บัตรแต่ละใบ ซึ่งมีข้อมูลที่เหมือนกันสำหรับออบเจ็กต์พาสทั้งหมดที่อยู่ในคลาสนี้ |
ส่งออบเจ็กต์ | อินสแตนซ์ของคลาสบัตรที่ไม่ซ้ำกันสำหรับรหัสผู้ใช้ |
เกี่ยวกับ Codelab นี้
ในโค้ดแล็บนี้ คุณจะทำภารกิจต่อไปนี้
- สร้างบัญชีผู้ออกบัตรใหม่ในโหมดสาธิต
- สร้างบัญชีบริการสำหรับการออกบัตร
- สร้างคลาสบัตรทั่วไปใหม่
- สร้างออบเจ็กต์บัตรใหม่
- สร้างปุ่มเพิ่มลงใน Google Wallet เพื่อบันทึกบัตร
- แสดงปุ่มในหน้าเว็บ
- จัดการผลลัพธ์การบันทึกบัตร
ข้อกำหนดเบื้องต้น
- Git
- บัญชี Google ที่มีสิทธิ์เข้าถึงคอนโซล Google Cloud
- Node.js เวอร์ชัน 10 ขึ้นไป
วัตถุประสงค์
หลังจากทำ Codelab นี้จนเสร็จสมบูรณ์ คุณจะทําสิ่งต่อไปนี้ได้
- สร้างออบเจ็กต์บัตรโดยใช้ Google Wallet
- สร้างปุ่มเพิ่มลงใน Google Wallet
การสนับสนุน
หากพบปัญหาระหว่างทำ Codelab ที่เก็บ GitHub ของ google-pay/wallet-web-codelab มีโซลูชันที่สมบูรณ์สำหรับการอ้างอิง
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
- หากยังไม่มีโปรเจ็กต์ Google Cloud ให้สร้างเลย (ดูข้อมูลเพิ่มเติมที่หัวข้อการสร้างและจัดการโปรเจ็กต์)
- เปิดใช้ Google Wallet API (หรือที่เรียกว่า Google Pay for Passes API) สําหรับโปรเจ็กต์
สร้างบัญชีบริการและคีย์
คุณต้องมีบัญชีบริการและคีย์บัญชีบริการจึงจะเรียกใช้ Google Wallet API ได้ บัญชีบริการคือข้อมูลประจำตัวที่เรียกใช้ Google Wallet API คีย์บัญชีบริการมีคีย์ส่วนตัวที่ระบุแอปพลิเคชันของคุณเป็นบัญชีบริการ คีย์นี้มีความอ่อนไหว ดังนั้นโปรดเก็บไว้เป็นความลับ
สร้างบัญชีบริการ
- เปิดบัญชีบริการในคอนโซล Google Cloud
- ป้อนชื่อ รหัส และคำอธิบายสำหรับบัญชีบริการ
- เลือกสร้างและดำเนินการต่อ
- เลือกเสร็จสิ้น
สร้างคีย์บัญชีบริการ
- เลือกบัญชีบริการ
- เลือกเมนูKEYS
- เลือกเพิ่มคีย์ แล้วเลือกสร้างคีย์ใหม่
- เลือกประเภทคีย์ JSON
- เลือกสร้าง
ระบบจะแจ้งให้คุณบันทึกไฟล์คีย์ลงในเวิร์กสเตชันในเครื่อง อย่าลืมจำตำแหน่งของอุปกรณ์
ตั้งค่าตัวแปรสภาพแวดล้อม GOOGLE_APPLICATION_CREDENTIALS
SDK ของ Google ใช้ตัวแปรสภาพแวดล้อม GOOGLE_APPLICATION_CREDENTIALS เพื่อตรวจสอบสิทธิ์ในฐานะบัญชีบริการและเข้าถึง API ต่างๆ สําหรับโปรเจ็กต์ Google Cloud
- ทำตามวิธีการในเอกสารประกอบเกี่ยวกับคีย์บัญชีบริการ Google Cloud เพื่อตั้งค่าตัวแปรสภาพแวดล้อม
GOOGLE_APPLICATION_CREDENTIALS - ยืนยันว่ามีการตั้งค่าตัวแปรสภาพแวดล้อมในเซสชันเทอร์มินัล (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 สร้างคลาสบัตรทั่วไป
ในขั้นตอนนี้ คุณจะได้สร้างคลาสพื้นฐานสำหรับบัตร ทุกครั้งที่สร้างบัตรใหม่ให้กับผู้ใช้ บัตรนั้นจะรับค่าพร็อพเพอร์ตี้ที่กําหนดไว้ในคลาสบัตร
คลาสบัตรที่คุณสร้างในระหว่าง Codelab นี้ใช้ความยืดหยุ่นของบัตรทั่วไปเพื่อสร้างออบเจ็กต์ที่ทํางานได้ทั้งเป็นป้ายระบุตัวตนและเครื่องมือติดตามคะแนนภารกิจ เมื่อสร้างออบเจ็กต์บัตรจากคลาสนี้ ออบเจ็กต์จะมีลักษณะดังกราฟิกต่อไปนี้
คุณสร้างคลาสบัตรได้โดยตรงใน Google Pay และ Wallet Console หรือใช้ Google Wallet API ในโค้ดแล็บนี้ คุณจะได้สร้างคลาสพาสทั่วไปโดยใช้ API ซึ่งเป็นไปตามกระบวนการที่เซิร์ฟเวอร์แบ็กเอนด์ส่วนตัวจะใช้เพื่อสร้างคลาสบัตร
- เปิดไฟล์
web/app.js - แทนที่ค่า
issuerIdด้วยรหัสผู้ออกบัตรจาก Google Pay & Wallet Console// TODO: Define Issuer ID
const issuerId = 'ISSUER_ID'; - ค้นหาฟังก์ชัน
createPassClass - ในฟังก์ชัน ให้สร้างไคลเอ็นต์ HTTP ที่ตรวจสอบสิทธิ์ และใช้ 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 เพื่อสร้างออบเจ็กต์พาสทั่วไปโดยใช้คลาสที่คุณสร้างไว้ก่อนหน้านี้ การสร้างออบเจ็กต์บัตรสำหรับผู้ใช้มี 2 ขั้นตอน
สร้างออบเจ็กต์บัตรในเซิร์ฟเวอร์แบ็กเอนด์
แนวทางนี้จะสร้างออบเจ็กต์บัตรในเซิร์ฟเวอร์แบ็กเอนด์และส่งกลับไปยังแอปไคลเอ็นต์เป็น JWT ที่ลงชื่อ การดำเนินการนี้เหมาะสําหรับกรณีที่ผู้ใช้ใช้งานสูง เนื่องจากช่วยให้มั่นใจได้ว่ารายการมีอยู่ก่อนที่ผู้ใช้จะพยายามเพิ่มลงในกระเป๋าสตางค์
สร้างออบเจ็กต์บัตรเมื่อผู้ใช้เพิ่มบัตรลงใน Wallet
แนวทางนี้จะกำหนดออบเจ็กต์บัตรและเข้ารหัสเป็น JWT ที่ลงชื่อในเซิร์ฟเวอร์แบ็กเอนด์ จากนั้นระบบจะแสดงผลปุ่มเพิ่มลงใน Google Wallet ในแอปไคลเอ็นต์ที่อ้างอิง JWT เมื่อผู้ใช้เลือกปุ่ม ระบบจะใช้ 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 เมื่อเลือกปุ่มแล้ว ระบบจะแจ้งให้ผู้ใช้บันทึกบัตรลงใน 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 ในเว็บเรียบร้อยแล้ว
ดูข้อมูลเพิ่มเติม
ดูการผสานรวมที่สมบูรณ์ในที่เก็บ GitHub ของ google-pay/wallet-web-codelab
สร้างบัตรและขอสิทธิ์เข้าถึงเวอร์ชันที่ใช้งานจริง
เมื่อพร้อมที่จะออกบัตรของคุณเองในเวอร์ชันที่ใช้งานจริง ให้ไปที่ Google Pay และ Wallet Console เพื่อขอสิทธิ์เข้าถึงเวอร์ชันที่ใช้งานจริง
ดูข้อมูลเพิ่มเติมได้ที่ข้อกําหนดเบื้องต้นของ Web API