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

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

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

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

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

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

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

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

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

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

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

1. ActionCodeSettings ऑब्जेक्ट बनाएं, जो Firebase को . नीचे दिए गए फ़ील्ड सेट करें:

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

   • dynamicLinkDomain: जब एक से ज़्यादा कस्टम डाइनैमिक लिंक डोमेन तय किए जाते हैं किसी प्रोजेक्ट के लिए, यह तय करें कि कोई चुनिंदा मोबाइल ऐप्लिकेशन (उदाहरण के लिए, example.page.link). वरना पहला डोमेन अपने-आप चुन लिया जाता है.

     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'
       },
       dynamicLinkDomain: 'example.page.link'
     };
     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 पुष्टि के लिए उपयोगकर्ता का ईमेल पता ऐसा होना चाहिए यह जानकारी, साइन-इन फ़्लो को पूरा करते समय दी जाती है. साइन-इन की प्रोसेस पूरी करने के लिए, यह ईमेल पता उस पते से मेल खाना चाहिए जिस पर साइन-इन लिंक मूल रूप से भेजा गया था.

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

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

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

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

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

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

Web

जानें ट्री-शेक किए जा सकने वाले मॉड्यूलर वेब एपीआई के बारे में ज़्यादा जानकारी और अपग्रेड को नेमस्पेस किए गए एपीआई से लिया गया है.

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

Web

// 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 से पुष्टि करने की सुविधा, Firebase डाइनैमिक लिंक का इस्तेमाल करके मोबाइल डिवाइस. मोबाइल ऐप्लिकेशन से साइन-इन की प्रक्रिया पूरी करने के लिए, ऐप्लिकेशन को इनकमिंग ऐप्लिकेशन लिंक का पता लगाने के लिए कॉन्फ़िगर करना होगा, डीप लिंक सेट अप करें और फिर वेब फ़्लो से साइन इन करने की प्रोसेस पूरी करें.

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

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

ईमेल लिंक की मदद से लिंक करना/फिर से पुष्टि करना

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

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

Web

जानें ट्री-शेक किए जा सकने वाले मॉड्यूलर वेब एपीआई के बारे में ज़्यादा जानकारी और अपग्रेड को नेमस्पेस किए गए एपीआई से लिया गया है.

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

Web

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

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

Web

जानें ट्री-शेक किए जा सकने वाले मॉड्यूलर वेब एपीआई के बारे में ज़्यादा जानकारी और अपग्रेड को नेमस्पेस किए गए एपीआई से लिया गया है.

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

Web

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

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

बहिष्कृत: ईमेल लिंक और ईमेल-पासवर्ड में अंतर करना

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

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

ईमेल एन्यूमरेशन सुरक्षा से जुड़ा दस्तावेज़ देखें देखें.

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

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

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

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

अगले चरण

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

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

• आपके Firebase Realtime Database और Cloud Storage में सुरक्षा के नियम, ये काम किए जा सकते हैं auth वैरिएबल से साइन-इन किए हुए उपयोगकर्ता का यूनीक यूज़र आईडी पाएं, और इसका इस्तेमाल करके यह कंट्रोल किया जा सकता है कि उपयोगकर्ता कौनसा डेटा ऐक्सेस कर सकता है.

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

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

Web

जानें ट्री-शेक किए जा सकने वाले मॉड्यूलर वेब एपीआई के बारे में ज़्यादा जानकारी और अपग्रेड को नेमस्पेस किए गए एपीआई से लिया गया है.

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

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

Web

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