Frontend Academy · पाठ

फ्रंटएंड से OAuth प्रवाह

SPA में PKCE के साथ Authorization Code प्रवाह लागू करें, कोड को टोकन में बदलें, एक्सेस टोकन सुरक्षित रूप से संग्रहीत करें, और implicit प्रवाह से बचें।

पाठ 4, कुल 4 में से15 चरण

फ्रंटएंड से OAuth प्रवाह, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

OAuth क्या है

OAuth 2.0 एक प्रतिनिधि-अधिकार प्रोटोकॉल है: आपका ऐप उपयोगकर्ता का पासवर्ड देखे बिना किसी तृतीय-पक्ष सेवा (Google, GitHub आदि) पर उपयोगकर्ता की ओर से कार्य करने की अनुमति प्राप्त करता है। इसका उपयोग 'Google से साइन इन करें', GitHub OAuth ऐप और अधिकांश आधुनिक प्रमाणीकरण प्रणालियों में होता है।

मुख्य भूमिकाएँ

संसाधन स्वामी: उपयोगकर्ता। क्लाइंट: आपका ऐप। प्राधिकरण सर्वर: OAuth प्रदाता (Google, Auth0)। संसाधन सर्वर: access token द्वारा सुरक्षित API।

प्राधिकरण कोड प्रवाह

सर्वर-साइड ऐप के लिए मानक और सुरक्षित प्रवाह: 1) उपयोगकर्ता को प्रदाता के लॉगिन पर भेजें। 2) उपयोगकर्ता लॉग इन करके सहमति देता है। 3) प्रदाता एक कोड के साथ वापस भेजता है। 4) सर्वर कोड के बदले access token प्राप्त करता है (केवल सर्वर के लिए गुप्त मान)।

SPA के लिए PKCE क्यों

SPA क्लाइंट सीक्रेट सुरक्षित नहीं रख सकते (वह ब्राउज़र बंडल में होगा)। PKCE (कोड के आदान-प्रदान के लिए प्रमाण कुंजी) उस सीक्रेट के स्थान पर हर अनुरोध के लिए अलग code verifier/challenge का उपयोग करता है। अब यह सभी OAuth सार्वजनिक क्लाइंट के लिए मानक है।

PKCE प्रवाह चरण-दर-चरण

1) एक यादृच्छिक code_verifier बनाएँ। 2) उसका SHA-256 हैश निकालें = code_challenge। 3) challenge के साथ /authorize पर भेजें। 4) सहमति के बाद एक कोड वापस प्राप्त करें। 5) access token के लिए कोड + verifier का आदान-प्रदान करें। प्रदाता जाँचता है कि challenge = hash(verifier) है।

कोड वेरिफ़ायर और challenge बनाना

verifier एक यादृच्छिक स्ट्रिंग है; challenge उसके SHA-256 का base64-URL-encoded रूप है।

function base64url(arr) {
  return btoa(String.fromCharCode(...arr))
    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

async function generatePKCE() {
  const arr = new Uint8Array(32);
  crypto.getRandomValues(arr);
  const verifier = base64url(arr);
  const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier));
  const challenge = base64url(new Uint8Array(hash));
  return { verifier, challenge };
}

प्रदाता पर भेजना

challenge, state (CSRF सुरक्षा) और दायरों के साथ authorize URL बनाएँ।

const { verifier, challenge } = await generatePKCE();
const state = crypto.randomUUID();
sessionStorage.setItem('pkce_verifier', verifier);
sessionStorage.setItem('oauth_state', state);

const url = new URL('https://accounts.google.com/o/oauth2/v2/auth');
url.searchParams.set('client_id', CLIENT_ID);
url.searchParams.set('redirect_uri', `${origin}/auth/callback`);
url.searchParams.set('response_type', 'code');
url.searchParams.set('scope', 'openid email profile');
url.searchParams.set('code_challenge', challenge);
url.searchParams.set('code_challenge_method', 'S256');
url.searchParams.set('state', state);

window.location.href = url.toString();

कॉलबैक संभालना

प्रदाता आपके कॉलबैक URL पर ?code=...&state=... के साथ वापस भेजता है। CSRF रोकने के लिए state सत्यापित करें, फिर कोड का आदान-प्रदान करें।

