वेब ऐप्स में OpenID कनेक्ट का उपयोग करके प्रमाणित करें

यदि आपने आइडेंटिटी प्लेटफ़ॉर्म के साथ फ़ायरबेस प्रमाणीकरण में अपग्रेड किया है, तो आप अपनी पसंद के ओपनआईडी कनेक्ट (ओआईडीसी) अनुरूप प्रदाता का उपयोग करके फ़ायरबेस के साथ अपने उपयोगकर्ताओं को प्रमाणित कर सकते हैं। इससे उन पहचान प्रदाताओं का उपयोग करना संभव हो जाता है जो मूल रूप से फायरबेस द्वारा समर्थित नहीं हैं।

शुरू करने से पहले

OIDC प्रदाता का उपयोग करने वाले उपयोगकर्ताओं को साइन इन करने के लिए, आपको पहले प्रदाता से कुछ जानकारी एकत्र करनी होगी:

• क्लाइंट आईडी : प्रदाता के लिए अद्वितीय एक स्ट्रिंग जो आपके ऐप की पहचान करती है। आपका प्रदाता आपके द्वारा समर्थित प्रत्येक प्लेटफ़ॉर्म के लिए आपको एक अलग क्लाइंट आईडी निर्दिष्ट कर सकता है। यह आपके प्रदाता द्वारा जारी आईडी टोकन में aud दावे के मूल्यों में से एक है।

• क्लाइंट रहस्य : एक गुप्त स्ट्रिंग जिसका उपयोग प्रदाता क्लाइंट आईडी के स्वामित्व की पुष्टि करने के लिए करता है। प्रत्येक क्लाइंट आईडी के लिए, आपको एक मेल खाते क्लाइंट सीक्रेट की आवश्यकता होगी। (यह मान केवल तभी आवश्यक है जब आप ऑथ कोड प्रवाह का उपयोग कर रहे हैं, जिसकी दृढ़ता से अनुशंसा की जाती है।)

• जारीकर्ता : एक स्ट्रिंग जो आपके प्रदाता की पहचान करती है। यह मान एक URL होना चाहिए, जो /.well-known/openid-configuration के साथ जोड़े जाने पर, प्रदाता के OIDC खोज दस्तावेज़ का स्थान हो। उदाहरण के लिए, यदि जारीकर्ता https://auth.example.com है, तो खोज दस्तावेज़ https://auth.example.com/.well-known/openid-configuration पर उपलब्ध होना चाहिए।

उपरोक्त जानकारी प्राप्त करने के बाद, अपने फायरबेस प्रोजेक्ट के लिए साइन-इन प्रदाता के रूप में ओपनआईडी कनेक्ट को सक्षम करें:

1. अपने जावास्क्रिप्ट प्रोजेक्ट में फायरबेस जोड़ें ।

2. यदि आपने आइडेंटिटी प्लेटफ़ॉर्म के साथ फ़ायरबेस प्रमाणीकरण में अपग्रेड नहीं किया है, तो ऐसा करें। ओपनआईडी कनेक्ट प्रमाणीकरण केवल उन्नत परियोजनाओं में उपलब्ध है।

3. फायरबेस कंसोल के साइन-इन प्रदाता पृष्ठ पर, नया प्रदाता जोड़ें पर क्लिक करें और फिर ओपनआईडी कनेक्ट पर क्लिक करें।

4. चुनें कि आप प्राधिकरण कोड प्रवाह का उपयोग करेंगे या अंतर्निहित अनुदान प्रवाह का ।

   यदि आपका प्रदाता इसका समर्थन करता है तो आपको हमेशा कोड प्रवाह का उपयोग करना चाहिए । अंतर्निहित प्रवाह कम सुरक्षित है और इसका उपयोग करने को दृढ़ता से हतोत्साहित किया जाता है।

5. इस प्रदाता को एक नाम दें. जनरेट की गई प्रदाता आईडी पर ध्यान दें: oidc.example-provider जैसा कुछ। जब आप अपने ऐप में साइन-इन कोड जोड़ेंगे तो आपको इस आईडी की आवश्यकता होगी।

6. अपनी क्लाइंट आईडी और क्लाइंट सीक्रेट, और अपने प्रदाता की जारीकर्ता स्ट्रिंग निर्दिष्ट करें। ये मान आपके प्रदाता द्वारा आपको दिए गए मानों से बिल्कुल मेल खाने चाहिए।

7. अपने परिवर्तन सहेजें.

फायरबेस एसडीके के साथ साइन-इन प्रवाह को संभालें

अपने ओआईडीसी प्रदाता का उपयोग करके अपने उपयोगकर्ताओं को फायरबेस के साथ प्रमाणित करने का सबसे आसान तरीका फायरबेस एसडीके के साथ पूरे साइन-इन प्रवाह को संभालना है।

फायरबेस जावास्क्रिप्ट एसडीके के साथ साइन-इन प्रवाह को संभालने के लिए, इन चरणों का पालन करें:

