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

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

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

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

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

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

अपने Firebase प्रोजेक्ट के लिए, ईमेल लिंक से साइन-इन करने की सुविधा चालू करना

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

1. Firebase console में, Security > Authentication पर जाएं.

2. साइन-इन का तरीका टैब में जाकर, ईमेल/पासवर्ड से साइन-इन करने का तरीका चालू करें. ध्यान दें कि ईमेल लिंक से साइन इन करने की सुविधा का इस्तेमाल करने के लिए, ईमेल/पासवर्ड से साइन इन करने की सुविधा चालू होनी चाहिए.

3. उसी सेक्शन में, ईमेल लिंक (बिना पासवर्ड के साइन-इन करने की सुविधा) साइन-इन करने की सुविधा देने वाली कंपनी को चालू करें.

4. सेव करें पर क्लिक करें.

उपयोगकर्ता के ईमेल पते पर पुष्टि करने के लिए लिंक भेजना

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

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

   • url: एम्बेड करने के लिए डीप लिंक और पास की जाने वाली कोई भी अतिरिक्त स्थिति. अगर आपने अभी तक ऐसा नहीं किया है, तो अनुमति वाले डोमेन की सूची में अपना डोमेन जोड़ें:

     1. Firebase कंसोल में, सुरक्षा > पुष्टि करें > सेटिंग टैब पर जाएं.

     2. अनुमति वाले डोमेन सेक्शन में जाकर, डोमेन जोड़ें पर क्लिक करें. इसके बाद, अपना डोमेन जोड़ें.

   • android और ios: इससे Firebase Authentication को यह तय करने में मदद मिलती है कि उसे सिर्फ़ वेब के लिए लिंक बनाना चाहिए या मोबाइल के लिए. मोबाइल लिंक को Android या Apple डिवाइस पर खोला जाता है.
   • handleCodeInApp: इसे सही पर सेट करें. साइन इन करने की प्रोसेस हमेशा ऐप्लिकेशन में पूरी करनी होती है. हालांकि, पासवर्ड रीसेट करने और ईमेल की पुष्टि करने जैसी अन्य कार्रवाइयां, ऐप्लिकेशन के बाहर भी की जा सकती हैं. ऐसा इसलिए है, क्योंकि फ़्लो के आखिर में, उपयोगकर्ता को साइन इन करना होता है और ऐप्लिकेशन में उसकी पुष्टि की स्थिति बनी रहती है.
   • linkDomain: जब किसी प्रोजेक्ट के लिए कस्टम Hosting लिंक डोमेन तय किए जाते हैं, तो यह तय करें कि लिंक को किसी मोबाइल ऐप्लिकेशन से खोलने पर कौनसे डोमेन का इस्तेमाल किया जाए. ऐसा न करने पर, डिफ़ॉल्ट डोमेन अपने-आप चुना जाता है. उदाहरण के लिए, PROJECT_ID.firebaseapp.com.

   • dynamicLinkDomain: अब काम नहीं करता. इस पैरामीटर को तय न करें.

     Web

     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'
       },
       // The domain must be configured in Firebase Hosting and owned by the project.
       linkDomain: 'custom-domain.com'
     };
     auth_email_link_actioncode_settings.js

     Web

     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'
     };
     email-link-auth.js

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

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

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

   Web

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

   Web

   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;
       // ...
     });
   email-link-auth.js

ईमेल में मिले लिंक का इस्तेमाल करके साइन इन करें

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

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

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

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

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

वेब पेज पर साइन-इन करना

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

// 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.
    });
}
email-link-auth.js

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

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

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

// 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.
  });
email-link-auth.js

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

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

// 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.
  });
email-link-auth.js

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

बंद कर दिया गया: ईमेल-पासवर्ड और ईमेल लिंक में अंतर करना

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

आपके पास अपने प्रोजेक्ट के लिए, ईमेल पता ढूंढने से जुड़ी सुरक्षा की सुविधा बंद करने का विकल्प होता है. हालांकि, हमारा सुझाव है कि ऐसा न करें.

ज़्यादा जानकारी के लिए, ईमेल पते की गिनती को सुरक्षित रखने से जुड़ा दस्तावेज़ देखें.

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

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

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

अगले चरण

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

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

• Firebase Realtime Database और Cloud Storage सुरक्षा नियमों में, आपको ये काम करने की सुविधा मिलती है: साइन इन किए हुए उपयोगकर्ता का यूनीक User-ID, 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