Cho khách đăng nhập bằng Zalo
Bớt một rào cản khi khách tạo tài khoản: bấm một nút là vào, không phải nghĩ mật khẩu rồi quên. Có thêm cái lợi ngầm — khách đăng nhập kiểu này là bạn có luôn UID của họ, tức là gửi được tin ZBS giá rẻ về sau.
Hai kiểu đăng nhập
| Kiểu | Khách làm gì |
|---|---|
| Đăng nhập bằng tài khoản Zalo | Bấm nút, Zalo hỏi cho phép, xong là vào. Nhanh nhất, và lấy được UID. |
| SĐT Zalo + ZNS OTP | Khách nhập số điện thoại, nhận mã OTP qua tin nhắn Zalo rồi nhập mã. Mỗi lần gửi OTP là một tin ZNS tính tiền. |
Mở tab Đăng nhập bằng Zalo
Vào Cài đặt → DevVN - Zalo OA → Đăng nhập bằng Zalo.
- Đăng nhập bằng Zalo — tab thứ tám.
- Đăng nhập bằng tài khoản Zalo — tích Kích hoạt. Bốn dòng hướng dẫn ngay bên dưới là việc phải khai bên trang ứng dụng Zalo, xem mục kế tiếp.
- Đăng nhập bằng SĐT Zalo + ZNS OTP — tích nếu muốn kiểu OTP. Chỉ dùng được với số điện thoại có Zalo.
- Sử dụng reCaptcha V3 — chặn máy tự động spam OTP. Nên bật nếu dùng OTP.
- Form đăng nhập của Woo — thay hẳn form đăng ký / đăng nhập mặc định của WooCommerce bằng form của plugin.
Khai báo bên Zalo cho nút đăng nhập
Nút đăng nhập cần bốn khai báo trong ứng dụng ở developers.zalo.me — plugin ghi sẵn ngay dưới ô Kích hoạt, kèm đúng đường dẫn của website bạn:
- Mở ứng dụng của bạn ở trang quản trị Zalo.
- Tích mục Kiểm tra secret key khi gọi api get access token (chỉ áp dụng cho User Access Token V4).
- Tab Web → ô Home URL: nhập địa chỉ website của bạn.
- Vẫn tab Web → ô Callback URL: nhập đường dẫn kết thúc bằng
/wp-json/zalo-oa/v1/login-callback. Chép nguyên dòng plugin hiện ra, đừng gõ tay.
Nút hiện ở đâu
Bật xong, nút Đăng nhập bằng Zalo tự xuất hiện ở hai chỗ: trang Tài khoản của WooCommerce và trang đăng nhập của WordPress (wp-login.php).
- Đăng nhập bằng Zalo — nút nằm ngay dưới form đăng nhập sẵn có, không thay thế nó. Khách vẫn đăng nhập bằng mật khẩu như cũ nếu muốn.
Đặt nút ở chỗ khác
Muốn nút nằm ở trang khác, trong menu hay trong một khối tuỳ ý thì dùng shortcode:
| Shortcode | Hiện gì |
|---|---|
[zalo_login_btn] | Nút Đăng nhập bằng Zalo. Cần bật mục Đăng nhập bằng tài khoản Zalo. |
[login_otp_btn] | Nút mở hộp đăng nhập bằng SĐT + OTP. Cần bật mục SĐT Zalo + ZNS OTP. |
Muốn một nút bất kỳ có sẵn trên giao diện mở hộp đăng nhập OTP thì chỉ cần thêm class open_otp_login vào thẻ đó — không cần shortcode.
Muốn đổi hẳn giao diện nút OTP: chép wp-content/plugins/devvn-zalo-oa/templates/login-otp-btn.php sang child theme theo đường dẫn wp-content/themes/{ten-theme-con}/devvn-zalooa/login-otp-btn.php rồi sửa ở bản chép. Sửa trong thư mục plugin thì cập nhật là mất.
reCaptcha V3
Bật Sử dụng reCaptcha V3 rồi dán Site key và Secret key lấy tại trang quản trị reCAPTCHA của Google. Nhớ chọn loại v3, không phải v2, và khai đúng tên miền website.
Mỗi lần ai đó bấm gửi OTP là bạn mất tiền một tin ZNS. Không có reCaptcha, một con bot có thể quay vòng số điện thoại và đốt sạch hạn mức của bạn trong vài phút. Plugin có sẵn giới hạn số lần xin mã, nhưng reCaptcha là lớp chặn đầu tiên và rẻ nhất.
Cách kiểm tra đã chạy đúng chưa
- Mở trang Tài khoản ở cửa sổ ẩn danh (để không bị tính là đã đăng nhập).
- Thấy nút Đăng nhập bằng Zalo dưới form đăng nhập.
- Bấm thử — Zalo phải hiện màn hình hỏi cho phép, không phải trang báo lỗi.
- Đồng ý, quay về website và đã đăng nhập.
- Vào Quản lý người dùng OA xem đã có thêm UID của tài khoản vừa đăng nhập chưa.
Lỗi thường gặp
| Hiện tượng | Cách xử lý |
|---|---|
| Không thấy nút trên trang Tài khoản | Chưa tích Kích hoạt ở mục Đăng nhập bằng tài khoản Zalo, hoặc đang xem bằng tài khoản đã đăng nhập. Thử ở cửa sổ ẩn danh. |
| Bấm nút, Zalo báo sai Callback URL | Ô Callback URL bên Zalo không khớp từng ký tự với dòng plugin hiện ra. Chép lại nguyên vẹn, chú ý http / https và www. |
| Zalo báo lỗi khi lấy access token | Chưa tích mục Kiểm tra secret key khi gọi api get access token trong ứng dụng. |
| Không nhận được mã OTP | Số điện thoại không có Zalo, hoặc chưa chọn mẫu ZNS OTP, hoặc hết hạn mức ZNS. Xem lại tab ZNS API. |
| Xin OTP vài lần thì bị chặn | Đúng như thiết kế — plugin giới hạn số lần xin mã trong một khoảng thời gian. Đổi giới hạn bằng hook limit_request_otp, xem Hook action và filter. |
| Giao diện nút xấu hoặc lệch với theme | Chép template sang child theme rồi sửa, theo hướng dẫn ở mục Đặt nút ở chỗ khác. |
Tiếp theo: chiến dịch gửi tin hàng loạt.