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

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

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

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

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

      दो ओपनआईडी कनेक्ट एपीआई अनुमतियों का चयन करना सुनिश्चित करें: profile और email

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

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

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

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

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

    Web modular API

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

    Web namespaced API

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

    Web modular API

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

    Web namespaced API

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

    Yahoo द्वारा समर्थित पैरामीटरों के लिए, Yahoo OAuth दस्तावेज़ देखें। ध्यान दें कि आप setCustomParameters() के साथ Firebase-आवश्यक पैरामीटर पास नहीं कर सकते। ये पैरामीटर क्लाइंट_आईडी , रीडायरेक्ट_यूरी , रिस्पॉन्स_टाइप , स्कोप और स्टेट हैं।

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

    Web modular API

    // 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 namespaced API

    // 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');

    अधिक जानने के लिए, याहू स्कोप दस्तावेज़ देखें।

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

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

      Web modular API

      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 namespaced API

      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 पर कॉल करें:

    signInWithRedirect , linkWithRedirect , या reauthenticateWithRedirect का उपयोग करते समय सर्वोत्तम प्रथाओं का पालन करें।

      firebase.auth().signInWithRedirect(provider);
      

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

    Web modular API

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

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);

    सफल समापन पर, प्रदाता से जुड़े OAuth ID टोकन और एक्सेस टोकन को 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 याहू उपयोगकर्ता की आईडी है जिसे firebase.auth().currentUser.providerData[0].uid फ़ील्ड से या result.additionalUserInfo.profile से पुनर्प्राप्त किया जा सकता है।

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

    Web modular API

    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 namespaced API

    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 modular API

    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 namespaced API

    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.
        });

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

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

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

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

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

अगले कदम

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

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

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

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

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

Web modular API

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

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

Web namespaced API

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