Bước 4 - Gửi tin nhắn xác nhận đơn hàng
Một trong những điểm mạnh khi sử dụng hệ sinh thái Zalo Mini App là bạn có thể tiếp cận tập người dùng cực lớn của Zalo cũng như tương tác với họ. Và người dùng không cần phải đăng ký tài khoản hay đăng nhập khi truy cập Zalo Mini App.
1. Luồng dữ liệu của ứng dụng
2. Lấy access token
Ta có thể dùng zmp-sdk để lấy access token của user đang sử dụng. Vì tất cả các API bên trong zmp-sdk cần phải được gọi sau khi đã login success, nên code mẫu sẽ như sau:
import api from 'zmp-sdk';
api.login({
success: () => {
api.getAccessToken({
success: (token) => {
resolve(token); // Dùng token này cho bước tiếp theo
},
fail: (error) => {
console.error('Failed getting access token.'); // Ứng dụng không có quyền truy cập access token của user
}
});
},
fail: (error) => {
console.error('Failed logging in'); // Ứng dụng chưa được xác thực với bên Zalo Mini App Platform
}
});
3. Lấy user info từ access token
Sau khi lấy được access token, ta gửi xuống cho server qua XMLHttpRequest hoặc Fetch API. Server sau khi nhận được access token có thể gọi qua Social API của Zalo để lấy user info một cách bảo mật và chính xác. Tìm hiểu thêm về Social API: API Explorer.
Code mẫu đối với server dùng Node.JS:
const request = require('request');
const API_DOMAIN = 'https://graph.zalo.me';
service.getZaloProfile = (accessToken) => {
return new Promise((resolve, reject) => {
request(
{
url: `${API_DOMAIN}/v2.0/me`,
method: 'GET',
qs: {
access_token: accessToken,
fields: 'id,name,birthday,email,picture'
},
json: true
},
(error, response, body) => {
if (error) return reject(error);
return resolve(body);
}
);
});
};
Kết quả trả về sẽ có dạng như sau:
{
"birthday": "10/02/1998",
"gender": "male",
"name": "Hồng Phát",
"id": "8513183572860285370",
"error": 0,
"message": "Success",
"picture": {
"data": {
"url": "https://s120-ava-talk.zadn.vn/3/1/4/d/42/120/5c64ff7439748ce1c6b3210d056dbe96.jpg"
}
}
}
Bạn nên lưu lại thông tin của người dùng vào cơ sở dữ liệu với cơ chế upsert qua cột ID (nếu chưa tồn tại thì insert, nếu đã tồn tại thì update), để đảm bảo không có hai người dùng có cùng ID, dẫn đến thiếu sót đơn hàng,...
4. Đăng ký webhook để cập nhật trạng thái follow/unfollow
Sau hai bước trên, ta đã lấy được user info và có thể lưu được các đơn hàng gắn liền với các user này. Tuy nhiên ID user hiện tại sẽ không thể dùng để gửi tin nhắn về cho user được, mà ta cần Follower ID cho việc này.
Folower ID sẽ được tạo ra khi một user theo dõi OA. Khi đó Zalo OA sẽ thông báo về cho nhà phát triển thông qua một webhook đã được đăng ký trước đó.
1. Thiết lập webhook
Webhook bản chất là một đường dẫn trên server của chúng ta, nhưng client sẽ không gọi tới những đường dẫn này, mà Zalo OA Server mới là người gọi. Ta sẽ thiết lập webhook ở path /webhook. Code mẫu trên Node.JS như sau:
var express = require('express');
const db = require('../models');
var router = express.Router();
/* Get orders history of logged in user */
router.post('/webhook', async (req, res, next) => {
try {
const payload = req.body;
console.log('[Webhook] Received payload', payload);
switch (payload.event_name) {
case 'follow':
await processFollowEvent(payload);
break;
case 'unfollow':
await processUnfollowEvent(payload);
break;
default:
console.log('[Webhook] Event not supported!', payload.event_name);
break;
}
res.sendStatus(200); // Webhook cần trả về status 200 sau một khoảng thời gian xử lý cho phép.
console.log('[Webhook] Processed payload successfully!');
} catch (error) {
res.send({ error: -1, message: 'Unknown exception' });
console.error('[Webhook] Exception', error);
}
});
async function processFollowEvent(payload) {
const { user_id_by_app, follower } = payload;
const followerId = follower.id;
await db.Users.updateOne(
{
zaloId: user_id_by_app
},
{
followerId,
isFollowing: true
},
{
upsert: true
}
);
}
async function processUnfollowEvent(payload) {
const { user_id_by_app, follower } = payload;
const followerId = follower.id;
await db.Users.updateOne(
{
zaloId: user_id_by_app
},
{
followerId,
isFollowing: false
},
{
upsert: true
}
);
}
module.exports = router;
Kết quả:
[Webhook] Received payload {
app_id: '4237564205155140477',
oa_id: '579745863508352884',
user_id_by_app: '8513183572860285370',
event_name: 'follow',
timestamp: '1629791888125',
source: 'testing_webhook',
follower: { id: '3454650298084288660' }
}
[Webhook] Processed payload successfully!
POST /webhook 200 9.523 ms - 2
2. Đăng ký webhook
Sau khi đã deploy webhook, ta tiến hành đăng ký webhook. Các bạn truy cập vào trang quản lý ứng dụng của Zalo, truy cập vào mục Webhook, điền Webhook URL và bật 2 sự kiện Quan tâm / Bỏ quan tâm như hướng dẫn. Ngoài ra có thể bấm nút Test để Zalo Server gửi event mô phỏng để kiểm tra webhook đã hoạt động hay chưa.
5. Gửi tin nhắn về cho user
Sau khi đã có được Follower ID, việc còn lại khá dễ dàng. Ta chỉ việc gọi qua API của OA mỗi khi người dùng đặt hàng để họ gửi tin nhắn về cho user. Ngoài ra bạn cũng có thể gửi tin nhắn ở những hành động khác như đơn hàng đã được giao, mã khuyến mãi mới,...
Code mẫu trên Node.JS:
const request = require('request');
const OPEN_API_DOMAIN = 'https://openapi.zalo.me';
service.sendMessage = (followerId, text) => {
return new Promise((resolve, reject) => {
request(
{
url: `${OPEN_API_DOMAIN}/v2.0/oa/message`,
method: 'POST',
headers: {
'content-type': 'application/json',
access_token: config.OA_TOKEN
},
body: {
recipient: {
user_id: followerId
},
message: {
text
}
},
json: true
},
(error, response, body) => {
if (error) return reject(error);
return resolve(body);
}
);
});
};
Response trả về:
{
"data": {
"message_id": "63ecf43f0df7dba892e6",
"user_id": "2512523625412515"
},
"error": 0,
"message": "Success"
}
Ngoài tin nhắn văn bản, bạn cũng có thể gửi tin nhắn hình ảnh hoặc danh sách đến cho người dùng. Thảm khảo Official Account API để tìm hiểu thêm về những dạng tin nhắn được hỗ trợ.