// /auth/callback page:
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const returnedState = params.get('state');
const expected = sessionStorage.getItem('oauth_state');
if (returnedState !== expected) throw new Error('Bad state');

const verifier = sessionStorage.getItem('pkce_verifier');

const tokens = await fetch('https://oauth2.googleapis.com/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    code,
    client_id: CLIENT_ID,
    redirect_uri: `${origin}/auth/callback`,
    code_verifier: verifier
  })
}).then(r => r.json());
// tokens: { access_token, id_token, refresh_token, expires_in }

टोकन को सुरक्षित रूप से संग्रहीत करना

सर्वोत्तम प्रथा: access tokens को localStorage में संग्रहीत न करें (XSS से चोरी हो सकते हैं)। विकल्प: 1) केवल मेमोरी में रखें (रिफ़्रेश पर मिट जाते हैं—फिर से प्रमाणीकरण आवश्यक)। 2) HttpOnly कुकी (PKCE प्रवाह के बाद आपका बैकएंड सेट करे, JS इसे चुरा नहीं सकता)।

Implicit प्रवाह से बचें

पुराना Implicit प्रवाह access token को सीधे URL फ़्रैगमेंट में लौटाता है। OAuth 2.0 सुरक्षा BCP द्वारा इसे अप्रचलित घोषित किया गया है—इससे टोकन ब्राउज़र इतिहास और रेफ़रर में लीक हो जाते हैं। हमेशा Authorization Code + PKCE का उपयोग करें।

रिफ़्रेश टोकन

Access tokens की समय-सीमा समाप्त हो जाती है (आमतौर पर 1 घंटे में)। अधिक समय तक चलने वाला refresh token चुपचाप नए access tokens प्राप्त करता है। SPA के लिए refresh tokens अब बढ़ते हुए HttpOnly कुकीज़ के माध्यम से दिए जा रहे हैं—कभी भी localStorage में नहीं।

ID Tokens बनाम Access Tokens

ID token (OpenID Connect): उपयोगकर्ता की पहचान सिद्ध करने वाला JWT। Access token: अपारदर्शी या JWT, जिसका उपयोग API कॉल करने के लिए होता है। भरोसा करने से पहले ID token के हस्ताक्षर और दावों (iss, aud, exp, nonce) को सत्यापित करें।

प्रमाणीकरण लाइब्रेरी

अपना समाधान खुद न बनाएँ। उपयोग करें: कच्चे OIDC के लिए oidc-client-ts, Auth0 के लिए auth0/spa-js, Clerk के लिए @clerk/clerk-react, Next के लिए NextAuth.js/Auth.js, और Nuxt के लिए Nuxt-auth। ये PKCE, रिफ़्रेश और संग्रहण संभालती हैं।

त्वरित जाँच

Single-Page Applications को केवल मूल Authorization Code प्रवाह के बजाय Authorization Code प्रवाह के साथ PKCE (कोड के आदान-प्रदान के लिए प्रमाण कुंजी) का उपयोग क्यों करना चाहिए?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: फ़्रंटएंड में OAuth

SPA के लिए Authorization Code + PKCE आधुनिक मानक है। हर अनुरोध के लिए verifier + S256 challenge बनाएँ। challenge + state के साथ /authorize पर भेजें। कॉलबैक पर state सत्यापित करें। टोकन के लिए कोड + verifier का आदान-प्रदान करें। Implicit प्रवाह का उपयोग कभी न करें। टोकन संग्रहण के लिए HttpOnly कुकी को प्राथमिकता दें। लाइब्रेरी (auth0-spa-js, oidc-client-ts, NextAuth) का उपयोग करें—अपना समाधान खुद न बनाएँ।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “फ्रंटएंड से OAuth प्रवाह” पाठ निःशुल्क है?

हाँ—“फ्रंटएंड से OAuth प्रवाह” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“फ्रंटएंड से OAuth प्रवाह” में मैं क्या सीखूँगा?

SPA में PKCE के साथ Authorization Code प्रवाह लागू करें, कोड को टोकन में बदलें, एक्सेस टोकन सुरक्षित रूप से संग्रहीत करें, और implicit प्रवाह से बचें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“फ्रंटएंड से OAuth प्रवाह” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Frontend Academy पर वापस जाएँ