जावास्क्रिप्ट के साथ Yahoo का उपयोग करके प्रमाणित करें

आप अपने उपयोगकर्ताओं को याहू जैसे OAuth प्रदाताओं का उपयोग करके अपने ऐप में सामान्य OAuth लॉगिन को एकीकृत करके Firebase SDK का उपयोग करके शुरू से अंत तक साइन-इन प्रवाह को पूरा करने के लिए Firebase के साथ प्रमाणित करने दे सकते हैं।

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

Yahoo खातों का उपयोग करने वाले उपयोगकर्ताओं में साइन इन करने के लिए, आपको पहले Yahoo को अपने Firebase प्रोजेक्ट के लिए साइन-इन प्रदाता के रूप में सक्षम करना होगा:

  1. अपने JavaScript प्रोजेक्ट में Firebase जोड़ें .
  2. फायरबेस कंसोल में, प्रामाणिक अनुभाग खोलें।
  3. साइन इन विधि टैब पर, Yahoo प्रदाता को सक्षम करें।
  4. प्रदाता के कॉन्फ़िगरेशन में उस प्रदाता के डेवलपर कंसोल से क्लाइंट आईडी और क्लाइंट सीक्रेट जोड़ें:
    1. Yahoo OAuth क्लाइंट को पंजीकृत करने के लिए, Yahoo के साथ वेब एप्लिकेशन पंजीकृत करने पर Yahoo डेवलपर दस्तावेज़ का पालन करें।

      दो OpenID Connect API अनुमतियों का चयन करना सुनिश्चित करें: profile और email

    2. इन प्रदाताओं के साथ ऐप्स पंजीकृत करते समय, अपने प्रोजेक्ट के लिए *.firebaseapp.com डोमेन को अपने ऐप के रीडायरेक्ट डोमेन के रूप में पंजीकृत करना सुनिश्चित करें।
  5. सहेजें क्लिक करें.

Firebase SDK के साथ साइन-इन प्रवाह को प्रबंधित करें

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

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

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

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');

    Web version 8

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. वैकल्पिक : अतिरिक्त कस्टम OAuth पैरामीटर निर्दिष्ट करें जिन्हें आप OAuth अनुरोध के साथ भेजना चाहते हैं।

    Web version 9

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Web version 8

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Yahoo द्वारा समर्थित पैरामीटर के लिए, Yahoo OAuth दस्तावेज़ीकरण देखें। ध्यान दें कि आप setCustomParameters() के साथ Firebase-आवश्यक पैरामीटर पास नहीं कर सकते। ये पैरामीटर हैं client_id , redirect_uri , response_type , scope और State

  3. वैकल्पिक : profile और email से परे अतिरिक्त OAuth 2.0 स्कोप निर्दिष्ट करें जिसका आप प्रमाणीकरण प्रदाता से अनुरोध करना चाहते हैं। यदि आपके एप्लिकेशन को Yahoo API से निजी उपयोगकर्ता डेटा तक पहुंच की आवश्यकता है, तो आपको Yahoo डेवलपर कंसोल में API अनुमतियों के अंतर्गत Yahoo API के लिए अनुमतियों का अनुरोध करने की आवश्यकता होगी। अनुरोधित OAuth स्कोप ऐप की API अनुमतियों में पूर्व-कॉन्फ़िगर किए गए स्कोप से सटीक रूप से मेल खाने चाहिए। उदाहरण के लिए, यदि उपयोगकर्ता संपर्कों को पढ़ने/लिखने का अनुरोध किया गया है और ऐप की एपीआई अनुमतियों में पूर्व-कॉन्फ़िगर किया गया है, sdct-w को केवल पढ़ने के लिए OAuth स्कोप sdct-r के बजाय पास करना होगा। अन्यथा, प्रवाह विफल हो जाएगा और अंतिम उपयोगकर्ता को एक त्रुटि दिखाई जाएगी।

    Web version 9

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    Web version 8

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    अधिक जानने के लिए, Yahoo स्कोप दस्तावेज़ीकरण देखें।

  4. OAuth प्रदाता ऑब्जेक्ट का उपयोग करके Firebase से प्रमाणित करें। आप या तो पॉप-अप विंडो खोलकर या साइन-इन पेज पर रीडायरेक्ट करके अपने उपयोगकर्ताओं को उनके Yahoo खातों से साइन इन करने के लिए कह सकते हैं। मोबाइल उपकरणों पर रीडायरेक्ट विधि को प्राथमिकता दी जाती है।

    • पॉप-अप विंडो से साइन इन करने के लिए, signInWithPopup पर कॉल करें:

      Web version 9

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

      Web version 8

      firebase.auth().signInWithPopup(provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          /** @type {firebase.auth.OAuthCredential} */
          const credential = result.credential;
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          var accessToken = credential.accessToken;
          var idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
    • साइन-इन पृष्ठ पर रीडायरेक्ट करके साइन इन करने के लिए, signInWithRedirect पर कॉल करें:

      firebase.auth().signInWithRedirect(provider);
      

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

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);

    सफलतापूर्वक पूरा होने पर, प्रदाता से जुड़े OAuth आईडी टोकन और एक्सेस टोकन को firebase.auth.UserCredential ऑब्जेक्ट से पुनर्प्राप्त किया जा सकता है।

    OAuth पहुंच टोकन का उपयोग करके, आप Yahoo API को कॉल कर सकते हैं।

    उदाहरण के लिए, मूल प्रोफ़ाइल जानकारी प्राप्त करने के लिए, निम्नलिखित REST API को कॉल किया जा सकता है:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
    

    जहां YAHOO_USER_UID Yahoo उपयोगकर्ता की आईडी है जिसे firebase.auth().currentUser.providerData[0].uid फ़ील्ड या result.additionalUserInfo.profile से पुनर्प्राप्त किया जा सकता है।

  5. जबकि उपरोक्त उदाहरण साइन-इन प्रवाह पर ध्यान केंद्रित करते हैं, आपके पास याहू प्रदाता को linkWithPopup / linkWithRedirect का उपयोग करके मौजूदा उपयोगकर्ता से जोड़ने की क्षमता भी है। उदाहरण के लिए, आप एक से अधिक प्रदाताओं को एक ही उपयोगकर्ता से लिंक कर सकते हैं जिससे वे दोनों में से किसी के साथ साइन इन कर सकें।

    Web version 9

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // 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.
        });

    Web version 8

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. उसी पैटर्न का उपयोग reauthenticateWithPopup / reauthenticateWithRedirect के साथ किया जा सकता है जिसका उपयोग संवेदनशील संचालन के लिए नए क्रेडेंशियल्स को पुनः प्राप्त करने के लिए किया जा सकता है, जिसके लिए हाल ही में लॉगिन की आवश्यकता होती है।

    Web version 9

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    reauthenticateWithPopup(auth.currentUser, provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // 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.
        });

    Web version 8

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

