JavaScript में ईमेल लिंक का इस्तेमाल करके Firebase से पुष्टि करना

Firebase से पुष्टि करने की सुविधा का इस्तेमाल करके, उपयोगकर्ता को साइन इन करने के लिए लिंक वाला ईमेल भेजा जा सकता है. उस पर क्लिक करके, उपयोगकर्ता साइन इन कर सकता है. इस प्रक्रिया में, उपयोगकर्ता के ईमेल पते की भी पुष्टि की जाती है.

ईमेल से साइन इन करने के कई फ़ायदे हैं:

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

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

अगर आपने पहले से ऐसा नहीं किया है, तो Firebase कंसोल से अपने प्रोजेक्ट में शुरू करने वाले स्निपेट को कॉपी करें. इसके बारे में अपने JavaScript प्रोजेक्ट में Firebase जोड़ें सेक्शन में बताया गया है.

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

  1. Firebase कंसोल में, पुष्टि करें सेक्शन खोलें.
  2. साइन इन करने का तरीका टैब पर, ईमेल/पासवर्ड की सेवा देने वाली कंपनी को चालू करें. ध्यान दें ईमेल लिंक से साइन इन करने के लिए, ईमेल/पासवर्ड से साइन-इन करने की सुविधा चालू होनी चाहिए.
  3. इसी सेक्शन में, ईमेल लिंक (बिना पासवर्ड के साइन इन करना) से साइन इन करने के तरीके को चालू करें.
  4. सेव करें पर क्लिक करें.

पुष्टि करने की प्रोसेस शुरू करने के लिए, उपयोगकर्ता को ऐसा इंटरफ़ेस दिखाएं जो उसे अपना ईमेल पता देने के लिए कहता हो. इसके बाद, sendSignInLinkToEmail को कॉल करके अनुरोध करें कि Firebase, उपयोगकर्ता के ईमेल पर पुष्टि करने का लिंक भेजे.

  1. ActionCodeSettings ऑब्जेक्ट बनाएं. इससे Firebase को ईमेल लिंक बनाने के तरीके के बारे में निर्देश मिल जाते हैं. नीचे दिए गए फ़ील्ड सेट करें:

    • url: एम्बेड करने के लिए डीप लिंक और पास की जाने वाली कोई दूसरी स्थिति. लिंक के डोमेन को अनुमति वाले डोमेन की 'Firebase कंसोल' सूची में जोड़ना होगा. यह जानकारी 'साइन-इन करने का तरीका' टैब (पुष्टि करने का तरीका -> सेटिंग) पर जाकर मिल सकती है.
    • android और ios: Android या Apple डिवाइस पर साइन-इन लिंक खोलने पर इस्तेमाल किए जाने वाले ऐप्लिकेशन. मोबाइल ऐप्लिकेशन में ईमेल कार्रवाई के लिंक खोलने के लिए, Firebase डाइनैमिक लिंक को कॉन्फ़िगर करने के तरीके के बारे में ज़्यादा जानें.
    • handleCodeInApp: 'सही' पर सेट करें. बैंड के बाहर की दूसरी ईमेल कार्रवाइयों (पासवर्ड रीसेट करना और ईमेल की पुष्टि करना) से अलग, ऐप्लिकेशन में साइन इन की प्रक्रिया हमेशा पूरी करनी होगी. ऐसा इसलिए होता है, क्योंकि फ़्लो के आखिर में, उपयोगकर्ता से साइन इन होने की उम्मीद की जाती है और ऐप्लिकेशन में अनुमति की स्थिति बनी रहती है.
    • dynamicLinkDomain: अगर किसी प्रोजेक्ट के लिए एक से ज़्यादा कस्टम डाइनैमिक लिंक डोमेन तय किए जाते हैं, तो यह बताएं कि किसी मोबाइल ऐप्लिकेशन (उदाहरण के लिए, example.page.link) से लिंक खोलने के लिए, कौनसा डोमेन इस्तेमाल करना है. ऐसा न करने पर, पहला डोमेन अपने-आप चुन लिया जाता है.

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

      const actionCodeSettings = {
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be in the authorized domains list in the Firebase Console.
        url: 'https://www.example.com/finishSignUp?cartId=1234',
        // This must be true.
        handleCodeInApp: true,
        iOS: {
          bundleId: 'com.example.ios'
        },
        android: {
          packageName: 'com.example.android',
          installApp: true,
          minimumVersion: '12'
        },
        dynamicLinkDomain: 'example.page.link'
      };

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

      var actionCodeSettings = {
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be in the authorized domains list in the Firebase Console.
        url: 'https://www.example.com/finishSignUp?cartId=1234',
        // This must be true.
        handleCodeInApp: true,
        iOS: {
          bundleId: 'com.example.ios'
        },
        android: {
          packageName: 'com.example.android',
          installApp: true,
          minimumVersion: '12'
        },
        dynamicLinkDomain: 'example.page.link'
      };

    ActionCodeSettings के बारे में ज़्यादा जानने के लिए, ईमेल से जुड़ी कार्रवाइयों में पास होने की स्थिति सेक्शन देखें.

  2. उपयोगकर्ता से उसका ईमेल मांगें.

  3. पुष्टि करने के लिए लिंक को उपयोगकर्ता के ईमेल पर भेजें. साथ ही, उपयोगकर्ता के ईमेल पते को सेव करें, ताकि जब उपयोगकर्ता उसी डिवाइस पर ईमेल से साइन इन कर ले, तो उसे सेव कर लें.

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

    import { getAuth, sendSignInLinkToEmail } from "firebase/auth";
    
    const auth = getAuth();
    sendSignInLinkToEmail(auth, email, actionCodeSettings)
      .then(() => {
        // The link was successfully sent. Inform the user.
        // Save the email locally so you don't need to ask the user for it again
        // if they open the link on the same device.
        window.localStorage.setItem('emailForSignIn', email);
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ...
      });

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

    firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
      .then(() => {
        // The link was successfully sent. Inform the user.
        // Save the email locally so you don't need to ask the user for it again
        // if they open the link on the same device.
        window.localStorage.setItem('emailForSignIn', email);
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...
      });

