Thông tin về lớp học lập trình này
1. Giới thiệu
Tổng quan
API Google Wallet cho phép bạn tương tác với người dùng thông qua nhiều loại thẻ và vé: thẻ khách hàng thân thiết, ưu đãi, thẻ quà tặng, vé xem sự kiện, vé đi phương tiện công cộng, thẻ lên máy bay, v.v. Mỗi loại thẻ và lớp thẻ đi kèm với các trường và tính năng dành riêng cho trường hợp sử dụng để nâng cao trải nghiệm người dùng.
Tuy nhiên, những cách này có thể không phù hợp với mọi trường hợp sử dụng. Để tạo trải nghiệm phù hợp hơn, bạn có thể sử dụng loại thẻ và vé chung. Dưới đây là một số trường hợp sử dụng mẫu cho loại thẻ và vé chung:
- Thẻ đỗ xe
- Thẻ thành viên thư viện
- Phiếu thưởng có giá trị được lưu trữ
- Thẻ thành viên phòng tập thể dục
- Đặt chỗ
Bạn có thể sử dụng thẻ và vé chung cho mọi trường hợp sử dụng có thể được trình bày bằng:
- Tối đa 3 hàng thông tin
- (Không bắt buộc) Hình ảnh mã vạch
- (Không bắt buộc) Mục Chi tiết
Để biết thêm thông tin về API Google Wallet hoặc cách thêm nút Thêm vào Google Wallet vào một trang web, vui lòng xem tài liệu dành cho nhà phát triển Google Wallet.
Truyền lớp và đối tượng
API Ví Google hiển thị các phương thức để tạo:
Loại | Mô tả |
Lớp thẻ và vé | Mẫu cho một đối tượng thẻ và vé riêng lẻ. Tệp này chứa thông tin chung cho tất cả đối tượng thẻ và vé thuộc lớp này. |
Truyền đối tượng | Một thực thể của lớp thẻ và vé dành riêng cho một mã nhận dạng người dùng. |
Thông tin về lớp học lập trình này
Trong lớp học lập trình này, bạn sẽ hoàn thành các nhiệm vụ sau.
- Tạo tài khoản phát hành mới ở chế độ minh hoạ
- Tạo tài khoản dịch vụ để phát hành thẻ và vé
- Tạo lớp thẻ và vé chung mới
- Tạo đối tượng thẻ và vé mới
- Tạo nút Thêm vào Google Wallet để lưu thẻ/vé
- Hiển thị nút trong trang web
- Xử lý kết quả lưu thẻ và vé
Điều kiện tiên quyết
- Git
- Tài khoản Google có quyền truy cập vào Bảng điều khiển Google Cloud
- Node.js phiên bản 10 trở lên
Mục tiêu
Sau khi hoàn thành lớp học lập trình này, bạn sẽ có thể làm những việc sau:
- Tạo đối tượng thẻ và vé bằng Google Wallet
- Tạo nút Thêm vào Google Wallet
Hỗ trợ
Nếu bạn gặp khó khăn ở bất kỳ thời điểm nào trong lớp học lập trình, kho lưu trữ GitHub google-pay/wallet-web-codelab có chứa một giải pháp hoàn chỉnh để tham khảo.
2. Thiết lập
Ở bước này, bạn sẽ tạo một Tài khoản phát hành ở chế độ minh hoạ. Điều này cho phép bạn tạo các lớp và đối tượng thẻ và vé có thể được thêm vào ví của người dùng. Tiếp theo, bạn sẽ tạo một dự án và tài khoản dịch vụ trên Google Cloud. Các lớp này sẽ được dùng để tạo các lớp và đối tượng thẻ và vé theo phương thức lập trình giống như máy chủ phụ trợ. Cuối cùng, bạn sẽ uỷ quyền cho tài khoản dịch vụ Google Cloud quản lý thẻ và vé trong tài khoản tổ chức phát hành của bạn trên Google Wallet.
Đăng ký tài khoản Người phát hành Google Wallet
Bạn cần có Tài khoản phát hành để tạo và phân phối thẻ và vé cho Google Wallet. Bạn có thể đăng ký bằng Bảng điều khiển Google Pay và Wallet. Ban đầu, bạn sẽ có quyền tạo thẻ và vé ở chế độ minh hoạ. Điều này có nghĩa là chỉ những người dùng thử nghiệm cụ thể mới có thể thêm thẻ và vé mà bạn tạo. Bạn có thể quản lý người dùng thử nghiệm trong Google Pay & Wallet Console.
Để biết thêm thông tin về chế độ minh hoạ, hãy xem phần Các điều kiện tiên quyết chung về thẻ và vé.
- Mở Bảng điều khiển của Google Pay và Wallet
- Làm theo hướng dẫn trên màn hình để tạo tài khoản Đơn vị phát hành
- Chọn Google Wallet API
- Xác nhận rằng bạn hiểu điều khoản dịch vụ và chính sách quyền riêng tư
- Sao chép giá trị Mã nhận dạng của tổ chức phát hành vào trình chỉnh sửa văn bản hoặc vị trí khác
- Trong thẻ Quản lý, hãy chọn Thiết lập tài khoản thử nghiệm
- Thêm mọi địa chỉ email bạn sẽ sử dụng trong lớp học lập trình này
Bật API Ví Google
- Đăng nhập vào Bảng điều khiển Google Cloud
- Nếu bạn chưa có dự án trên Google Cloud, hãy tạo ngay một dự án (xem phần Tạo và quản lý dự án để biết thêm thông tin)
- Bật API Ví Google (còn gọi là API Google Pay cho Thẻ và vé) cho dự án của bạn
Tạo tài khoản dịch vụ và khoá
Bạn cần có tài khoản dịch vụ và khoá tài khoản dịch vụ để gọi API Google Wallet. Tài khoản dịch vụ là thông tin nhận dạng gọi API Google Wallet. Khoá tài khoản dịch vụ chứa một khoá riêng tư xác định ứng dụng của bạn là tài khoản dịch vụ. Khoá này rất nhạy cảm, vì vậy, hãy giữ bí mật.
Tạo một tài khoản dịch vụ
- Trong Google Cloud Console, hãy mở Tài khoản dịch vụ
- Nhập tên, mã nhận dạng và nội dung mô tả cho tài khoản dịch vụ
- Chọn TẠO VÀ TIẾP TỤC
- Chọn XONG
Tạo khoá tài khoản dịch vụ
- Chọn tài khoản dịch vụ
- Chọn trình đơn KEYS (PHÍM)
- Chọn THÊM KHÓA, rồi chọn Tạo khoá mới
- Chọn loại khoá JSON
- Chọn TẠO
Bạn sẽ được nhắc lưu tệp khoá vào máy trạm cục bộ. Hãy nhớ vị trí của tệp.
Đặt biến môi trường GOOGLE_APPLICATION_CREDENTIALS
Biến môi trường GOOGLE_APPLICATION_CREDENTIALS được các SDK của Google sử dụng để xác thực dưới dạng tài khoản dịch vụ và truy cập vào nhiều API cho một dự án Google Cloud.
- Làm theo hướng dẫn trong tài liệu về khoá tài khoản Dịch vụ Google Cloud để đặt biến môi trường
GOOGLE_APPLICATION_CREDENTIALS - Xác minh rằng biến môi trường được đặt trong một phiên dòng lệnh (Windows) hoặc phiên giao diện dòng lệnh mới (MacOS/Linux) (bạn có thể cần phải bắt đầu một phiên mới nếu đã mở một phiên)
echo $GOOGLE_APPLICATION_CREDENTIALS
Uỷ quyền cho tài khoản dịch vụ
Cuối cùng, bạn cần uỷ quyền cho tài khoản dịch vụ quản lý thẻ và vé trong Google Wallet.
- Mở Bảng điều khiển của Google Pay và Wallet
- Chọn Người dùng
- Chọn Mời người dùng
- Nhập địa chỉ email của tài khoản dịch vụ (ví dụ:
test-svc@myproject.iam.gserviceaccount.com) - Chọn Nhà phát triển hoặc Quản trị viên trong trình đơn thả xuống Cấp truy cập
- Chọn Mời
3. Khởi động ứng dụng Node.js mẫu
Thời lượng 10:00
Ở bước này, bạn sẽ chạy một ứng dụng Node.js mẫu đóng vai trò là trang web mua sắm và máy chủ phụ trợ.
Nhân bản kho lưu trữ mẫu
Kho lưu trữ google-pay/wallet-web-codelab chứa một dự án mẫu dựa trên Node.js và nhiều tệp tập lệnh mô phỏng một máy chủ phụ trợ dùng để cấp phép các lớp và đối tượng thẻ và vé. Bạn sẽ chỉnh sửa các trang này để thêm nút Thêm vào Google Wallet trên màn hình chi tiết sản phẩm.
- Sao chép kho lưu trữ vào máy trạm cục bộ
git clone https://github.com/google-pay/wallet-web-codelab.git
Cài đặt phần phụ thuộc của dự án
- Mở kho lưu trữ được sao chép trong dòng lệnh hoặc lời nhắc dòng lệnh
- Chuyển đến thư mục
web(đây là ứng dụng mà bạn sẽ sửa đổi trong phần còn lại của lớp học lập trình này)cd web - Cài đặt các phần phụ thuộc Node.js
npm install . - Khởi động ứng dụng
node app.js - Mở ứng dụng đang chạy trên http://localhost:3000
Nếu bạn nhập địa chỉ email và chọn Tạo thẻ và vé, thì sẽ không có gì xảy ra. Trong các bước tiếp theo, bạn sẽ định cấu hình ứng dụng để tạo một lớp và đối tượng thẻ và vé mới.
4. Tạo lớp thẻ và vé chung
Ở bước này, bạn sẽ tạo lớp cơ sở cho thẻ và vé. Mỗi khi một thẻ và vé mới được tạo cho người dùng, thẻ và vé đó sẽ kế thừa các thuộc tính được xác định trong lớp thẻ và vé.
Lớp thẻ và vé mà bạn sẽ tạo trong lớp học lập trình này sử dụng tính linh hoạt của thẻ và vé chung để tạo một đối tượng vừa là huy hiệu nhận dạng vừa là trình theo dõi điểm thử thách. Khi một đối tượng thẻ và vé được tạo từ lớp này, đối tượng đó sẽ có dạng như hình ảnh sau.
Bạn có thể tạo lớp thẻ và vé trực tiếp trong Google Pay & Wallet Console hoặc bằng cách sử dụng API Google Wallet. Trong lớp học lập trình này, bạn sẽ tạo lớp thẻ và vé chung bằng API. Quá trình này tuân theo quy trình mà máy chủ phụ trợ riêng tư sẽ sử dụng để tạo các lớp thẻ và vé.
- Mở tệp
web/app.js - Thay thế giá trị của
issuerIdbằng mã phát hành của bạn trong Bảng điều khiển Google Pay và Wallet// TODO: Define Issuer ID
const issuerId = 'ISSUER_ID'; - Tìm hàm
createPassClass - Trong hàm, hãy tạo một ứng dụng HTTP đã xác thực và sử dụng API Google Wallet để tạo một lớp thẻ và vé mới
// 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!');
}
}
Khi chạy, mã sẽ tạo một lớp thẻ và xuất mã nhận dạng lớp. Mã lớp được tạo thành từ mã nhận dạng của tổ chức phát hành, theo sau là hậu tố do nhà phát triển xác định. Trong trường hợp này, hậu tố được đặt thành codelab_class (mã lớp sẽ có dạng tương tự như 1234123412341234123.codelab_class). Nhật ký đầu ra cũng sẽ bao gồm phản hồi từ API Google Wallet.
5. Tạo đối tượng thẻ và vé chung
Ở bước này, bạn sẽ định cấu hình ứng dụng Node.js để tạo đối tượng thẻ và vé chung bằng lớp mà bạn đã tạo trước đó. Có hai luồng để tạo đối tượng thẻ và vé cho người dùng.
Tạo đối tượng thẻ và vé trên máy chủ phụ trợ
Trong phương pháp này, đối tượng thẻ và vé được tạo trên máy chủ phụ trợ và được trả về ứng dụng khách dưới dạng JWT đã ký. Phương thức này phù hợp nhất với những trường hợp người dùng sử dụng nhiều, vì phương thức này đảm bảo đối tượng tồn tại trước khi người dùng cố gắng thêm đối tượng đó vào ví của họ.
Tạo đối tượng thẻ và vé khi người dùng thêm thẻ và vé đó vào ví
Trong phương pháp này, đối tượng thẻ và vé được xác định và mã hoá thành JWT đã ký trên máy chủ phụ trợ. Sau đó, nút Thêm vào Google Wallet sẽ hiển thị trong ứng dụng khách tham chiếu đến JWT. Khi người dùng chọn nút này, JWT sẽ được dùng để tạo đối tượng thẻ và vé. Cách này phù hợp nhất với những trường hợp người dùng sử dụng không ổn định hoặc không xác định, vì cách này ngăn việc tạo và không sử dụng các đối tượng truyền. Phương pháp này sẽ được sử dụng trong lớp học lập trình.
- Mở tệp
web/app.js - Tìm hàm
createPassObject - Trong hàm, hãy xác định một đối tượng thẻ/vé mới cho người dùng
// 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!");
Nếu tải lại ứng dụng, nhập địa chỉ email và gửi biểu mẫu, bạn sẽ không thấy kết quả nào. Ứng dụng phụ trợ đang xác định đối tượng thẻ và không có kết quả nào được trả về. Tiếp theo, bạn sẽ chuyển thẻ và vé thành đường liên kết Thêm vào Google Wallet.
6. Tạo nút Thêm vào Google Wallet
Ở bước cuối cùng, bạn sẽ tạo một JWT đã ký và trả về một đường liên kết có thể được sử dụng trong nút Thêm vào Google Wallet. Khi người dùng chọn nút này, họ sẽ được nhắc lưu thẻ và vé vào ví.
- Tạo thông báo xác nhận JWT, mã hoá thông báo xác nhận đó bằng khoá riêng tư của tài khoản dịch vụ và trả về nút Thêm vào Google Wallet có đường liên kết được nhúng
// 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>`); - Tải lại ứng dụng đang chạy trong trình duyệt
- Nhập địa chỉ email của bạn vào biểu mẫu rồi chọn Tạo thẻ và vé
- Khi nút này xuất hiện, hãy chọn nút Thêm vào Google Wallet
7. Xin chúc mừng
Xin chúc mừng! Bạn đã tích hợp thành công API Ví Google trên web!
Tìm hiểu thêm
Hãy xem cách tích hợp đầy đủ trong kho lưu trữ GitHub google-pay/wallet-web-codelab.
Tạo thẻ và vé và yêu cầu quyền truy cập chính thức
Khi bạn đã sẵn sàng phát hành thẻ và vé của riêng mình trong phiên bản chính thức, hãy chuyển đến Google Pay & Wallet Console để yêu cầu quyền truy cập vào kênh phát hành công khai.
Hãy xem phần Các điều kiện tiên quyết của API web để tìm hiểu thêm.