Xây dựng Hệ thống Quản lý Token API Miễn phí với Supabase và GitHub Pages

Xây dựng Hệ thống Quản lý Token API Miễn phí với Supabase và GitHub Pages Xây dựng Hệ thống Quản lý Token API Miễn phí với Supabase và GitHub Pages Tổng quan Trong bài viết này, tôi sẽ chia sẻ cách xây dựng một hệ thống quản lý Token API hoàn chỉnh với chi phí 0 đồng. Hệ thống hỗ trợ đăng ký, nạp tiền, phân bổ API Key, theo dõi usage và cảnh báo số dư - phù hợp cho các developer muốn kinh doanh API service tại Việt Nam. Demo: https://nihao123800.github.io/token-manager/ Source Code: https://github.com/nihao123800/token-manager ──────────────────────────────────────── Vì sao cần hệ thống này? Nhu cầu sử dụng AI API (DeepSeek, OpenAI, Claude...) đang tăng mạnh tại Việt Nam. Tuy nhiên, nhiều developer gặp khó khăn: 1.Thanh toán: Hầu hết API provider yêu cầu thẻ tín dụng quốc tế 2.Quản lý: Khó kiểm soát chi phí và usage của từng khách hàng 3.Ngôn ngữ: Tài liệu chủ yếu bằng tiếng Anh Hệ thống này giải quyết tất cả các vấn đề trên với chi phí 0 đồng. ──────────────────────────────────────── Kiến trúc hệ thống ┌─────────────────────────────────────────────────────┐ │ Frontend (GitHub Pages) │ │ HTML + CSS + JavaScript thuần │ │ Miễn phí, CDN toàn cầu │ └─────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────┐ │ Backend (Supabase) │ │ PostgreSQL + Auth + Storage miễn phí │ │ Đủ cho ~50 khách hàng sử dụng │ └─────────────────────────────────────────────────────┘ So sánh chi phí | Phương án | Chi phí hàng tháng | |────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────--|────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────-| | Cloud Server truyền thống | 100.000 - 500.000 VNĐ | | Phương án này | 0 VNĐ | ──────────────────────────────────────── Các tính năng chính

1. Xác thực người dùng Sử dụng Supabase Auth tích hợp sẵn: // Đăng ký const { data, error } = await supabase.auth.signUp({ email: 'user@example.com', password: 'password123' })

// Đăng nhập const { data, error } = await supabase.auth.signInWithPassword({ email: 'user@example.com', password: 'password123' }) 2. Hỗ trợ đa ngôn ngữ (i18n) Hệ thống hỗ trợ 3 ngôn ngữ: Tiếng Việt, English, 中文 const I18N = { vi: { nav_home: 'Trang chủ', nav_dashboard: 'Bảng điều khiển', balance: 'Số dư' }, en: { nav_home: 'Home', nav_dashboard: 'Dashboard', balance: 'Balance' } }

// Áp dụng ngôn ngữ function applyLanguage(lang) { document.querySelectorAll('[data-i18n]').forEach(el => { const key = el.getAttribute('data-i18n') el.textContent = I18N[lang][key] }) } 3. Hệ thống nạp tiền Khách hàng có thể nạp tiền qua chuyển khoản ngân hàng: // Khách hàng gửi yêu cầu nạp tiền async function submitRecharge(amount, proofFile) { // Upload bằng chứng chuyển khoản const { data } = await supabase.storage .from('payment-proofs') .upload(fileName, proofFile)

// Tạo bản ghi nạp tiền await supabase.from('recharges').insert({ user_id: currentUser.id, amount: amount, proof_url: publicUrl, status: 'pending' }) }

// Admin xác nhận nạp tiền async function confirmRecharge(rechargeId) { await supabase.from('recharges') .update({ status: 'approved' }) .eq('id', rechargeId)

// Cập nhật số dư await supabase.from('profiles') .update({ balance: newBalance }) .eq('id', userId) } 4. Phân bổ API Key Admin có thể phân bổ API Key cho khách hàng: // Admin thêm API Key async function addMasterApiKey(name, keyValue) { await supabase.from('api_keys').insert({ user_id: adminId, api_key: keyValue, key_name: name, is_master: true, status: 'active' }) }