1. फायरबेस कंसोल में प्राप्त प्रदाता आईडी का उपयोग करके OAuthProvider का एक उदाहरण बनाएं।

   वेब मॉड्यूलर एपीआई

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('oidc.example-provider');
   

   वेब नेमस्पेस्ड एपीआई

   var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
   

2. वैकल्पिक : अतिरिक्त कस्टम OAuth पैरामीटर निर्दिष्ट करें जिन्हें आप OAuth अनुरोध के साथ भेजना चाहते हैं।

   वेब मॉड्यूलर एपीआई

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: 'user@example.com'
   });
   

   वेब नेमस्पेस्ड एपीआई

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: 'user@example.com'
   });
   

   अपने प्रदाता से उन मापदंडों की जांच करें जिनका वह समर्थन करता है। ध्यान दें कि आप setCustomParameters के साथ Firebase-आवश्यक पैरामीटर पास नहीं कर सकते। ये पैरामीटर client_id , response_type , redirect_uri , state , scope और response_mode ।

3. वैकल्पिक : मूल प्रोफ़ाइल से परे अतिरिक्त OAuth 2.0 स्कोप निर्दिष्ट करें जिसे आप प्रमाणीकरण प्रदाता से अनुरोध करना चाहते हैं।

   वेब मॉड्यूलर एपीआई

   provider.addScope('mail.read');
   provider.addScope('calendars.read');
   

   वेब नेमस्पेस्ड एपीआई

   provider.addScope('mail.read');
   provider.addScope('calendars.read');
   

   अपने प्रदाता से यह जानने के लिए संपर्क करें कि वह किन क्षेत्रों का समर्थन करता है।

4. OAuth प्रदाता ऑब्जेक्ट का उपयोग करके फ़ायरबेस से प्रमाणित करें।

   आप या तो उपयोगकर्ता को प्रदाता के साइन-इन पेज पर रीडायरेक्ट कर सकते हैं या पॉप-अप ब्राउज़र विंडो में साइन-इन पेज खोल सकते हैं।

   पुनर्निर्देशित प्रवाह

   signInWithRedirect() पर कॉल करके प्रदाता साइन-इन पेज पर रीडायरेक्ट करें:

   वेब मॉड्यूलर एपीआई

   import { getAuth, signInWithRedirect } from "firebase/auth";
   
   const auth = getAuth();
   signInWithRedirect(auth, provider);
   

   वेब नेमस्पेस्ड एपीआई

   firebase.auth().signInWithRedirect(provider);
   

   उपयोगकर्ता द्वारा साइन-इन पूरा करने और आपके ऐप पर लौटने के बाद, आप getRedirectResult() पर कॉल करके साइन-इन परिणाम प्राप्त कर सकते हैं।

   वेब मॉड्यूलर एपीआई

   import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
       // IdP data available in result.additionalUserInfo.profile.
   
       // Get the OAuth access token and ID Token
       const credential = OAuthProvider.credentialFromResult(result);
       const accessToken = credential.accessToken;
       const idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   

   वेब नेमस्पेस्ड एपीआई

   firebase.auth().getRedirectResult()
     .then((result) => {
       // IdP data available in result.additionalUserInfo.profile.
       // ...
   
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // OAuth access and id tokens can also be retrieved:
       var accessToken = credential.accessToken;
       var idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   

   पॉप-अप प्रवाह

   वेब मॉड्यूलर एपीआई

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
       // IdP data available using getAdditionalUserInfo(result)
   
       // Get the OAuth access token and ID Token
       const credential = OAuthProvider.credentialFromResult(result);
       const accessToken = credential.accessToken;
       const idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   

   वेब नेमस्पेस्ड एपीआई

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // IdP data available in result.additionalUserInfo.profile.
       // ...
   
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // OAuth access and id tokens can also be retrieved:
       var accessToken = credential.accessToken;
       var idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   

5. जबकि उपरोक्त उदाहरण साइन-इन प्रवाह पर ध्यान केंद्रित करते हैं, आप linkWithRedirect() और linkWithPopup() का उपयोग करके OIDC प्रदाता को मौजूदा उपयोगकर्ता से लिंक करने के लिए उसी पैटर्न का उपयोग कर सकते हैं, और reauthenticateWithRedirect() और reauthenticateWithPopup() के साथ उपयोगकर्ता को फिर से प्रमाणित कर सकते हैं। जिसका उपयोग उन संवेदनशील परिचालनों के लिए ताज़ा क्रेडेंशियल प्राप्त करने के लिए किया जा सकता है जिनके लिए हाल ही में लॉगिन की आवश्यकता होती है।

साइन-इन प्रवाह को मैन्युअल रूप से संभालें

यदि आपने अपने ऐप में ओपनआईडी कनेक्ट साइन-इन प्रवाह पहले ही लागू कर दिया है, तो आप फायरबेस के साथ प्रमाणित करने के लिए सीधे आईडी टोकन का उपयोग कर सकते हैं:

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });