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

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

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

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

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

   1. Yahoo OAuth क्लाइंट को पंजीकृत करने के लिए, Yahoo के साथ वेब एप्लिकेशन पंजीकृत करने पर Yahoo डेवलपर दस्तावेज़ीकरण का पालन करें।

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

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

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

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

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

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

   Web version 9

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

   Web version 8

   var provider = new firebase.auth.OAuthProvider('yahoo.com');
   yahoo-oauth.js

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

   Web version 9

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

   Web version 8

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

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

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

   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');
   auth_yahoo_provider_scopes.js

   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-oauth.js

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

4. OAuth प्रदाता ऑब्जेक्ट का उपयोग करके फायरबेस के साथ प्रमाणित करें। आप या तो पॉप-अप विंडो खोलकर या साइन-इन पृष्ठ पर रीडायरेक्ट करके अपने उपयोगकर्ताओं को उनके 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.
       });
     auth_yahoo_signin_popup.js

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

   • साइन-इन पेज पर रीडायरेक्ट करके साइन इन करने के लिए, signInWithRedirect को कॉल करें:

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

     firebase.auth().signInWithRedirect(provider);
     

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

   Web version 9

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

   Web version 8

   firebase.auth().signInWithRedirect(provider);
   yahoo-oauth.js

   सफल समापन पर, 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.
       });
   auth_yahoo_link_popup.js

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

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

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

// Step 1.
// User tries to sign in to Yahoo.
auth.signInWithPopup(new firebase.auth.OAuthProvider('yahoo.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Yahoo credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Yahoo credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

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

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

1. Firebase कंसोल में अपना प्रोजेक्ट खोलें।
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 को कॉल करें:

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

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

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