Discord Menu Bot

Bot Discord với trang web quản lý menu - Đăng nhập bảo mật bằng Discord OAuth2.

Tính năng

• Discord Bot:

  • Lệnh /menu hiển thị embed menu chính với dropdown
  • Khi chọn item từ dropdown, hiển thị embed chi tiết
  • Hỗ trợ đầy đủ tính năng Discord Embed (thumbnail, image, author, footer, fields)

• Trang web quản lý:

  • ✅ Đăng nhập bảo mật bằng Discord OAuth2 - Không cần password!
  • ✅ Whitelist User ID - Chỉ cho phép người dùng cụ thể truy cập
  • Chỉnh sửa embed menu chính
  • Quản lý danh sách dịch vụ (thêm/xóa/sửa)
  • Upload ảnh lên Discord CDN
  • Giao diện đơn giản, dễ sử dụng

Cài đặt

📹 Video hướng dẫn Setup

Xem video hướng dẫn chi tiết: howtosetup.mp4

Video này sẽ hướng dẫn bạn từng bước:

• Cách tạo Discord Bot & OAuth Application
• Lấy các thông tin cần thiết (Token, Client ID, Client Secret, Guild ID, v.v.)
• Cấu hình file .env đầy đủ

---

1. Cài đặt Node.js

Đảm bảo bạn đã cài Node.js (phiên bản 16 trở lên)

2. Cài đặt dependencies

npm install

3. Tạo Discord Bot & OAuth Application

Bước 1: Tạo Application

1. Truy cập Discord Developer Portal
2. Click New Application
3. Đặt tên cho application (ví dụ: "Menu Bot")
4. Click Create

Bước 2: Tạo Bot

1. Vào tab Bot
2. Click Add Bot → Yes, do it!
3. Copy Bot Token (sẽ dùng cho DISCORD_TOKEN)
4. Bật các Privileged Gateway Intents nếu cần

Bước 3: Cấu hình OAuth2

1. Vào tab OAuth2 → General
2. Copy Client ID (sẽ dùng cho DISCORD_CLIENT_ID)
3. Copy Client Secret (sẽ dùng cho DISCORD_CLIENT_SECRET)
4. Trong Redirects, thêm:

   http://localhost:3000/auth/discord/callback
   

   (Nếu hosting, thay localhost:3000 bằng domain của bạn)

Bước 4: Mời Bot vào Server

1. Vào tab OAuth2 → URL Generator
2. Chọn Scopes:
   • ✅ bot
   • ✅ applications.commands
3. Chọn Bot Permissions:
   • ✅ Send Messages
   • ✅ Attach Files
   • ✅ Use Slash Commands
4. Copy URL ở cuối trang và mở trong trình duyệt
5. Chọn server và authorize

4. Lấy các ID cần thiết

Guild ID (Server ID)

1. Mở Discord
2. Vào User Settings > Advanced > Bật Developer Mode
3. Click phải vào server → Copy Server ID

Upload Channel ID

