احراز هویت با Firebase با استفاده از پیوند ایمیل در جاوا اسکریپت

با مجموعه‌ها، منظم بمانید ذخیره و دسته‌بندی محتوا براساس اولویت‌های شما.

شما می‌توانید از Firebase Authentication برای ورود به سیستم استفاده کنید و با ارسال ایمیلی حاوی یک پیوند به او، کاربر می‌تواند روی آن کلیک کند تا وارد شود. در این فرآیند، آدرس ایمیل کاربر نیز تأیید می‌شود.

ورود از طریق ایمیل مزایای زیادی دارد:

  • ثبت نام و ورود به سیستم با اصطکاک کم.
  • خطر کمتر استفاده مجدد از رمز عبور در بین برنامه‌ها، که می‌تواند امنیت رمزهای عبور حتی انتخاب‌شده را نیز تضعیف کند.
  • امکان احراز هویت یک کاربر و همچنین تأیید اینکه کاربر مالک قانونی آدرس ایمیل است.
  • یک کاربر برای ورود فقط به یک حساب ایمیل قابل دسترسی نیاز دارد. مالکیت شماره تلفن یا حساب رسانه اجتماعی مورد نیاز نیست.
  • یک کاربر می تواند بدون نیاز به ارائه (یا به خاطر سپردن) رمز عبور، که در دستگاه تلفن همراه دست و پا گیر است، به طور ایمن وارد سیستم شود.
  • یک کاربر موجود که قبلاً با یک شناسه ایمیل (رمز عبور یا فدرال) وارد شده است را می توان ارتقا داد تا فقط با ایمیل وارد شود. به عنوان مثال، کاربری که رمز عبور خود را فراموش کرده است همچنان می تواند بدون نیاز به بازنشانی رمز عبور خود وارد سیستم شود.

قبل از اینکه شروع کنی

اگر قبلاً این کار را نکرده‌اید، قطعه اولیه‌سازی را از کنسول Firebase در پروژه خود کپی کنید، همانطور که در Add Firebase به پروژه JavaScript خود توضیح داده شده است.

برای ورود کاربران از طریق پیوند ایمیل، ابتدا باید روش ورود ارائه دهنده ایمیل و پیوند ایمیل را برای پروژه Firebase خود فعال کنید:

  1. در کنسول Firebase ، بخش Auth را باز کنید.
  2. در برگه روش ورود به سیستم، ارائه دهنده ایمیل/گذرواژه را فعال کنید. توجه داشته باشید که ورود ایمیل/رمز عبور برای استفاده از ورود به سیستم پیوند ایمیل باید فعال باشد.
  3. در همان بخش، روش ورود به سیستم لینک ایمیل (ورود بدون رمز عبور) را فعال کنید.
  4. روی ذخیره کلیک کنید.

برای شروع جریان احراز هویت، رابطی را به کاربر ارائه دهید که از کاربر می‌خواهد آدرس ایمیل خود را ارائه کند و سپس sendSignInLinkToEmail را فراخوانی کنید تا از Firebase درخواست کنید که پیوند احراز هویت را به ایمیل کاربر ارسال کند.

  1. شی ActionCodeSettings را بسازید، که دستورالعمل‌هایی را در مورد نحوه ساخت پیوند ایمیل به Firebase ارائه می‌دهد. فیلدهای زیر را تنظیم کنید:

    • url : پیوند عمیق برای جاسازی و هر حالت اضافی که باید همراه آن منتقل شود. دامنه پیوند باید به لیست دامنه های مجاز Firebase Console اضافه شود، که با رفتن به برگه روش ورود (Authentication -> Sign-in) می توانید آن را پیدا کنید.
    • android و ios : برنامه‌هایی که هنگام باز شدن پیوند ورود به سیستم در دستگاه Android یا Apple استفاده می‌شوند. درباره نحوه پیکربندی Firebase Dynamic Links برای باز کردن پیوندهای اقدام ایمیل از طریق برنامه های تلفن همراه بیشتر بیاموزید.
    • handleCodeInApp : روی true تنظیم کنید. عملیات ورود به سیستم برخلاف سایر اقدامات ایمیل خارج از باند (بازنشانی رمز عبور و تأیید ایمیل) همیشه باید در برنامه تکمیل شود. این به این دلیل است که در پایان جریان، انتظار می رود کاربر وارد سیستم شود و وضعیت Auth او در برنامه باقی بماند.
    • 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'
      };

      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'
      };

    برای کسب اطلاعات بیشتر در مورد ActionCodeSettings، به بخش Passing State in Email Actions مراجعه کنید.

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

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

نگرانی های امنیتی

برای جلوگیری از استفاده از پیوند ورود به سیستم برای ورود به سیستم به عنوان یک کاربر ناخواسته یا در یک دستگاه ناخواسته، Firebase Auth نیاز دارد که آدرس ایمیل کاربر هنگام تکمیل جریان ورود به سیستم ارائه شود. برای موفقیت در ورود به سیستم، این آدرس ایمیل باید با آدرسی که پیوند ورود به سیستم در ابتدا به آن ارسال شده است مطابقت داشته باشد.

