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

आप उपयोगकर्ता को एक लिंक युक्त ईमेल भेजकर साइन इन करने के लिए फायरबेस प्रमाणीकरण का उपयोग कर सकते हैं, जिसे वे साइन इन करने के लिए क्लिक कर सकते हैं। इस प्रक्रिया में, उपयोगकर्ता का ईमेल पता भी सत्यापित किया जाता है।

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

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

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

यदि आपने पहले से ऐसा नहीं किया है, तो Firebase कंसोल से आरंभीकरण स्निपेट को अपने प्रोजेक्ट में कॉपी करें जैसा कि आपके JavaScript प्रोजेक्ट में Firebase जोड़ें में वर्णित है।

अपने Firebase प्रोजेक्ट के लिए ईमेल लिंक साइन-इन सक्षम करें

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

1. फायरबेस कंसोल में, प्रामाणिक अनुभाग खोलें।
2. साइन इन विधि टैब पर, ईमेल/पासवर्ड प्रदाता को सक्षम करें। ध्यान दें कि ईमेल लिंक साइन-इन का उपयोग करने के लिए ईमेल/पासवर्ड साइन-इन सक्षम होना चाहिए।
3. उसी अनुभाग में, ईमेल लिंक (पासवर्ड रहित साइन-इन) साइन-इन विधि सक्षम करें।
4. सहेजें क्लिक करें.

उपयोगकर्ता के ईमेल पते पर प्रमाणीकरण लिंक भेजें

प्रमाणीकरण प्रवाह आरंभ करने के लिए, उपयोगकर्ता को एक इंटरफ़ेस के साथ प्रस्तुत करें जो उपयोगकर्ता को अपना ईमेल पता प्रदान करने के लिए प्रेरित करता है और फिर फायरबेस को उपयोगकर्ता के ईमेल पर प्रमाणीकरण लिंक भेजने का अनुरोध करने के लिए sendSignInLinkToEmail पर कॉल करें।

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

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

   • dynamicLinkDomain : जब किसी प्रोजेक्ट के लिए कई कस्टम डायनेमिक लिंक डोमेन परिभाषित किए जाते हैं, तो निर्दिष्ट करें कि किसी निर्दिष्ट मोबाइल ऐप के माध्यम से लिंक खोलने पर किसका उपयोग करना है (उदाहरण के लिए, example.page.link )। अन्यथा पहला डोमेन स्वचालित रूप से चुना जाता है।

     Web version 9

     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 version 8

     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 version 9

   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 version 8

   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

ईमेल लिंक के साथ पूर्ण साइन इन करें

सुरक्षा चिंतायें

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

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

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

यह भी सुनिश्चित करें कि आप अपने लिंक को मध्यस्थ सर्वर द्वारा संभावित रूप से इंटरसेप्ट किए जाने से बचने के लिए उत्पादन में एक HTTPS URL का उपयोग करते हैं।

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

ईमेल लिंक डीप लिंक का प्रारूप वही है जो बैंड से बाहर की ईमेल क्रियाओं (ईमेल सत्यापन, पासवर्ड रीसेट और ईमेल परिवर्तन निरसन) के लिए उपयोग किया जाता है। फ़ायरबेस प्रमाणीकरण 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 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_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

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

फायरबेस प्रमाणीकरण मोबाइल डिवाइस पर ईमेल लिंक भेजने के लिए फायरबेस डायनेमिक लिंक का उपयोग करता है। मोबाइल एप्लिकेशन के माध्यम से साइन-इन पूरा करने के लिए, आने वाले एप्लिकेशन लिंक का पता लगाने के लिए एप्लिकेशन को कॉन्फ़िगर करना होगा, अंतर्निहित डीप लिंक को पार्स करना होगा और फिर साइन-इन को वेब प्रवाह के माध्यम से पूरा करना होगा।

किसी 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

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

ईमेल/पासवर्ड को ईमेल लिंक से अलग करना

यदि आप ईमेल के साथ पासवर्ड और लिंक-आधारित साइन-इन दोनों का समर्थन करते हैं, तो पासवर्ड/लिंक उपयोगकर्ता के लिए साइन-इन की विधि में अंतर करने के लिए, fetchSignInMethodsForEmail का उपयोग करें। यह पहचानकर्ता-प्रथम प्रवाह के लिए उपयोगी है जहां उपयोगकर्ता को पहले अपना ईमेल प्रदान करने के लिए कहा जाता है और फिर साइन-इन की विधि के साथ प्रस्तुत किया जाता है:

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

// After asking the user for their email.
const email = window.prompt('Please provide your email');

const auth = getAuth();
fetchSignInMethodsForEmail(auth, email)
  .then((signInMethods) => {
    // This returns the same array as fetchProvidersForEmail but for email
    // provider identified by 'password' string, signInMethods would contain 2
    // different strings:
    // 'emailLink' if the user previously signed in with an email/link
    // 'password' if the user has a password.
    // A user could have both.
    if (signInMethods.indexOf(EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
    if (signInMethods.indexOf(EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/link.
    }
  })
  .catch((error) => {
    // Some error occurred, you can inspect the code: error.code
  });
email_link_diferentiate.js

// After asking the user for their email.
var email = window.prompt('Please provide your email');
firebase.auth().fetchSignInMethodsForEmail(email)
  .then((signInMethods) => {
    // This returns the same array as fetchProvidersForEmail but for email
    // provider identified by 'password' string, signInMethods would contain 2
    // different strings:
    // 'emailLink' if the user previously signed in with an email/link
    // 'password' if the user has a password.
    // A user could have both.
    if (signInMethods.indexOf(
            firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
    if (signInMethods.indexOf(
            firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/link.
    }
  })
  .catch((error) => {
    // Some error occurred, you can inspect the code: error.code
  });
email-link-auth.js

जैसा कि ऊपर वर्णित ईमेल/पासवर्ड और ईमेल/लिंक को एक ही firebase.auth.EmailAuthProvider (समान PROVIDER_ID ) माना जाता है, जिसमें साइन-इन के विभिन्न तरीके होते हैं।

अगले कदम

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

• आपके ऐप्स में, आपके उपयोगकर्ता की ऑथ स्थिति जानने का अनुशंसित तरीका 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