روابط التثبيت والروابط العميقة

تتيح لك روابط التثبيت توزيع تطبيق 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 session
const 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 callback
const 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

خزّن مفتاح التوقيع بأمان:

Terminal window
# Set as environment variable
export STRIPE_APP_SIGNING_SECRET="whsec_xxxxx"

لا تقم أبدًا بترميز مفاتيح التوقيع في الكود المصدري أو إضافتها للتحكم في الإصدارات.

الروابط العميقة

تنقل الروابط العميقة المستخدمين مباشرة إلى عرض محدد داخل تطبيق Stripe المثبت. استخدمها لتوجيه المستخدمين من الاتصالات الخارجية (البريد الإلكتروني، الإشعارات، صفحات الدعم) إلى السياق المناسب في التطبيق.

تنسيق URL للرابط العميق

https://dashboard.stripe.com/MODE/acct_ID/PAGE?apps[APP_ID][TARGET]=VIEWPORT_ID
المكونالوصفمثال
MODElive أو testlive
acct_IDمعرف حساب Stripe المستهدفacct_1234567890
PAGEمسار صفحة لوحة التحكمcustomers/cus_xxxxx
APP_IDمعرف تطبيقكcom.tajo.brevo-integration
TARGETdrawer أو modaldrawer
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 profile
const customerLink = generateDeepLink({
accountId: 'acct_xxxxx',
page: 'customers/cus_xxxxx',
viewport: 'stripe.dashboard.customer.detail',
});
// Generate a link to app settings
const 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>

الجمع بين روابط التثبيت والروابط العميقة

للحصول على أفضل تجربة إعداد، ادمج روابط التثبيت مع الروابط العميقة بعد التثبيت:

  1. ينقر المستخدم على رابط تثبيت من موقعك أو بريدك الإلكتروني
  2. يثبت المستخدم التطبيق ويتم إعادة توجيهه إلى URL رد الاتصال
  3. يعالج رد الاتصال التثبيت ويعيد توجيه المستخدم إلى رابط عميق يفتح 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

اختبر دائمًا روابط التثبيت والروابط العميقة في كل من وضع الإنتاج ووضع الاختبار للتأكد من أنها تعمل بشكل صحيح في جميع البيئات.

Subscribe to updates

developer-docs

Drop your email or phone number — we'll send you what matters next.

مساعد AI

مرحباً! اسألني أي شيء عن الوثائق.

ابدأ مجانًا مع Brevo