JavaScript के साथ Yahoo का इस्तेमाल करके पुष्टि करें

Yahoo जैसे OAuth प्रोवाइडर का इस्तेमाल करके अपने उपयोगकर्ताओं को Firebase की मदद से पुष्टि करने की अनुमति दी जा सकती है. इसके लिए, Firebase SDK टूल की मदद से सामान्य OAuth लॉगिन को अपने ऐप्लिकेशन में इंटिग्रेट करें. ऐसा करके, एंड-टू-एंड साइन इन फ़्लो को पूरा किया जा सकता है.

वेब कंटेनर इंस्टॉल करने से पहले

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

  1. Firebase को अपने JavaScript प्रोजेक्ट में जोड़ें.
  2. Firebase कंसोल में, पुष्टि करें सेक्शन खोलें.
  3. साइन इन करने का तरीका टैब पर, Yahoo की सेवा देने वाली कंपनी को चालू करें.
  4. सेवा देने वाली कंपनी के डेवलपर कंसोल से, Client-ID और क्लाइंट सीक्रेट जोड़ें:

    1. Yahoo OAuth क्लाइंट को रजिस्टर करने के लिए, Yahoo के साथ वेब ऐप्लिकेशन को रजिस्टर करने से जुड़े Yahoo डेवलपर के दस्तावेज़ में दिए गए निर्देशों का पालन करें.

      यह पक्का करें कि आपने दो Open Connect API की अनुमतियां चुनी हों: profile और email.

    2. इन कंपनियों के साथ ऐप्लिकेशन रजिस्टर करते समय, अपने प्रोजेक्ट के लिए *.firebaseapp.com डोमेन को, ऐप्लिकेशन के लिए रीडायरेक्ट डोमेन के तौर पर रजिस्टर करें.
  5. सेव करें पर क्लिक करें.

Firebase SDK टूल की मदद से साइन-इन की प्रोसेस को मैनेज करना

अगर आप कोई वेब ऐप्लिकेशन बना रहे हैं, तो अपने उपयोगकर्ताओं को उनके Yahoo खातों का इस्तेमाल करके Firebase की पुष्टि करने का सबसे आसान तरीका, Firebase JavaScript SDK टूल की मदद से साइन-इन की पूरी प्रोसेस को मैनेज करना है.

Firebase JavaScript SDK टूल से साइन इन फ़्लो को मैनेज करने के लिए, यह तरीका अपनाएं:

  1. कंपनी आईडी yahoo.com का इस्तेमाल करके OAuthProvider का एक इंस्टेंस बनाएं.

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

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
    auth_yahoo_provider_create.js

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

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

  2. ज़रूरी नहीं: ऐसे अतिरिक्त कस्टम OAuth पैरामीटर डालें जिन्हें आपको OAuth अनुरोध की मदद से भेजना है.

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

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

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

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

    Yahoo पर इस्तेमाल किए जा सकने वाले पैरामीटर के बारे में जानने के लिए, Yahoo OAuth दस्तावेज़ देखें. ध्यान दें कि setCustomParameters() के साथ, Firebase के लिए ज़रूरी पैरामीटर पास नहीं किए जा सकते. ये पैरामीटर हैं: client_id, redirect_uri, response_type, scope, और state.

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

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

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

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

    // 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 प्रोवाइडर ऑब्जेक्ट का इस्तेमाल करके, Firebase से पुष्टि करें. उपयोगकर्ताओं को पॉप-अप विंडो खोलकर या साइन-इन पेज पर रीडायरेक्ट करके, उन्हें उनके Yahoo खाते से साइन इन करने के लिए कहा जा सकता है. रीडायरेक्ट करने के तरीके को मोबाइल डिवाइस पर प्राथमिकता दी जाती है.

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

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

      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

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

      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 पर कॉल करके साइन-इन का नतीजा पाया जा सकता है.

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

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_yahoo_signin_redirect.js

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

    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 का इस्तेमाल करके, Yahoo प्रोवाइडर को किसी मौजूदा उपयोगकर्ता से लिंक करने की सुविधा भी है. उदाहरण के लिए, एक से ज़्यादा प्रोवाइडर को एक ही उपयोगकर्ता से लिंक किया जा सकता है, ताकि वे दोनों में से किसी एक के ज़रिए साइन इन कर सकें.

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

    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

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

    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 के साथ भी इस्तेमाल किया जा सकता है. इसका इस्तेमाल, संवेदनशील कार्रवाइयों के लिए नए क्रेडेंशियल पाने के लिए किया जा सकता है. ऐसा उन संवेदनशील कार्रवाइयों के लिए किया जाता है जिनमें हाल ही में लॉगिन करना पड़ता है.

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

    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

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

    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

Chrome एक्सटेंशन में Firebase की मदद से पुष्टि करें

अगर आप Chrome एक्सटेंशन ऐप्लिकेशन बना रहे हैं, तो ऑफ़स्क्रीन दस्तावेज़ गाइड देखें.

अगले चरण

जब कोई उपयोगकर्ता पहली बार साइन इन करता है, तो एक नया उपयोगकर्ता खाता बनाया जाता है और उपयोगकर्ता के क्रेडेंशियल से लिंक किया जाता है. इन क्रेडेंशियल में उपयोगकर्ता नाम और पासवर्ड, फ़ोन नंबर या पुष्टि करने वाली सेवा की जानकारी शामिल है. यह नया खाता आपके Firebase प्रोजेक्ट के हिस्से के तौर पर सेव किया जाता है. साथ ही, इसका इस्तेमाल आपके प्रोजेक्ट के हर ऐप्लिकेशन में किसी उपयोगकर्ता की पहचान करने के लिए किया जा सकता है. भले ही, उपयोगकर्ता ने किसी भी तरह से साइन इन किया हो.

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

  • अपने Firebase रीयल टाइम डेटाबेस और Cloud Storage के सुरक्षा नियमों में, 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