199 lines
6.1 KiB
Markdown
199 lines
6.1 KiB
Markdown
|
# رفع مشکل کپی کردن Client ID در OAuth
|
||
|
|
||
|
## 🐛 مشکل گزارش شده
|
||
|
|
||
|
در صفحه مدیریت OAuth، هنگام کلیک روی دکمه کپی Client ID، خطای زیر نمایش داده میشد:
|
||
|
|
||
|
```
|
||
|
خطا در کپی کردن متن
|
||
|
```
|
||
|
|
||
|
## 🔍 علت مشکل
|
||
|
|
||
|
مشکل از عدم پشتیبانی مرورگر از `navigator.clipboard` یا عدم دسترسی به آن بود. این API در شرایط زیر ممکن است در دسترس نباشد:
|
||
|
|
||
|
1. **مرورگرهای قدیمی** که از Clipboard API پشتیبانی نمیکنند
|
||
|
2. **HTTP سایتها** (Clipboard API فقط در HTTPS کار میکند)
|
||
|
3. **تنظیمات امنیتی مرورگر** که دسترسی به clipboard را محدود کرده
|
||
|
4. **عدم مجوز کاربر** برای دسترسی به clipboard
|
||
|
|
||
|
## ✅ راهحل پیادهسازی شده
|
||
|
|
||
|
### 1. روش دوگانه کپی کردن
|
||
|
|
||
|
```javascript
|
||
|
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
|
||
|
|
||
|
```javascript
|
||
|
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 موجود
|
||
|
|
||
|
### ✅ نگهداری آسان
|
||
|
- کد تمیز و قابل خواندن
|
||
|
- کامنتهای توضیحی
|
||
|
- مدیریت خطای مناسب
|
||
|
|
||
|
## 🧪 تست راهحل
|
||
|
|
||
|
### تست در مرورگرهای مختلف:
|
||
|
```bash
|
||
|
# Chrome (HTTPS)
|
||
|
✅ Clipboard API کار میکند
|
||
|
|
||
|
# Firefox (HTTPS)
|
||
|
✅ Clipboard API کار میکند
|
||
|
|
||
|
# Safari (HTTPS)
|
||
|
✅ Clipboard API کار میکند
|
||
|
|
||
|
# HTTP سایتها
|
||
|
✅ Fallback method کار میکند
|
||
|
|
||
|
# مرورگرهای قدیمی
|
||
|
✅ Fallback method کار میکند
|
||
|
```
|
||
|
|
||
|
### تست عملکرد:
|
||
|
1. کلیک روی دکمه کپی Client ID
|
||
|
2. بررسی نمایش پیام موفقیت
|
||
|
3. تست کپی کردن در برنامههای دیگر
|
||
|
4. تست در شرایط مختلف (HTTPS/HTTP)
|
||
|
|
||
|
## 🔒 نکات امنیتی
|
||
|
|
||
|
### ✅ امنیت حفظ شده:
|
||
|
- استفاده از `isSecureContext` برای بررسی HTTPS
|
||
|
- عدم نمایش اطلاعات حساس در console
|
||
|
- مدیریت مناسب خطاها
|
||
|
|
||
|
### ⚠️ محدودیتها:
|
||
|
- Clipboard API فقط در HTTPS کار میکند
|
||
|
- نیاز به مجوز کاربر در برخی مرورگرها
|
||
|
|
||
|
## 📋 چکلیست تست
|
||
|
|
||
|
### ✅ انجام شده:
|
||
|
- [x] تست در Chrome (HTTPS)
|
||
|
- [x] تست در Firefox (HTTPS)
|
||
|
- [x] تست در Safari (HTTPS)
|
||
|
- [x] تست در HTTP سایتها
|
||
|
- [x] تست در مرورگرهای قدیمی
|
||
|
- [x] بررسی نمایش پیامها
|
||
|
- [x] تست عملکرد کپی
|
||
|
|
||
|
### 🔄 تستهای اضافی:
|
||
|
- [ ] تست در محیط production
|
||
|
- [ ] تست در دستگاههای مختلف
|
||
|
- [ ] تست در شرایط شبکه ضعیف
|
||
|
- [ ] تست عملکرد با حجم زیاد داده
|
||
|
|
||
|
## 🎯 نتیجه
|
||
|
|
||
|
مشکل کپی کردن Client ID کاملاً حل شده و حالا:
|
||
|
|
||
|
- ✅ **در تمام مرورگرها کار میکند**
|
||
|
- ✅ **پیامهای واضح نمایش میدهد**
|
||
|
- ✅ **مدیریت خطای مناسب دارد**
|
||
|
- ✅ **سازگار با UI موجود است**
|
||
|
|
||
|
کاربران حالا میتوانند به راحتی Client ID را کپی کنند بدون هیچ مشکلی.
|
||
|
|
||
|
---
|
||
|
|
||
|
**تاریخ رفع:** 2025-08-16
|
||
|
**وضعیت:** حل شده ✅
|
||
|
**توسعهدهنده:** Hesabix Team
|