زر تسجيل الدخول هو أول ما يلمسه المستخدم الجديد، لذا يجب أن يبدو مناسبًا لتصميمك، وأن يعمل بلوحة المفاتيح، وأن يُقرأ بشكل صحيح بالعربية، وأن يُعرض على الخادم دون وميض. تمنح حزمة @posty5/oauth-angular تطبيق Angular زر المتابعة باستخدام Posty5 جاهزًا بكل ذلك، مع تدفق تسجيل الدخول الذي يقف خلفه.

يأخذك هذا الدليل من التثبيت إلى زر يعمل ومنسّق. ويفترض أنك سجّلت تطبيق OAuth كما هو موضّح في أضف تسجيل الدخول عبر Posty5 إلى موقعك أو تطبيقك، وهو جزء من منصة المطورين في دليل مفاتيح API وحزم SDK.

اختر الوضع أولًا

• startUrl - خادمك الخلفي ينفّذ تسجيل الدخول بالفعل، مثلًا باستخدام @posty5/oauth. ولا يفعل الزر سوى فتح عنوان البداية لديك. وهو الوضع الموصى به، والذي يستخدمه Trend Digest.
• codeHandler - تبدأ الحزمة PKCE في المتصفح وترسل الرمز إلى خادمك الخلفي، الذي يستبدله بالمفتاح السري.
• browser - دون خادم خلفي. تستبدل الحزمة الرمز كعميل عام وتتحقّق من رمز الهوية باستخدام WebCrypto. ويجب أن يسمح تطبيق OAuth بتسجيل الدخول من المتصفح من مصدر موقعك.

في كل الأوضاع لا يصل المفتاح السري إلى المتصفح أبدًا.

أضف الزر خطوة بخطوة

1. ثبّت الحزمة باستخدام npm install @posty5/oauth-angular. وهي تدعم Angular من 17.3 إلى 20.
2. استدعِ providePosty5Auth في إعدادات التطبيق مع الوضع الذي اخترته.
3. استورد Posty5SignInButtonComponent حيث تستخدمه وضع الخاصية posty5SignInButton على عنصر زر حقيقي، لتعمل النماذج والتركيز ولوحة المفاتيح كالمعتاد.
4. في وضعي codeHandler وbrowser، وجّه رابط إعادة التوجيه إلى صفحة تُحمَّل عند الطلب تحتوي على مكوّن posty5Callback، وانتقل عند حدثي signedIn وfailed.
5. سجّل الدخول بنفسك مرة وتأكّد من أنك تعود إلى الصفحة التي بدأت منها.

// app.config.ts
import { providePosty5Auth } from "@posty5/oauth-angular";

export const appConfig = {
  providers: [
    providePosty5Auth({
      mode: "startUrl",
      startUrl: "/api/auth/posty5/start",
    }),
  ],
};

<button posty5SignInButton theme="outline" shape="pill" [width]="320" returnUrl="/dashboard"></button>

اجعله مطابقًا لتصميمك

• theme - filled (أزرق Posty5) أو outline (أبيض) أو filledDark للصفحات الداكنة.
• size - large أو medium أو small، وshape - rectangular أو pill أو circle أو square (الشعار فقط).
• text - المتابعة باستخدام Posty5 أو تسجيل الدخول باستخدام Posty5 أو إنشاء حساب باستخدام Posty5 أو تسجيل الدخول، ويستبدله label بالكامل.
• logoAlignment وwidth وlocale لكل زر، وunstyled عندما تريد تنسيق كل شيء بنفسك.

.login-card .posty5-btn {
  --posty5-btn-radius: 9999px;
  --posty5-btn-font-family: "Cairo", sans-serif;
  --posty5-btn-hover-bg: #1a6bff;
}

أولوية التنسيقات المدمجة صفر، لذا تتغلّب أي قاعدة تكتبها دون !important، وكل لون وحجم هو خاصية CSS مخصّصة. وتُعرض الأزرار العربية من اليمين إلى اليسار تلقائيًا، ويُكتب Posty5 دائمًا بالحروف اللاتينية.

رحّب بالمستخدمين العائدين بأسمائهم

بعد تسجيل الدخول، يمكن للزر عرض صورة المستخدم، والمتابعة باسمه، وبريده الإلكتروني مع إخفاء جزء منه - مثل الأزرار المخصّصة لدى مزوّدي تسجيل الدخول الآخرين. يحدث ذلك تلقائيًا في وضع browser، أما في الوضعين الآخرين فاستدعِ rememberUser بما أرجعه خادمك الخلفي، وforgetUser عند تسجيل الخروج.

لا يحمل المستخدم المحفوظ إلا الاسم وعنوان صورة HTTPS والبريد الإلكتروني مع إخفاء جزء منه - دون أي رموز. ولا يظهر الزر المخصّص إلا بعد اكتمال التحميل في المتصفح، فلا يختلف أبدًا عن HTML المعروض من الخادم.

معلومات مفيدة

• الحزمة آمنة مع العرض من جهة الخادم: على الخادم يعرض الزر نصه العام، ولا يعمل تسجيل الدخول هناك أبدًا.
• تستدعي Posty5 باستخدام fetch، لذا لا تضيف المعترضات لديك ترويسة Authorization الخاصة بك إلى نقاط Posty5 أبدًا.
• يُحفظ تسجيل الدخول المعلّق في تخزين الجلسة لتبويب واحد، وتنتهي صلاحيته بعد 10 دقائق.
• في وضع browser احتفظ بالرموز في الذاكرة. وللجلسات الطويلة فضّل startUrl أو codeHandler مع ملف تعريف ارتباط HttpOnly.

الأسئلة الشائعة