سائن ان بٹن وہ پہلی چیز ہے جسے نیا صارف چھوتا ہے، اس لیے اسے آپ کے ڈیزائن میں درست دکھنا چاہیے، کی بورڈ سے کام کرنا چاہیے، عربی میں صحیح پڑھا جانا چاہیے اور سرور پر بغیر جھلملاہٹ کے رینڈر ہونا چاہیے۔ @posty5/oauth-angular کسی Angular ایپ کو یہ سب خوبیاں رکھنے والا ایک تیار Continue with Posty5 بٹن دیتا ہے، ساتھ ہی اس کے پیچھے کا سائن ان فلو بھی۔

یہ گائیڈ آپ کو انسٹالیشن سے لے کر ایک کام کرتے، اسٹائل شدہ بٹن تک لے جاتی ہے۔ یہ فرض کرتی ہے کہ آپ نے اپنی ویب سائٹ یا ایپ میں Posty5 کے ساتھ لاگ ان شامل کریں میں بیان کردہ طریقے سے ایک OAuth ایپ رجسٹر کر لی ہے، اور یہ API کلید اور SDK گائیڈ میں بیان کردہ ڈویلپر پلیٹ فارم کا حصہ ہے۔

پہلے ایک موڈ منتخب کریں

• startUrl - آپ کا بیک اینڈ پہلے سے سائن ان چلاتا ہے، مثلاً @posty5/oauth کے ساتھ۔ بٹن صرف آپ کا start پتہ کھولتا ہے۔ یہ تجویز کردہ موڈ ہے، اور Trend Digest بھی یہی استعمال کرتا ہے۔
• codeHandler - پیکج براؤزر میں PKCE شروع کرتا ہے اور code آپ کے بیک اینڈ کو بھیجتا ہے، جو client secret کے ساتھ اس کا تبادلہ کرتا ہے۔
• browser - کوئی بیک اینڈ نہیں۔ پیکج public client کے طور پر code کا تبادلہ کرتا ہے اور WebCrypto سے ID ٹوکن کی تصدیق کرتا ہے۔ OAuth ایپ کو آپ کی سائٹ کے origin سے براؤزر سائن ان کی اجازت دینی ہوگی۔

ہر موڈ میں client secret کبھی براؤزر تک نہیں پہنچتا۔

مرحلہ وار بٹن شامل کریں

1. npm install @posty5/oauth-angular سے پیکج انسٹال کریں۔ یہ Angular 17.3 سے 20 تک سپورٹ کرتا ہے۔
2. اپنی application config میں منتخب کردہ موڈ کے ساتھ providePosty5Auth کو کال کریں۔
3. جہاں استعمال کرنا ہو وہاں Posty5SignInButtonComponent امپورٹ کریں اور posty5SignInButton attribute کو ایک حقیقی button عنصر پر لگائیں، تاکہ فارمز، فوکس اور کی بورڈ معمول کے مطابق کام کریں۔
4. codeHandler اور browser موڈز کے لیے، اپنے redirect URI کو ایک lazy صفحے پر route کریں جس میں posty5Callback کمپوننٹ ہو، اور اس کے signedIn اور failed events پر نیویگیٹ کریں۔
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 - Continue with Posty5، Sign in with Posty5، Sign up with Posty5 یا Sign in؛ 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;
}

بلٹ اِن اسٹائلز کی specificity صفر ہے، اس لیے آپ کا کوئی بھی اصول !important کے بغیر غالب آ جاتا ہے، اور ہر رنگ اور سائز ایک CSS custom property ہے۔ عربی بٹن خود بخود دائیں سے بائیں ترتیب پاتے ہیں، اور Posty5 ہمیشہ لاطینی رسم الخط میں لکھا جاتا ہے۔

واپس آنے والے صارفین کو نام سے خوش آمدید کہیں

سائن ان کے بعد بٹن صارف کی تصویر، اس کے نام کے ساتھ Continue as اور جزوی طور پر چھپی ای میل دکھا سکتا ہے - دوسرے سائن ان فراہم کنندگان کے ذاتی نوعیت کے بٹنوں کی طرح۔ browser موڈ میں یہ خود بخود ہوتا ہے؛ دوسرے موڈز میں اپنے بیک اینڈ کی واپس کردہ معلومات کے ساتھ rememberUser کال کریں، اور سائن آؤٹ پر forgetUser۔

یاد رکھا گیا صارف صرف نام، ایک HTTPS تصویر کا پتہ اور جزوی طور پر چھپی ای میل رکھتا ہے - کوئی ٹوکن نہیں۔ ذاتی نوعیت کا بٹن صرف hydration کے بعد ظاہر ہوتا ہے، اس لیے سرور پر رینڈر ہونے والا HTML کبھی بے میل نہیں ہوتا۔

جاننے کی اہم باتیں

• پیکج server-side rendering کے ساتھ محفوظ ہے: سرور پر بٹن اپنا عام متن دکھاتا ہے، اور سائن ان وہاں کبھی نہیں چلتا۔
• یہ fetch کے ذریعے Posty5 کو کال کرتا ہے، اس لیے آپ کے HTTP interceptors کبھی Posty5 کے endpoints پر آپ کا اپنا Authorization header شامل نہیں کرتے۔
• زیر التوا سائن ان ایک ٹیب کے لیے session storage میں رہتا ہے اور 10 منٹ بعد ختم ہو جاتا ہے۔
• browser موڈ میں ٹوکنز memory میں رکھیں۔ طویل sessions کے لیے HttpOnly cookie کے ساتھ startUrl یا codeHandler کو ترجیح دیں۔

اکثر پوچھے جانے والے سوالات