می‌توانید این جریان را برای کاربرانی که پیوند ورود به سیستم را در همان دستگاهی که پیوند را درخواست می‌کنند باز می‌کنند، با ذخیره آدرس ایمیل آنها به صورت محلی - به عنوان مثال با استفاده از localStorage یا کوکی‌ها - وقتی ایمیل ورود به سیستم را ارسال می‌کنید. سپس، از این آدرس برای تکمیل جریان استفاده کنید. ایمیل کاربر را در پارامترهای URL تغییر مسیر ندهید و دوباره از آن استفاده کنید زیرا ممکن است تزریق جلسه را فعال کند.

پس از تکمیل ورود به سیستم، هر مکانیسم تایید نشده قبلی ورود به سیستم از کاربر حذف خواهد شد و هر جلسه موجود باطل خواهد شد. به عنوان مثال، اگر شخصی قبلاً یک حساب تأیید نشده با همان ایمیل و رمز عبور ایجاد کرده باشد، رمز عبور کاربر حذف می‌شود تا از ورود مجدد شخص جعلی که ادعای مالکیت و ایجاد آن حساب تأیید نشده با ایمیل و رمز عبور تأیید نشده داشته باشد، جلوگیری شود.

همچنین مطمئن شوید که از URL HTTPS در تولید استفاده می کنید تا از رهگیری بالقوه پیوند شما توسط سرورهای واسطه جلوگیری کنید.

تکمیل ورود به سیستم در یک صفحه وب

قالب پیوند عمیق پیوند ایمیل با فرمت مورد استفاده برای اقدامات ایمیل خارج از باند (تأیید ایمیل، بازنشانی رمز عبور و لغو تغییر ایمیل) یکسان است. Firebase Auth این بررسی را با ارائه isSignInWithEmailLink API ساده می کند تا بررسی کند که آیا یک پیوند یک ورود به سیستم با پیوند ایمیل است یا خیر.

برای تکمیل ورود به سیستم در صفحه فرود، با signInWithEmailLink با ایمیل کاربر و پیوند ایمیل واقعی حاوی کد یکبار مصرف تماس بگیرید.

Web version 9

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

Web version 8

// 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 مراجعه کنید.

برای آشنایی بیشتر با نحوه مدیریت ورود به سیستم با پیوند ایمیل در برنامه اپل، به راهنمای پلتفرم‌های اپل مراجعه کنید.

همچنین می توانید این روش احراز هویت را به یک کاربر موجود پیوند دهید. برای مثال، کاربری که قبلاً با ارائه‌دهنده دیگری مانند شماره تلفن احراز هویت شده است، می‌تواند این روش ورود به حساب کاربری خود را اضافه کند.

تفاوت در نیمه دوم عملیات خواهد بود:

Web version 9

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

Web version 8

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

این همچنین می تواند برای احراز هویت مجدد کاربر پیوند ایمیل قبل از اجرای عملیات حساس استفاده شود.

Web version 9

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

Web version 8

// 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 کاربر ارائه شود.

در صورتی که از رمز ورود و ورود مبتنی بر پیوند با ایمیل پشتیبانی می‌کنید، برای متمایز کردن روش ورود به سیستم برای کاربر رمز عبور/پیوند، از fetchSignInMethodsForEmail استفاده کنید. این برای جریان های شناسه اول مفید است که در آن ابتدا از کاربر خواسته می شود ایمیل خود را ارائه کند و سپس روش ورود به سیستم ارائه می شود:

Web version 9

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
  });

Web version 8

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

همانطور که در بالا توضیح داده شد، ایمیل/گذرواژه و ایمیل/پیوند همان firebase.auth.EmailAuthProvider (همان PROVIDER_ID ) با روش‌های مختلف ورود به سیستم در نظر گرفته می‌شوند.

مراحل بعدی

پس از اینکه کاربر برای اولین بار وارد سیستم شد، یک حساب کاربری جدید ایجاد می‌شود و به اعتبارنامه‌ها (یعنی نام کاربری و رمز عبور، شماره تلفن یا اطلاعات ارائه‌دهنده تاییدیه) مرتبط می‌شود که کاربر با آن وارد شده است. این حساب جدید به‌عنوان بخشی از پروژه Firebase شما ذخیره می‌شود و می‌توان از آن برای شناسایی کاربر در همه برنامه‌های پروژه‌تان، صرف نظر از نحوه ورود کاربر به سیستم استفاده کرد.

  • در برنامه های شما، روش توصیه شده برای اطلاع از وضعیت احراز هویت کاربر، تنظیم ناظر بر روی شی Auth است. سپس می توانید اطلاعات اولیه پروفایل کاربر را از شی User دریافت کنید. به مدیریت کاربران مراجعه کنید.

  • در قوانین امنیتی Firebase Realtime Database و Cloud Storage، می‌توانید شناسه کاربری منحصر به فرد کاربر واردشده به سیستم را از متغیر auth دریافت کنید و از آن برای کنترل داده‌هایی که کاربر می‌تواند به آن دسترسی داشته باشد استفاده کنید.

می‌توانید به کاربران اجازه دهید با استفاده از چندین ارائه‌دهنده احراز هویت، با پیوند دادن اعتبار ارائه‌دهنده تأیید اعتبار به یک حساب کاربری موجود، به برنامه شما وارد شوند.

برای خروج از سیستم کاربر، با خروج از سیستم تماس signOut :

Web version 9

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

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

Web version 8

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