1. Tạo một channel riêng để lưu ảnh (ví dụ: #bot-uploads)
2. Click phải vào channel → Copy Channel ID

Your User ID (để vào dashboard)

1. Click phải vào tên của bạn → Copy User ID
2. Nếu muốn cho nhiều người, cách nhau bởi dấu phẩy

5. Cấu hình .env

💡 Mẹo: Nếu chưa rõ cách lấy các thông tin, xem video hướng dẫn setup ở phần đầu!

Tạo file .env từ .env.example:

cp .env.example .env

Chỉnh sửa file .env:

# Discord Bot
DISCORD_TOKEN=MTIzNDU2Nzg5MDEyMzQ1Njc4OQ.GaBcDe.Fg123456789
GUILD_ID=123456789012345678
UPLOAD_CHANNEL_ID=987654321098765432

# Discord OAuth2
DISCORD_CLIENT_ID=123456789012345678
DISCORD_CLIENT_SECRET=abcdefghijklmnopqrstuvwxyz123456
DISCORD_CALLBACK_URL=http://localhost:3000/auth/discord/callback

# Web Dashboard
WEB_PORT=3000

# Session Secret (chuỗi ngẫu nhiên dài)
SESSION_SECRET=aB3xK9mP2nQrS7vW4yZ8cD1eF5gH6jL0

# Whitelist User ID (cách nhau bởi dấu phẩy)
ALLOWED_USER_IDS=123456789012345678,987654321098765432

Quan trọng:

• SESSION_SECRET: Tạo chuỗi ngẫu nhiên dài (có thể dùng lệnh: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))")
• ALLOWED_USER_IDS: Danh sách Discord User ID được phép truy cập dashboard
• DISCORD_CALLBACK_URL: Nếu hosting, đổi thành domain của bạn (ví dụ: https://yourdomain.com/auth/discord/callback)

Chạy bot

npm start

Bot sẽ khởi động và web server sẽ chạy tại http://localhost:3000

Sử dụng

Discord Bot

Trong server Discord, gõ lệnh:

/menu

Bot sẽ hiển thị:

1. Embed menu chính với dropdown list
2. Khi chọn một dịch vụ → hiển thị embed chi tiết của dịch vụ đó

Trang web quản lý

1. Đăng nhập

1. Truy cập http://localhost:3000
2. Click "Đăng nhập với Discord"
3. Discord sẽ hỏi xác nhận → Click Authorize
4. Nếu User ID của bạn trong ALLOWED_USER_IDS → Vào dashboard

Lưu ý: Chỉ những User ID trong ALLOWED_USER_IDS mới được vào dashboard!

2. Quản lý Menu Chính

Chỉnh sửa embed hiển thị khi gõ /menu:

• Tiêu đề, Mô tả, Màu sắc
• Thumbnail: Ảnh nhỏ góc phải
• Image: Ảnh lớn bên dưới
• Author: Tên tác giả với icon và link
• Footer: Text footer với icon
• Fields: Các trường thông tin bổ sung

3. Quản lý Danh sách Dịch vụ

Mỗi dịch vụ có 2 phần:

📌 Hiển thị trong Dropdown:

• Tên hiển thị
• Value (ID duy nhất)
• Mô tả ngắn (hiện trong dropdown)
• Emoji

📄 Nội dung Chi tiết: Khi user chọn dịch vụ, sẽ hiển thị embed với:

• Tiêu đề, Mô tả, Màu
• Thumbnail & Image
• Author & Footer
• Fields (có thể thêm nhiều fields)

4. Upload ảnh

Mọi trường hình ảnh đều có nút Upload:

1. Click Upload
2. Chọn file ảnh (PNG, JPG, GIF)
3. Ảnh sẽ được upload lên Discord CDN
4. URL tự động điền vào ô input
5. Nhấn Lưu tất cả thay đổi

Lưu ý:

• Ảnh được lưu vào channel UPLOAD_CHANNEL_ID trong Discord
• Giới hạn 10MB/file
• URL Discord CDN vĩnh viễn và nhanh

5. Đăng xuất

Click nút Đăng xuất ở góc trên bên phải dashboard.

Bảo mật

Ưu điểm của Discord OAuth:

✅ Không cần quản lý password - Discord lo việc đó ✅ Tự động có HTTPS - Discord xử lý đăng nhập qua HTTPS của họ ✅ Whitelist User ID - Chỉ cho phép người dùng cụ thể ✅ An toàn hơn - Không lo bị đánh cắp password ✅ Đơn giản hơn - 1 click đăng nhập

Cách hoạt động:

1. User click "Đăng nhập với Discord"
2. Discord yêu cầu xác nhận
3. Sau khi đồng ý → Discord trả về thông tin user
4. Server kiểm tra User ID có trong ALLOWED_USER_IDS không
5. Nếu có → Cho vào dashboard

Lưu ý:

• Danh sách ALLOWED_USER_IDS nên chỉ gồm owner/admin server
• SESSION_SECRET phải là chuỗi ngẫu nhiên mạnh
• Nếu hosting public, nhớ đổi DISCORD_CALLBACK_URL thành domain thật

Cấu trúc dự án

Menu/
├── index.js               # Entry point
├── bot.js                 # Discord bot logic
├── server.js              # Express web server + Discord OAuth
├── config.json            # Cấu hình embed và menu
├── package.json           # Dependencies
├── .env                   # Biến môi trường (không commit)
├── .env.example           # Template
├── .gitignore            # Git ignore
├── public/
│   ├── login.html         # Trang đăng nhập (Discord OAuth)
│   └── dashboard.html     # Trang quản lý
├── uploads/               # Thư mục tạm cho upload (tự động tạo)
└── README.md              # Hướng dẫn

Khắc phục sự cố

Bot không hiển thị slash command

1. Đảm bảo bot đã được mời với scope bot và applications.commands
2. Kiểm tra GUILD_ID trong .env
3. Khởi động lại bot

Không thể đăng nhập

Lỗi: "Bạn không có quyền truy cập dashboard này"

• Kiểm tra User ID của bạn có trong ALLOWED_USER_IDS không
• Lấy User ID: Click phải vào tên bạn trong Discord → Copy User ID

Lỗi: "Redirect URI mismatch"

• Vào Discord Developer Portal → OAuth2 → Redirects
• Thêm chính xác URL: http://localhost:3000/auth/discord/callback
• Kiểm tra DISCORD_CALLBACK_URL trong .env khớp với URL đã thêm

Lỗi: "Invalid client_id or client_secret"

• Kiểm tra lại DISCORD_CLIENT_ID và DISCORD_CLIENT_SECRET trong .env
• Vào Discord Developer Portal → OAuth2 → General để lấy lại

Lỗi khi upload ảnh

1. Kiểm tra UPLOAD_CHANNEL_ID đã đúng chưa
2. Đảm bảo bot có quyền gửi tin nhắn + đính kèm file trong channel đó
3. Kiểm tra kích thước file < 10MB

Embed không hiển thị đúng

1. Kiểm tra URL hình ảnh có hợp lệ không
2. Màu sắc phải là hex code (ví dụ: #0099ff)
3. Nếu để trống author.name hoặc footer.text, phần đó sẽ không hiển thị

Cấu hình cho Hosting

Nếu muốn host lên VPS/Cloud:

1. Cập nhật Callback URL:

   • Trong Discord Developer Portal → OAuth2 → Redirects, thêm:

     https://yourdomain.com/auth/discord/callback
     

   • Cập nhật .env:

     DISCORD_CALLBACK_URL=https://yourdomain.com/auth/discord/callback

2. HTTPS:

   • Nếu không có HTTPS, dùng Cloudflare hoặc reverse proxy (nginx + Let's Encrypt)
   • Discord OAuth yêu cầu HTTPS cho production

3. Port:

   • Đổi WEB_PORT nếu cần (mặc định 3000)

License

MIT License - Copyright (c) 2025 gaucandy

Dự án này được phát hành dưới giấy phép MIT License, cho phép:

• Sử dụng cho mục đích thương mại
• Sửa đổi và phân phối tự do
• Sử dụng trong dự án private hoặc open source

Yêu cầu: Phải giữ thông tin copyright và credit cho tác giả gaucandy trong mọi bản sao hoặc phần quan trọng của phần mềm.

Xem chi tiết tại LICENSE