// Phân bổ cho khách hàng async function assignApiKey(keyId, customerId) { await supabase.from('api_keys').update({ assigned_to: customerId, assigned_at: new Date().toISOString() }).eq('id', keyId) } 5. Tính phí tự động Hệ thống tự động tính phí dựa trên số lượng Token sử dụng: // Cấu hình giá const PRICING = { MARKUP_MULTIPLIER: 1.5, // Tăng giá 50% V4_FLASH: { INPUT_CACHE_HIT: 0.02, // VNĐ/trieu token INPUT_CACHE_MISS: 1, OUTPUT: 2 } }

// Tính toán chi phí function calculateCost(model, inputHit, inputMiss, output) { const pricing = PRICING[model] const cost = ( (inputHit / 1000000) * pricing.INPUT_CACHE_HIT + (inputMiss / 1000000) * pricing.INPUT_CACHE_MISS + (output / 1000000) * pricing.OUTPUT ) * PRICING.MARKUP_MULTIPLIER

return Math.round(cost * 10000) / 10000 } 6. Cảnh báo số dư function checkBalanceWarning(balance, threshold) { if (balance < threshold) { alert('Cảnh báo: Số dư thấp! Hiện tại: ' + balance.toFixed(2) + ' VNĐ') } } ──────────────────────────────────────── Thiết kế cơ sở dữ liệu -- Bảng người dùng CREATE TABLE profiles ( id UUID PRIMARY KEY REFERENCES auth.users(id), username TEXT NOT NULL, email TEXT NOT NULL, balance DECIMAL(10,2) DEFAULT 0, balance_warning DECIMAL(10,2) DEFAULT 10, role TEXT DEFAULT 'user' );

-- Bảng API Key CREATE TABLE api_keys ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID REFERENCES profiles(id), api_key TEXT NOT NULL, key_name TEXT, is_master BOOLEAN DEFAULT FALSE, assigned_to UUID REFERENCES profiles(id), status TEXT DEFAULT 'active' );

-- Bảng nạp tiền CREATE TABLE recharges ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID REFERENCES profiles(id), amount DECIMAL(10,2) NOT NULL, proof_url TEXT, status TEXT DEFAULT 'pending' );

-- Bảng usage CREATE TABLE usage_records ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID REFERENCES profiles(id), model TEXT, input_tokens_cache_hit BIGINT DEFAULT 0, input_tokens_cache_miss BIGINT DEFAULT 0, output_tokens BIGINT DEFAULT 0, cost DECIMAL(10,4), created_at TIMESTAMP DEFAULT NOW() ); ──────────────────────────────────────── Hướng dẫn triển khai Bước 1: Tạo tài khoản Supabase 4.Truy cập https://supabase.com 5.Đăng nhập bằng GitHub 6.Tạo project mới, chọn khu vực Singapore Bước 2: Khởi tạo database Thực thi câu SQL tạo bảng trong SQL Editor Bước 3: Deploy lên GitHub Pages git init git add . git commit -m "Initial release" git remote add origin https://github.com/username/repo.git git push -u origin master:main Bước 4: Kích hoạt GitHub Pages Settings → Pages → Branch: main → Save ──────────────────────────────────────── Bảo mật 7.Kiểm tra quyền - Phân biệt Admin và User 8.Xác thực đầu vào - Validate tất cả dữ liệu 9.Quản lý session - Xóa缓存 khi đăng xuất 4. Cách ly dữ liệu - Mỗi user chỉ xem được dữ liệu của mình ──────────────────────────────────────── Kết luận Hệ thống này chứng minh rằng chúng ta có thể xây dựng một sản phẩm hoàn chỉnh với chi phí 0 đồng. Với Supabase và GitHub Pages, developer Việt Nam có thể tạo ra các công cụ hữu ích mà không cần đầu tư infrastructure. Link demo: https://nihao123800.github.io/token-manager/ Nếu bạn thấy hữu ích, hãy để lại star trên GitHub! ──────────────────────────────────────── Tags: Supabase, GitHub Pages, API Management, Free Hosting, JavaScript, Web Development