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

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

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

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

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

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

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

आपके पास उपरोक्त जानकारी होने के बाद, OpenID Connect को अपने Firebase प्रोजेक्ट के लिए साइन-इन प्रदाता के रूप में सक्षम करें:

1. अपने JavaScript प्रोजेक्ट में Firebase जोड़ें ।

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

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

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

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

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

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

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

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

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

Firebase JavaScript SDK के साथ साइन-इन प्रवाह को प्रबंधित करने के लिए, इन चरणों का पालन करें:

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. जबकि उपरोक्त उदाहरण साइन-इन प्रवाह पर ध्यान केंद्रित करते हैं, आप एक OIDC प्रदाता को मौजूदा उपयोगकर्ता से लिंक करने के लिए linkWithRedirect() और linkWithPopup() का उपयोग करके एक ही पैटर्न का उपयोग कर सकते हैं, और एक उपयोगकर्ता को 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.
    });