साइन-इन बटन वह पहली चीज़ है जिसे नया उपयोगकर्ता छूता है, इसलिए उसे आपके डिज़ाइन में सही दिखना चाहिए, कीबोर्ड से काम करना चाहिए, अरबी में सही पढ़ा जाना चाहिए और सर्वर पर बिना झिलमिलाहट के रेंडर होना चाहिए। @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 कभी ब्राउज़र तक नहीं पहुँचता।
चरण-दर-चरण बटन जोड़ें
npm install @posty5/oauth-angularसे पैकेज इंस्टॉल करें। यह Angular 17.3 से 20 तक सपोर्ट करता है।- अपने application config में चुने गए मोड के साथ providePosty5Auth को कॉल करें।
- जहाँ इस्तेमाल करना हो वहाँ Posty5SignInButtonComponent इम्पोर्ट करें और posty5SignInButton attribute को एक असली button element पर लगाएँ, ताकि फ़ॉर्म, फ़ोकस और कीबोर्ड सामान्य रूप से काम करें।
- codeHandler और browser मोड के लिए, अपने redirect URI को एक lazy पेज पर route करें जिसमें posty5Callback component हो, और उसके signedIn और failed events पर नेविगेट करें।
- एक बार खुद साइन इन करें और जाँचें कि आप उसी पेज पर वापस पहुँचते हैं जहाँ से शुरू किया था।
// 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>पैकेज लें और अपना ऐप रजिस्टर करें
Posty5 Studio में एक OAuth ऐप रजिस्टर करें, फिर @posty5/oauth-angular इंस्टॉल करें और बटन को अपने साइन-इन पेज पर लगा दें।
इसे अपने डिज़ाइन के अनुसार ढालें
- 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 को प्राथमिकता दें।
अक्सर पूछे जाने वाले सवाल
Angular के कौन-से वर्ज़न सपोर्ट होते हैं?
Angular 17.3 से 20। पैकेज standalone APIs, signals और OnPush इस्तेमाल करता है।
क्या मुझे बैक एंड चाहिए?
browser मोड के साथ नहीं, लेकिन OAuth ऐप को ब्राउज़र साइन-इन की अनुमति देनी होगी और आपकी साइट का origin सूचीबद्ध करना होगा। बैक एंड होने पर startUrl या codeHandler secret और session को आपके सर्वर पर रखते हैं।
क्या मैं बटन का टेक्स्ट बदल सकता हूँ?
हाँ। text से चार बिल्ट-इन टेक्स्ट में से एक चुनें, label से उसे बदलें, या labels कॉन्फ़िगरेशन में हर भाषा के लिए अपने टेक्स्ट जोड़ें।
क्या यह server-side rendering के साथ काम करता है?
हाँ। हर browser API सुरक्षित रूप से जाँचा जाता है, सर्वर सामान्य बटन रेंडर करता है, और व्यक्तिगत बटन व callback केवल ब्राउज़र में शुरू होते हैं।
जब उपयोगकर्ता Posty5 पर Cancel चुनता है तो क्या होता है?
callback cancelled code के साथ fail होता है, इसलिए आप उपयोगकर्ता को अपने साइन-इन पेज पर वापस भेज सकते हैं।
