تضمين تسجيل الدخول وإنشاء الحساب

عند تفعيل «حسابات العملاء»، لا تحتاج إلى بناء نموذج تسجيل دخول وإنشاء حساب بيدك — فـ HelmCustomers.renderAuth() يضع صندوق تسجيل دخول وإنشاء حساب كامل التنسيق يحمل هويّتك في أي صفحة من موقعك بسطر برمجي واحد. وهذه الصفحة موجّهة إلى المطوّر الخاص بك.

أضفه إلى صفحتك

<script src="https://api.usehelm.host/api/public/customers/sdk.js" data-api-key="YOUR_PROJECT_API_KEY"></script>
<div id="helm-auth"></div>
<script>
  HelmCustomers.renderAuth('#helm-auth');
</script>

استبدل YOUR_PROJECT_API_KEY بمفتاح API الخاص بمشروعك — وهو نفسه المستخدَم أصلًا لمحتوى موقعك. ويرسم الصندوق نفسه بنفسه: تبويبان للتنقل بين Log in وSign up، وشعارك واسم نشاطك يُجلبان تلقائيًا، وسطر صغير أسفله يقول "Powered by Helm". وهو ينادي طريقتَي register()/login() نفسيهما الموثّقتين في مكان آخر من هذا القسم، فتبقى HelmCustomers.on('login', ...) وHelmCustomers.isLoggedIn() تعملان كالمعتاد بمجرد أن يسجّل أحدهم دخوله عبره.

وإن كان الزائر مسجّل الدخول أصلًا — سجّل دخوله سابقًا ولا تزال جلسته صالحة — انتقل الصندوق مباشرة إلى حالة تسجيل الدخول مع زر Log out، بدل أن يومض بنموذج تسجيل الدخول أولًا.

تأكيد الإيميل مدمج

على الحسابات الجديدة تأكيد عنوان إيميلها قبل أن تستطيع تسجيل الدخول — فلا ينشئ أحد حسابًا بعنوان غيره. ويتولّى الصندوق الرحلة كاملة نيابة عنك:

يُنشئ أحدهم حسابًا ← يعرض الصندوق لوحة "Check your email to confirm your account" (ومعها زر Resend) بدل تسجيل دخوله فورًا.
يصله إيميل "Confirm your email" يحمل هويّتك، فينقر الرابط الذي يعيده إلى أي صفحة فيها renderAuth (ومعه ?verifyToken= في العنوان).
يعرض الصندوق خطوة قصيرة "Enter your password to confirm your account"، وما إن يفعل حتى يؤكّد إيميله ويسجّل دخوله — كل ذلك في الصندوق نفسه.
وإن حاول أحدهم تسجيل الدخول قبل التأكيد، أخبره الصندوق بذلك وعرض عليه زر Resend في مكانه.

ولا تحتاج إلى بناء أي شيء لهذا — وجّه إيميل التأكيد إلى أي صفحة فيها renderAuth ويتولّى الصندوق الباقي. أما الحسابات المُنشأة عبر رابط المطالبة (أدناه) فمؤكَّدة أصلًا، لأن النقر على ذلك الرابط يثبت ملكية العنوان.

يتولّى المطالبة وتعيين كلمة المرور أيضًا

يغطّي الصندوق كذلك الخطوتين الموصوفتين في «الحجوزات والمطالبة بالحساب»: فرابط "Booked with us before? Claim your account" مدمج فيه، وإن فُتحت الصفحة التي يعمل عليها renderAuth ومعها ?token= في العنوان (الرابط الآتي من إيميل المطالبة)، عرض تلقائيًا نموذج تعيين كلمة المرور بدل تسجيل الدخول وإنشاء الحساب. ولا تحتاج إلى صفحة مطالبة منفصلة — وجّه رابط إيميل المطالبة إلى أي صفحة فيها renderAuth، ويتولّى الصندوق الخطوتين بنفسه. وإن فضّلت بناء مسار مطالبة خاص بك، فالنداءان claim()/completeClaim() تحتهما لا يزالان متاحين وموثّقين في تلك الصفحة.

الخيارات

HelmCustomers.renderAuth('#helm-auth', {
  mode: 'signup',
  theme: {
    mode: 'dark',
    accent: '#e11d48',
    radius: '10px',
  },
  onAuth: function (customer) {
    console.log('Signed in:', customer);
  },
});

mode — أي تبويب يظهر أولًا، 'login' أو 'signup'. وقيمته الافتراضية 'login'. (وهو منفصل عن theme.mode أدناه — هذا يختار التبويب الذي يبدأ به، وذاك يختار الفاتح أو الداكن.)
theme — يوائم الصندوق مع مظهر موقعك:
- mode — 'light' (الافتراضي) أو 'dark'
- accent — لون الأزرار والإبراز
- surface — لون خلفية البطاقة
- text — لون النص الأساسي
- muted — لون النص الثانوي
- border — لون الإطار
- radius — استدارة الزوايا، مثل '10px'
- fontFamily — خط الصندوق
واترك أيًّا منها فيعود إلى قيم افتراضية نظيفة تناسب theme.mode الذي اخترته.
onAuth — يُنادى ومعه سجل العميل مباشرة بعد تسجيل دخوله أو إنشاء حسابه أو انتهائه من تعيين كلمة مرور عبر رابط مطالبة.
copy — تجاوز أي نص مدمج في الصندوق حسب المفتاح، مثل { loginButton: 'Sign me in', signupButton: 'Join now' }.

حين لا تكون «حسابات العملاء» مفعّلة

إن لم تكن «حسابات العملاء» مفعّلة في المشروع، عرض الصندوق رسالة هادئة تقول "Accounts aren't available here yet" بدل نموذج معطوب — فهو لا يفشل بصخب أبدًا. وإن رأيت هذا وكنت تتوقع أن يعمل صندوق تسجيل الدخول، فاطلب منا تفعيل «حسابات العملاء» لمشروعك.

→ السابقالحجوزات والمطالبة بالحساب التالي ←الباقات