क्रोम एक्सटेंशन में फायरबेस के साथ प्रमाणित करें

यदि आप एक क्रोम एक्सटेंशन ऐप बना रहे हैं, तो आपको अपनी क्रोम एक्सटेंशन आईडी जोड़नी होगी:

  1. फायरबेस कंसोल में अपना प्रोजेक्ट खोलें।
  2. प्रमाणीकरण अनुभाग में, साइन-इन विधि पृष्ठ खोलें।
  3. अधिकृत डोमेन की सूची में निम्न जैसा URI जोड़ें:
    chrome-extension://CHROME_EXTENSION_ID

क्रोम एक्सटेंशन के लिए केवल पॉपअप ऑपरेशंस ( signInWithPopup , linkWithPopup , और रीऑथेंटिकेट reauthenticateWithPopup ) उपलब्ध हैं, क्योंकि क्रोम एक्सटेंशन HTTP रीडायरेक्ट का उपयोग नहीं कर सकते हैं। आपको इन विधियों को ब्राउज़र क्रिया पॉपअप के बजाय पृष्ठभूमि पृष्ठ स्क्रिप्ट से कॉल करना चाहिए, क्योंकि प्रमाणीकरण पॉपअप ब्राउज़र क्रिया पॉपअप को रद्द कर देगा। पॉपअप विधियों का उपयोग केवल मैनिफेस्ट V2 का उपयोग करने वाले एक्सटेंशन में किया जा सकता है। नया मेनिफेस्ट V3 केवल सर्विस वर्कर के रूप में पृष्ठभूमि स्क्रिप्ट की अनुमति देता है, जो पॉपअप संचालन बिल्कुल भी नहीं कर सकता है।

अपने क्रोम एक्सटेंशन की मेनिफेस्ट फ़ाइल में सुनिश्चित करें कि आप https://apis.google.com URL को content_security_policy allowlist में जोड़ते हैं।

अगले कदम

उपयोगकर्ता द्वारा पहली बार साइन इन करने के बाद, एक नया उपयोगकर्ता खाता बनाया जाता है और क्रेडेंशियल से लिंक किया जाता है—अर्थात, उपयोगकर्ता नाम और पासवर्ड, फ़ोन नंबर, या प्रमाणीकरण प्रदाता जानकारी—जिससे उपयोगकर्ता ने साइन इन किया है। यह नया खाता आपके फ़ायरबेस प्रोजेक्ट के हिस्से के रूप में संग्रहीत किया जाता है, और इसका उपयोग आपके प्रोजेक्ट में प्रत्येक ऐप में उपयोगकर्ता की पहचान करने के लिए किया जा सकता है, भले ही उपयोगकर्ता कैसे साइन इन करे।

  • आपके ऐप्स में, आपके उपयोगकर्ता की ऑथ स्थिति जानने का अनुशंसित तरीका Auth ऑब्जेक्ट पर एक ऑब्जर्वर सेट करना है। फिर आप User ऑब्जेक्ट से उपयोगकर्ता की मूल प्रोफ़ाइल जानकारी प्राप्त कर सकते हैं। उपयोगकर्ता प्रबंधित करें देखें।

  • अपने फायरबेस रीयलटाइम डेटाबेस और क्लाउड स्टोरेज सुरक्षा नियमों में, आप auth चर से साइन-इन किए गए उपयोगकर्ता की अद्वितीय उपयोगकर्ता आईडी प्राप्त कर सकते हैं, और इसका उपयोग यह नियंत्रित करने के लिए कर सकते हैं कि उपयोगकर्ता किस डेटा तक पहुंच सकता है।

आप प्रमाणीकरण प्रदाता क्रेडेंशियल्स को मौजूदा उपयोगकर्ता खाते से लिंक करके एकाधिक प्रमाणीकरण प्रदाताओं का उपयोग करके उपयोगकर्ताओं को अपने ऐप में साइन इन करने की अनुमति दे सकते हैं।

किसी उपयोगकर्ता को साइन आउट करने के लिए, signOut पर कॉल करें:

Web version 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});