সাইন-ইন বোতাম হলো নতুন ব্যবহারকারীর ছোঁয়া প্রথম জিনিস, তাই এটিকে আপনার ডিজাইনে মানানসই দেখাতে হবে, কিবোর্ড দিয়ে কাজ করতে হবে, আরবিতে ঠিকভাবে পড়া যেতে হবে এবং সার্ভারে ঝলকানি ছাড়াই রেন্ডার হতে হবে। @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 অ্যাট্রিবিউটটি একটি আসল button এলিমেন্টে বসান, যাতে ফর্ম, ফোকাস ও কিবোর্ড স্বাভাবিকভাবে কাজ করে।
4. codeHandler ও browser মোডে আপনার redirect URI-কে একটি lazy পেজে route করুন, যেখানে 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 - 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-তে রাখুন। দীর্ঘ session-এর জন্য HttpOnly cookie-সহ startUrl বা codeHandler বেছে নিন।

সাধারণ জিজ্ঞাসা