روابط التثبيت والروابط العميقة
تتيح لك روابط التثبيت توزيع تطبيق Stripe الخاص بك خارج المتجر، بينما تنقل الروابط العميقة المستخدمين مباشرة إلى عروض محددة داخل تطبيقك المثبت. كلاهما ضروري لتجربة إعداد وتكامل سلسة.
روابط التثبيت
توفر روابط التثبيت عنوان URL مباشرًا يمكن للتجار استخدامه لتثبيت تطبيقك. عندما ينقر المستخدم على رابط التثبيت، يتولى Stripe تدفق التثبيت ثم يعيد التوجيه إلى URI المحدد.
المتطلبات الأساسية
قبل استخدام روابط التثبيت، قم بتكوين allowed_redirect_uris في manifest التطبيق:
{ "id": "com.tajo.brevo-integration", "allowed_redirect_uris": [ "https://tajo.io/stripe/callback", "https://tajo.io/stripe/oauth/complete" ]}تنسيق رابط التثبيت
https://marketplace.stripe.com/oauth/v2/authorize?client_id=APP_ID&redirect_uri=REDIRECT_URI&state=STATE_VALUE| المعامل | مطلوب | الوصف |
|---|---|---|
client_id | نعم | معرف تطبيقك (مثل com.tajo.brevo-integration) |
redirect_uri | نعم | يجب أن يتطابق مع أحد allowed_redirect_uris |
state | موصى به | سلسلة عشوائية للحماية من CSRF |
معاملات إعادة التوجيه
بعد التثبيت الناجح، يعيد Stripe توجيه المستخدم إلى redirect_uri مع هذه المعاملات:
| المعامل | الوصف |
|---|---|
user_id | معرف مستخدم Stripe للحساب المُثبِّت |
account_id | معرف حساب Stripe (مثل acct_xxxxx) |
state | قيمة state التي قدمتها (للتحقق من CSRF) |
install_signature | توقيع HMAC للتحقق من شرعية التثبيت |
مثال على URL إعادة التوجيه:
https://tajo.io/stripe/callback ?user_id=usr_xxxxx &account_id=acct_xxxxx &state=abc123random &install_signature=sig_xxxxxالحماية من CSRF
استخدم دائمًا معامل state لمنع هجمات تزوير الطلبات عبر المواقع:
import crypto from 'crypto';
// Generate a random state value and store it in the sessionconst generateInstallLink = (req, res) => { const state = crypto.randomBytes(32).toString('hex');
// Store state in session for later verification req.session.stripeInstallState = state;
const installUrl = new URL('https://marketplace.stripe.com/oauth/v2/authorize'); installUrl.searchParams.set('client_id', 'com.tajo.brevo-integration'); installUrl.searchParams.set('redirect_uri', 'https://tajo.io/stripe/callback'); installUrl.searchParams.set('state', state);
res.redirect(installUrl.toString());};
// Handle the redirect callbackconst handleInstallCallback = (req, res) => { const { state, user_id, account_id, install_signature } = req.query;
// Verify state matches what we stored if (state !== req.session.stripeInstallState) { return res.status(403).json({ error: 'Invalid state parameter' }); }
// Clear the stored state delete req.session.stripeInstallState;
// Verify the install signature if (!verifyInstallSignature(install_signature, account_id)) { return res.status(403).json({ error: 'Invalid install signature' }); }
// Process the successful installation await processInstallation(user_id, account_id);
res.redirect('/dashboard/stripe-connected');};التحقق من التوقيع
تحقق من install_signature باستخدام مفتاح التوقيع الخاص بتطبيقك:
import crypto from 'crypto';
const verifyInstallSignature = (signature, accountId) => { const signingSecret = process.env.STRIPE_APP_SIGNING_SECRET;
const expectedSignature = crypto .createHmac('sha256', signingSecret) .update(accountId) .digest('hex');
return crypto.timingSafeEqual( Buffer.from(signature), Buffer.from(expectedSignature) );};Caution
استخدم دائمًا crypto.timingSafeEqual لمقارنة التوقيعات لمنع هجمات التوقيت. لا تستخدم أبدًا المساواة البسيطة للسلاسل (===).
مفتاح التوقيع
مفتاح التوقيع الخاص بتطبيقك متاح في لوحة تحكم Stripe تحت إعدادات تطبيقك. استخدمه لـ:
- التحقق من توقيعات التثبيت من عمليات إعادة التوجيه
- التحقق من حمولات webhook من Stripe
- مصادقة الطلبات بين الخادم الخلفي و Stripe
خزّن مفتاح التوقيع بأمان:
# Set as environment variableexport STRIPE_APP_SIGNING_SECRET="whsec_xxxxx"لا تقم أبدًا بترميز مفاتيح التوقيع في الكود المصدري أو إضافتها للتحكم في الإصدارات.
الروابط العميقة
تنقل الروابط العميقة المستخدمين مباشرة إلى عرض محدد داخل تطبيق Stripe المثبت. استخدمها لتوجيه المستخدمين من الاتصالات الخارجية (البريد الإلكتروني، الإشعارات، صفحات الدعم) إلى السياق المناسب في التطبيق.
تنسيق URL للرابط العميق
https://dashboard.stripe.com/MODE/acct_ID/PAGE?apps[APP_ID][TARGET]=VIEWPORT_ID| المكون | الوصف | مثال |
|---|---|---|
MODE | live أو test | live |
acct_ID | معرف حساب Stripe المستهدف | acct_1234567890 |
PAGE | مسار صفحة لوحة التحكم | customers/cus_xxxxx |
APP_ID | معرف تطبيقك | com.tajo.brevo-integration |
TARGET | drawer أو modal | drawer |
VIEWPORT_ID | الـ viewport المراد فتحه | stripe.dashboard.customer.detail |
أهداف Drawer مقابل Modal
| الهدف | السلوك | حالة الاستخدام |
|---|---|---|
drawer | يفتح التطبيق في اللوحة الجانبية | التفاعل الافتراضي، السياق بجانب الصفحة |
modal | يفتح التطبيق في تراكب ملء الشاشة | سير عمل مركز، إعداد، نماذج معقدة |
أمثلة على الروابط العميقة
فتح عرض تفاصيل العميل في drawer
https://dashboard.stripe.com/live/acct_xxxxx/customers/cus_xxxxx ?apps[com.tajo.brevo-integration][drawer]=stripe.dashboard.customer.detailفتح الإعدادات في modal
https://dashboard.stripe.com/live/acct_xxxxx/settings ?apps[com.tajo.brevo-integration][modal]=stripe.dashboard.settingsفتح تدفق الإعداد
https://dashboard.stripe.com/live/acct_xxxxx/dashboard ?apps[com.tajo.brevo-integration][modal]=stripe.dashboard.onboardingفتح عرض تفاصيل الدفع في وضع الاختبار
https://dashboard.stripe.com/test/acct_xxxxx/payments/pi_xxxxx ?apps[com.tajo.brevo-integration][drawer]=stripe.dashboard.payment.detailإنشاء الروابط العميقة برمجيًا
const generateDeepLink = ({ accountId, mode = 'live', page, appId = 'com.tajo.brevo-integration', target = 'drawer', viewport,}) => { const baseUrl = `https://dashboard.stripe.com/${mode}/${accountId}/${page}`; const params = new URLSearchParams(); params.set(`apps[${appId}][${target}]`, viewport);
return `${baseUrl}?${params.toString()}`;};
// Generate a link to view a customer's Brevo profileconst customerLink = generateDeepLink({ accountId: 'acct_xxxxx', page: 'customers/cus_xxxxx', viewport: 'stripe.dashboard.customer.detail',});
// Generate a link to app settingsconst settingsLink = generateDeepLink({ accountId: 'acct_xxxxx', page: 'settings', viewport: 'stripe.dashboard.settings', target: 'modal',});استخدام الروابط العميقة في الاتصالات
الروابط العميقة مفيدة بشكل خاص في:
- إشعارات البريد الإلكتروني: “عرض حالة مزامنة Brevo لهذا العميل”
- ردود الدعم: “انقر هنا للتحقق من إعدادات التكامل”
- رسائل الإعداد: “أكمل إعداد Brevo الخاص بك”
- تنبيهات الأخطاء: “مراجعة مشكلة المزامنة للعميل X”
<!-- Example in an email template --><a href="https://dashboard.stripe.com/live/acct_xxxxx/customers/cus_xxxxx?apps[com.tajo.brevo-integration][drawer]=stripe.dashboard.customer.detail"> View Brevo Profile in Stripe</a>الجمع بين روابط التثبيت والروابط العميقة
للحصول على أفضل تجربة إعداد، ادمج روابط التثبيت مع الروابط العميقة بعد التثبيت:
- ينقر المستخدم على رابط تثبيت من موقعك أو بريدك الإلكتروني
- يثبت المستخدم التطبيق ويتم إعادة توجيهه إلى URL رد الاتصال
- يعالج رد الاتصال التثبيت ويعيد توجيه المستخدم إلى رابط عميق يفتح viewport الإعداد
const handleInstallCallback = async (req, res) => { const { account_id, install_signature, state } = req.query;
// Verify state and signature // ... (verification code)
// Process installation await processInstallation(account_id);
// Redirect to the app's onboarding view via deep link const onboardingLink = generateDeepLink({ accountId: account_id, page: 'dashboard', viewport: 'stripe.dashboard.onboarding', target: 'modal', });
res.redirect(onboardingLink);};Tip
اختبر دائمًا روابط التثبيت والروابط العميقة في كل من وضع الإنتاج ووضع الاختبار للتأكد من أنها تعمل بشكل صحيح في جميع البيئات.