सुरक्षा से जुड़ी समस्याएं

साइन इन लिंक का इस्तेमाल, अनचाहे उपयोगकर्ता के तौर पर या किसी अनचाहे डिवाइस पर साइन इन करने से रोकने के लिए किया जाता है. इसके लिए, Firebase ऑथराइज़ेशन को साइन-इन फ़्लो पूरा करते समय उपयोगकर्ता का ईमेल पता देना ज़रूरी है. साइन-इन की प्रोसेस पूरी करने के लिए, यह ईमेल पता उस पते से मेल खाना चाहिए जिस पर साइन-इन लिंक भेजा गया था.

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

साइन-इन पूरा होने के बाद, साइन-इन करने का ऐसा कोई भी पिछला तरीका हटा दिया जाएगा जिसकी पुष्टि नहीं हुई थी. साथ ही, मौजूदा सेशन अमान्य हो जाएंगे. उदाहरण के लिए, अगर किसी ने पहले भी उसी ईमेल और पासवर्ड का इस्तेमाल करके बिना पुष्टि वाला खाता बनाया था, तो उपयोगकर्ता का पासवर्ड हटा दिया जाएगा. ऐसा उस व्यक्ति को रोकने के लिए किया जाएगा जिसने मालिकाना हक का दावा करके, बिना पुष्टि वाले खाते को फिर से साइन इन करने के लिए, बिना पुष्टि वाले ईमेल और पासवर्ड का इस्तेमाल किया हो.

साथ ही, यह भी पक्का करें कि प्रोडक्शन में एचटीटीपीएस यूआरएल का इस्तेमाल किया जा रहा हो, ताकि आपका लिंक, इंटरमीडियरी सर्वर से बीच में न आ सके.

किसी वेब पेज में साइन इन करने की प्रोसेस पूरी करना

ईमेल लिंक के डीप लिंक का फ़ॉर्मैट बैंड ईमेल से की जाने वाली कार्रवाइयों के लिए इस्तेमाल किए जाने वाले फ़ॉर्मैट की तरह ही होता है (ईमेल की पुष्टि करना, पासवर्ड रीसेट करना, और ईमेल बदलने की प्रक्रिया को रद्द करना). Firebase की पुष्टि, isSignInWithEmailLink API की मदद से इस जांच को आसान बनाती है, ताकि यह पता लगाया जा सके कि लिंक, ईमेल लिंक की मदद से साइन इन करता है या नहीं.

लैंडिंग पेज पर साइन इन करने के लिए, उपयोगकर्ता के ईमेल और एक बार इस्तेमाल होने वाले कोड वाले ईमेल लिंक के साथ signInWithEmailLink पर कॉल करें.

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

import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";

