How to custom Contact Form in Plus UI 3.0?

How to custom Contact Form in Plus UI 3.0

Bài viết sau đây dành riêng cho những bạn đang sử dụng hoặc có ý định muốn sử dụng Template Plus UI 3.0 nhé.

Tại sao lại phải custom Contact API cho Plus UI 3.0?

Dành cho những bạn chưa biết, thì Contact form mặc định của Plus UI 3.0 có sử dụng API của Blogger để thực hiện gửi mail thông báo. Tuy nhiên, API này có những hạn chế nhất định.

• API: https://www.blogger.com/contact-form.do
• Content-Type: application/x-www-form-urlencoded;charset=UTF-8, application/json hoặc multipart/form-data
• Payload:
  • name (not required)
  • email (required)
  • message (required)
  • blogID (required)
  • token (required)
• Payload sample: {"name": "NOCOEM", "email": "[email protected]", "message": "Have a nice day!", "blogID": "0000000000000000000", "token": "ABCDEFxxxxxxxxxxxxxxxxxxxxxxxxxxxx:0000000000000"}

API này hoạt động rất tốt nếu bạn sử dụng domain của Blogger, tuy nhiên nếu bạn sửa dụng custom domain ví dụ như www.thuandv.top mà không phải nocoem.blogspot.com, thì rất có thể bạn sẽ gặp phải lỗi liên quan đến CORS. Điều này có thể tùy thuộc vào đơn vị quản lý DNS mà bạn lựa chọn. Nếu như bạn sử dụng CloudFlare để quản lý DNS, thì chắc chắn bạn sẽ bị lỗi CORS, vì điều này cũng xảy ra với mình 🥶

Trong trường hợp bạn không biết CORS là gì, thì hãy tham khảo bài viết sau nhé:

• CORS là gì? Tìm hiểu về chia sẻ tài nguyên giữa các nguồn gốc (Cross-Origin Resource Sharing)

Trong các version trước của Plus UI đã sử dụng Telegram Bot API, tuy nhiên có một vấn đề là cần phải sử dụng Bot ID và Bot Token, mà những thông tin này chính ra nên được bảo mật. Nếu kẻ gian lấy được những thông tin này, thì rất có thể sẽ xảy ra những vấn đề không đáng có.

• Telegram Bot API: https://core.telegram.org/bots/api#sendmessage

Vậy, làm sao để tạo một API vừa miễn phí, vừa đủ bảo mật nhất định cho Plus UI 3.0? Trong bài viết này, tớ sẽ hướng dẫn mọi người cách để xây dựng một API như thế nhé.

Điều kiện cần thiết

Trước khi bắt đầu, bạn cần chuẩn bị:

• Tài khoản CloudFlare
• Tài khoản Telegram
• Telegram Bot
• Chat ID của nhóm hoặc kênh Telegram

Bắt đầu thực hiện

Lưu ý! Nếu như bạn không sử dụng CloudFlare để quản lý DNS, thì không cần thực hiện bước 2 và bước 3 nhé.

1. Xây dựng API với CloudFlare Worker.
   Vì nội dung khá dài, vậy nên mình tách tách nội dung vào bài viết này nhé!

   • Tạo API trên CloudFlare Worker và Telegram API như thế nào?
2. Tạo Route cho CloudFlare Worker.
   • Chọn thêm CloudFlare Worker Route
     
   • Điền thông tin cho Route
     
   • Kết quả của CloudFlare Worker
     
3. Cập nhật code của Worker

   Tìm đoạn code sau 'Access-Control-Allow-Origin': '*',

   Và sửa lại thành (Nhớ thay bằng domain của bạn nhé)

   'Access-Control-Allow-Origin': ['https://www.domain1.com', 'https://www.domain2.com'],

4. Cập nhật Blogger Template

   Tìm đoạn code sau trong xml let l={email:e,message:n,blogID:K.bgId,token:i.tk};t&&(l.name=t);let r=await fetch(i.au,{method:"POST",body:new URLSearchParams(l)});

   Đoạn code trên tạo payload l, gửi request đến API i.au. Để tránh ảnh hưởng nhiều, chúng ta chỉ cần thay đổi 2 giá trị này là được. Ví dụ:

   let l={email:e,message:n};t&&(l.name=t);let r=await fetch("/api/contact",{method:"POST",body:new URLSearchParams(l)});

Vậy là xong! Đó là tất cả những gì bạn phải làm, giờ thì tận hưởng thành quả thôi!

Tổng kết

Trên đây chỉ là một cách đơn giản để tạo Contact API miễn phí bằng CloudFlare Worker, từ đó, bạn có thể ứng dụng nó để tạo ra các API khác để phục vụ nhu cầu cho bản thân mình.

Nếu bạn có bất cứ thắc mắc nào về nội dung trên, hay có những góp ý cải tiến, hãy comment cho mình biết nhé!

Go to Link