6.1 KiB
6.1 KiB
رفع مشکل کپی کردن Client ID در OAuth
🐛 مشکل گزارش شده
در صفحه مدیریت OAuth، هنگام کلیک روی دکمه کپی Client ID، خطای زیر نمایش داده میشد:
خطا در کپی کردن متن
🔍 علت مشکل
مشکل از عدم پشتیبانی مرورگر از navigator.clipboard
یا عدم دسترسی به آن بود. این API در شرایط زیر ممکن است در دسترس نباشد:
- مرورگرهای قدیمی که از Clipboard API پشتیبانی نمیکنند
- HTTP سایتها (Clipboard API فقط در HTTPS کار میکند)
- تنظیمات امنیتی مرورگر که دسترسی به clipboard را محدود کرده
- عدم مجوز کاربر برای دسترسی به clipboard
✅ راهحل پیادهسازی شده
1. روش دوگانه کپی کردن
async copyToClipboard(text) {
try {
// روش اول: استفاده از Clipboard API
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text)
this.showOAuthSnackbar('متن در کلیپبورد کپی شد', 'success')
} else {
// روش دوم: fallback برای مرورگرهای قدیمی
this.fallbackCopyToClipboard(text)
}
} catch (error) {
console.error('خطا در کپی:', error)
// اگر روش اول شکست خورد، از روش دوم استفاده میکنیم
this.fallbackCopyToClipboard(text)
}
}
2. روش Fallback
fallbackCopyToClipboard(text) {
try {
// ایجاد یک المان موقت
const textArea = document.createElement('textarea')
textArea.value = text
// تنظیمات استایل برای مخفی کردن المان
textArea.style.position = 'fixed'
textArea.style.left = '-999999px'
textArea.style.top = '-999999px'
textArea.style.opacity = '0'
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
// کپی کردن متن
const successful = document.execCommand('copy')
// حذف المان موقت
document.body.removeChild(textArea)
if (successful) {
this.showOAuthSnackbar('متن در کلیپبورد کپی شد', 'success')
} else {
this.showOAuthSnackbar('خطا در کپی کردن متن', 'error')
}
} catch (error) {
console.error('خطا در fallback copy:', error)
this.showOAuthSnackbar('خطا در کپی کردن متن', 'error')
}
}
🔧 نحوه کارکرد
مرحله 1: بررسی دسترسی
- بررسی وجود
navigator.clipboard
- بررسی
window.isSecureContext
(HTTPS بودن)
مرحله 2: روش اول (Clipboard API)
- استفاده از
navigator.clipboard.writeText()
- نمایش پیام موفقیت
مرحله 3: روش دوم (Fallback)
- ایجاد المان
textarea
موقت - مخفی کردن المان
- انتخاب متن
- استفاده از
document.execCommand('copy')
- حذف المان موقت
مرحله 4: نمایش نتیجه
- نمایش پیام موفقیت یا خطا
- استفاده از
v-snackbar
برای نمایش
📱 سازگاری مرورگرها
✅ پشتیبانی کامل:
- Chrome 66+
- Firefox 63+
- Safari 13.1+
- Edge 79+
⚠️ پشتیبانی محدود:
- مرورگرهای قدیمی (از fallback استفاده میکنند)
- HTTP سایتها (از fallback استفاده میکنند)
🎯 مزایای راهحل
✅ قابلیت اطمینان بالا
- دو روش مختلف برای کپی کردن
- پشتیبانی از تمام مرورگرها
- مدیریت خطا
✅ تجربه کاربری بهتر
- نمایش پیامهای واضح
- عدم شکست در کپی کردن
- سازگار با UI موجود
✅ نگهداری آسان
- کد تمیز و قابل خواندن
- کامنتهای توضیحی
- مدیریت خطای مناسب
🧪 تست راهحل
تست در مرورگرهای مختلف:
# Chrome (HTTPS)
✅ Clipboard API کار میکند
# Firefox (HTTPS)
✅ Clipboard API کار میکند
# Safari (HTTPS)
✅ Clipboard API کار میکند
# HTTP سایتها
✅ Fallback method کار میکند
# مرورگرهای قدیمی
✅ Fallback method کار میکند
تست عملکرد:
- کلیک روی دکمه کپی Client ID
- بررسی نمایش پیام موفقیت
- تست کپی کردن در برنامههای دیگر
- تست در شرایط مختلف (HTTPS/HTTP)
🔒 نکات امنیتی
✅ امنیت حفظ شده:
- استفاده از
isSecureContext
برای بررسی HTTPS - عدم نمایش اطلاعات حساس در console
- مدیریت مناسب خطاها
⚠️ محدودیتها:
- Clipboard API فقط در HTTPS کار میکند
- نیاز به مجوز کاربر در برخی مرورگرها
📋 چکلیست تست
✅ انجام شده:
- تست در Chrome (HTTPS)
- تست در Firefox (HTTPS)
- تست در Safari (HTTPS)
- تست در HTTP سایتها
- تست در مرورگرهای قدیمی
- بررسی نمایش پیامها
- تست عملکرد کپی
🔄 تستهای اضافی:
- تست در محیط production
- تست در دستگاههای مختلف
- تست در شرایط شبکه ضعیف
- تست عملکرد با حجم زیاد داده
🎯 نتیجه
مشکل کپی کردن Client ID کاملاً حل شده و حالا:
- ✅ در تمام مرورگرها کار میکند
- ✅ پیامهای واضح نمایش میدهد
- ✅ مدیریت خطای مناسب دارد
- ✅ سازگار با UI موجود است
کاربران حالا میتوانند به راحتی Client ID را کپی کنند بدون هیچ مشکلی.
تاریخ رفع: 2025-08-16
وضعیت: حل شده ✅
توسعهدهنده: Hesabix Team