// Confirm the link is a sign-in with email link.
const auth = getAuth();
if (isSignInWithEmailLink(auth, window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  let email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  signInWithEmailLink(auth, email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user by importing getAdditionalUserInfo
      // and calling it with result:
      // getAdditionalUserInfo(result)
      // You can access the user's profile via:
      // getAdditionalUserInfo(result)?.profile
      // You can check if the user is new or existing:
      // getAdditionalUserInfo(result)?.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}

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

// Confirm the link is a sign-in with email link.
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  var email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  firebase.auth().signInWithEmailLink(email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}

मोबाइल ऐप्लिकेशन में साइन इन करना

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

किसी Android ऐप्लिकेशन में, ईमेल लिंक से साइन-इन करने की प्रोसेस को मैनेज करने के तरीके के बारे में ज़्यादा जानने के लिए, Android गाइड देखें.

Apple के ऐप्लिकेशन में, ईमेल के लिंक की मदद से साइन-इन करने की प्रोसेस को मैनेज करने के तरीके के बारे में ज़्यादा जानने के लिए, Apple प्लैटफ़ॉर्म गाइड देखें.

पुष्टि करने के इस तरीके को किसी मौजूदा उपयोगकर्ता के साथ भी जोड़ा जा सकता है. उदाहरण के लिए जिस उपयोगकर्ता की पुष्टि किसी अन्य कंपनी से पहले ही हो चुकी है, जैसे कि फ़ोन नंबर, वह अपने मौजूदा खाते में साइन-इन करने का यह तरीका जोड़ सकता है.

अंतर कार्रवाई के दूसरे आधे हिस्से में होगा:

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

import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });

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

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
firebase.auth().currentUser.linkWithCredential(credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });

इसका इस्तेमाल, संवेदनशील कार्रवाई करने से पहले, ईमेल लिंक वाले उपयोगकर्ता की फिर से पुष्टि करने के लिए भी किया जा सकता है.

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

import { getAuth, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
const auth = getAuth();
reauthenticateWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });

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

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
firebase.auth().currentUser.reauthenticateWithCredential(credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });

हालांकि, ऐसा हो सकता है कि फ़्लो किसी ऐसे डिवाइस पर खत्म हो जाए जिस पर ओरिजनल उपयोगकर्ता ने लॉग इन न किया हो. इस वजह से, हो सकता है कि यह फ़्लो पूरा न हो. ऐसे में, उपयोगकर्ता को एक गड़बड़ी दिखाई जा सकती है, ताकि उसे उसी डिवाइस पर लिंक खोलने के लिए मजबूर किया जा सके. कुछ स्टेट को लिंक में पास किया जा सकता है, ताकि कार्रवाई के टाइप और उपयोगकर्ता के uid के बारे में जानकारी दी जा सके.

अगर आपने अपना प्रोजेक्ट 15 सितंबर, 2023 या उसके बाद बनाया है, तो ईमेल इन्यूमरेशन सुरक्षा डिफ़ॉल्ट रूप से चालू रहती है. यह सुविधा आपके प्रोजेक्ट के उपयोगकर्ता खातों की सुरक्षा को बेहतर बनाती है. हालांकि, यह सुविधा fetchSignInMethodsForEmail() वाले तरीके को बंद कर देती है. हमने आइडेंटिफ़ायर के लिए पहले फ़्लो को लागू करने का सुझाव दिया था.

हालांकि, अपने प्रोजेक्ट के लिए ईमेल गिनती सुरक्षा को बंद किया जा सकता है, लेकिन हमारा सुझाव है कि ऐसा न करें.

ज़्यादा जानकारी के लिए, ईमेल एन्यूमरेशन प्रोटेक्शन वाला दस्तावेज़ देखें.

लिंक से साइन इन करने के लिए डिफ़ॉल्ट ईमेल टेंप्लेट

डिफ़ॉल्ट ईमेल टेंप्लेट के विषय और ईमेल के मुख्य हिस्से में एक टाइमस्टैंप होता है, ताकि बाद में आने वाले ईमेल को एक थ्रेड में छोटा न किया जाए और लिंक छिपा हो.

यह टेंप्लेट इन भाषाओं में लागू होता है:

कोड भाषा
ar अरबी
ज़ेड-सीएन चाइनीज़ (सिंप्लिफ़ाइड)
z-ताइवान चाइनीज़ (ट्रेडिशनल)
nl डच
en अंग्रेज़ी
EN-GB अंग्रेज़ी (यू.के.)
fr फ़्रेंच
de जर्मन
id इंडोनेशियन
it इटैलियन
जा जैपनीज़
ko कोरियन
pl पोलिश
पॉर्चुगीज़ (ब्राज़ील) पॉर्चुगीज़ (ब्राज़ील)
पॉर्चुगीज़ पॉर्चगीज़ (पुर्तगाल)
ru रशियन
es स्पैनिश
स्पैनिश स्पैनिश (लैटिन अमेरिका)
th थाई

अगले चरण

जब कोई उपयोगकर्ता पहली बार साइन इन करता है, तो एक नया उपयोगकर्ता खाता बनाया जाता है और उपयोगकर्ता के क्रेडेंशियल से लिंक किया जाता है. इन क्रेडेंशियल में उपयोगकर्ता नाम और पासवर्ड, फ़ोन नंबर या पुष्टि करने वाली सेवा की जानकारी शामिल है. यह नया खाता आपके 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.
});

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

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