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

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

ساده ترین راه برای اضافه کردن شماره تلفن ورود به سیستم برای برنامه خود را به استفاده FirebaseUI ، که شامل یک قطره در ورود به سیستم ویدجت است که پیاده سازی جریانهای ورود به سیستم برای شماره تلفن ورود به سیستم، و همچنین مبتنی بر رمز عبور و ورود به سیستم فدرال -که در. این سند نحوه پیاده سازی جریان ورود شماره تلفن با استفاده از Firebase SDK را توضیح می دهد.

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

اگر شما در حال حاضر، کپی کردن قطعه مقدار دهی اولیه از فایربیس کنسول را به پروژه خود همان طور که در اضافه کردن فایربیس به پروژه جاوا اسکریپت خود را .

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

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

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

ورود به سیستم شماره تلفن را برای پروژه Firebase خود فعال کنید

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

  1. در فایربیس کنسول ، باز کردن بخش احراز هویت.
  2. در صفحه ی ثبت نام در روش، فعال کردن شماره تلفن ثبت نام در روش.
  3. در همان صفحه، اگر دامنه، که برنامه شما برگزار خواهد شد در OAuth حفظ بخش دامنه تغییر مسیر ذکر شده نیست، اضافه کردن دامنه شما.

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

تأیید کننده reCAPTCHA را تنظیم کنید

قبل از اینکه بتوانید با شماره تلفن کاربران وارد سیستم شوید ، باید تأیید کننده reCAPTCHA Firebase را تنظیم کنید. Firebase از reCAPTCHA برای جلوگیری از سوء استفاده می کند ، مانند اطمینان از درخواست تأیید شماره تلفن از یکی از دامنه های مجاز برنامه شما.

نیازی به تنظیم دستی کلاینت reCAPTCHA ندارید. هنگام استفاده از فایربیس SDK را RecaptchaVerifier شی، فایربیس به طور خودکار ایجاد و دسته هر کلید مشتری لازم و اسرار است.

RecaptchaVerifier پشتیبانی شی نامرئی reCAPTCHA را ، که اغلب می تواند کاربر را بدون نیاز به هر گونه اقدام برای کاربران بررسی، و همچنین به عنوان reCAPTCHA را ویجت، که همیشه نیاز به تعامل با کاربر به موفقیت کامل.

reCAPTCHA اصلی ارائه شده را می توان به دلخواه کاربر با به روز رسانی کد زبان در نمونه Auth قبل از ارائه reCAPTCHA بومی سازی کرد. محلی سازی فوق الذکر در مورد پیامک ارسال شده به کاربر که حاوی کد تأیید است نیز اعمال می شود.

نسخه وب 9

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

نسخه وب 8

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

از reCAPTCHA نامرئی استفاده کنید

برای استفاده از یک reCAPTCHA را نامرئی، ایجاد یک RecaptchaVerifier شی با size مجموعه پارامتر به invisible ، تعیین ID از دکمه که تسلیم ورود به سیستم خود را تشکیل می دهد. مثلا:

نسخه وب 9

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

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
}, auth);

نسخه وب 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

از ویجت reCAPTCHA استفاده کنید

برای استفاده از ویجت reCAPTCHA را قابل مشاهده است، ایجاد یک عنصر را در صفحه شما می شود که شامل ویجت، و سپس ایجاد یک RecaptchaVerifier شی، تعیین ID از ظرف وقتی شما این کار را. مثلا:

نسخه وب 9

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

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth);

نسخه وب 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

اختیاری: پارامترهای reCAPTCHA را مشخص کنید

شما به صورت اختیاری می توانید مجموعه ای از توابع پاسخ به تماس در RecaptchaVerifier شی هستند که وقتی حل کاربر از reCAPTCHA یا reCAPTCHA را منقضی می شود قبل از تسلیم کاربران فرم:

نسخه وب 9

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

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
}, auth);

نسخه وب 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});

اختیاری: reCAPTCHA را از قبل رندر کنید

اگر می خواهید از پیش رندر reCAPTCHA را قبل از شما یک ورود به سیستم ثبت درخواست، پاسخ render :

نسخه وب 9

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});

نسخه وب 8

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});

پس از render برطرف می شود، شما ID ویجت reCAPTCHA را، که شما می توانید استفاده کنید به برقراری تماس به دریافت فایلهای API:

نسخه وب 9

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

نسخه وب 8

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

کد تأیید را به تلفن کاربر ارسال کنید

برای شروع شماره تلفن ورود به سیستم، در حال حاضر کاربر یک رابط است که باعث آنها را به ارائه شماره تلفن خود را، و سپس پاسخ signInWithPhoneNumber به درخواست که فایربیس ارسال کد تأیید هویت به تلفن کاربر با اس ام اس:

  1. دریافت شماره تلفن کاربر.

    الزامات قانونی متفاوت است ، اما به عنوان بهترین روش و برای ایجاد انتظارات برای کاربران ، باید به آنها اطلاع دهید که در صورت استفاده از ورود به سیستم تلفن ، ممکن است پیامکی برای تأیید دریافت کنند و نرخ های استاندارد اعمال می شود.

  2. پاسخ signInWithPhoneNumber ، عبور به آن شماره تلفن کاربر و RecaptchaVerifier که قبلا ایجاد شده.

    نسخه وب 9

    import { getAuth, signInWithPhoneNumber } from "firebase/auth";
    
    const phoneNumber = getPhoneNumberFromUserInput();
    const appVerifier = window.recaptchaVerifier;
    
    const auth = getAuth();
    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
        .then((confirmationResult) => {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
          // ...
        }).catch((error) => {
          // Error; SMS not sent
          // ...
        });

    نسخه وب 8

    const phoneNumber = getPhoneNumberFromUserInput();
    const appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then((confirmationResult) => {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
          // ...
        }).catch((error) => {
          // Error; SMS not sent
          // ...
        });
    اگر signInWithPhoneNumber منجر به خطا، تنظیم مجدد از reCAPTCHA به طوری که کاربر می تواند دوباره امتحان کنید:
    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    window.recaptchaVerifier.render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    }
    

signInWithPhoneNumber روش مسائل چالش reCAPTCHA به کاربر، و در صورتی که کاربر به چالش می گذرد، درخواست که فایربیس تایید ارسال پیام کوتاه حاوی یک کد تأیید به تلفن کاربر است.

با کد تأیید وارد سیستم شوید

پس از تماس به signInWithPhoneNumber موفق، سریع کاربر به نوع کد امنیتی آنها بر اساس SMS دریافتی. سپس، وارد سیستم شوید کاربر با عبور از کد به confirm روش از ConfirmationResult شی که به تصویب رسید signInWithPhoneNumber را کنترل تحقق (این است که، آن then بلوک). مثلا:

نسخه وب 9

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});

نسخه وب 8

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});

اگر پاسخ به confirm موفق، کاربر با موفقیت در امضا کردند.

شی AuthCredential واسطه را دریافت کنید

اگر شما نیاز به یک AuthCredential شی برای حساب کاربر، تصویب کد امنیتی از نتیجه تایید و کد امنیتی به PhoneAuthProvider.credential به جای فراخوانی confirm :

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

سپس ، می توانید با کاربری وارد سیستم شوید:

firebase.auth().signInWithCredential(credential);

تست با شماره تلفن های تخیلی

می توانید شماره تلفن های تخیلی را برای توسعه از طریق کنسول Firebase تنظیم کنید. آزمایش با شماره تلفن های خیالی مزایای زیر را ارائه می دهد:

  • احراز هویت شماره تلفن را بدون مصرف سهمیه استفاده خود آزمایش کنید.
  • تأیید شماره تلفن را بدون ارسال پیام کوتاه واقعی آزمایش کنید.
  • آزمایش های متوالی را با شماره تلفن یکسان بدون ضربه زدن انجام دهید. اگر مرورگر از شماره تلفن یکسانی برای آزمایش استفاده کند ، خطر رد شدن در طی فرآیند بررسی فروشگاه App را به حداقل می رساند.
  • به راحتی در محیط های توسعه بدون هیچ گونه تلاش اضافی ، مانند توانایی توسعه در شبیه ساز iOS یا شبیه ساز Android بدون خدمات Google Play ، آزمایش کنید.
  • تست های ادغام را بدون مانع شدن توسط چک های امنیتی که معمولاً بر روی شماره تلفن های واقعی در محیط تولید اعمال می شود ، بنویسید.

شماره تلفن های تخیلی باید شرایط زیر را داشته باشند:

  1. مطمئن شوید که از شماره تلفن هایی استفاده می کنید که واقعاً تخیلی هستند و در حال حاضر وجود ندارند. احراز هویت Firebase به شما اجازه نمی دهد شماره تلفن های موجود را که توسط کاربران واقعی استفاده می شود به عنوان شماره آزمایشی تنظیم کنید. یک گزینه این است به استفاده از 555 عدد پیشوند شماره تلفن آزمایش ایالات متحده، برای مثال: 1 650-555-3434
  2. شماره تلفن ها باید به درستی برای طول و سایر محدودیت ها قالب بندی شوند. آنها همچنان از اعتبار سنجی شماره تلفن یک کاربر واقعی برخوردار خواهند بود.
  3. برای توسعه می توانید حداکثر 10 شماره تلفن اضافه کنید.
  4. از شماره تلفن ها/کدهایی که حدس زدن آنها دشوار است استفاده کنید و آنها را به طور مکرر تغییر دهید.

ایجاد شماره تلفن های تخیلی و کدهای تأیید

  1. در فایربیس کنسول ، باز کردن بخش احراز هویت.
  2. در ثبت نام در تب روش، فعال ارائه دهنده تلفن اگر شما در حال حاضر نیست.
  3. برای تست منوی آکاردئونی باز شماره تلفن.
  4. ارائه شماره تلفن شما را به آزمون می خواهید، برای مثال: 1 650-555-3434.
  5. ارائه کد تأیید 6 رقمی که شماره های خاص، برای مثال: 654321.
  6. اضافه کردن شماره. در صورت نیاز ، می توانید شماره تلفن و کد آن را با قرار دادن نشانگر روی ردیف مربوطه و کلیک روی نماد سطل زباله حذف کنید.

تست دستی

می توانید مستقیماً از یک شماره تلفن خیالی در برنامه خود استفاده کنید. این به شما این امکان را می دهد که در مراحل توسعه ، بدون برخورد با مشکلات سهمیه بندی یا فشار گاز ، آزمایش دستی انجام دهید. همچنین می توانید مستقیماً از شبیه ساز iOS یا شبیه ساز Android بدون نصب سرویس Google Play تست کنید.

وقتی شماره تلفن داستانی را ارائه می دهید و کد تأیید را ارسال می کنید ، هیچ پیامک واقعی ارسال نمی شود. در عوض ، برای تکمیل ورود به سیستم ، باید کد تأیید پیکربندی شده قبلی را ارائه دهید.

پس از اتمام ورود به سیستم ، یک کاربر Firebase با آن شماره تلفن ایجاد می شود. کاربر همان رفتار و ویژگی های یک کاربر شماره تلفن واقعی را دارد و می تواند به همان روش به پایگاه داده Realtime/Cloud Firestore و سایر خدمات دسترسی پیدا کند. شناسه توکنی که طی این فرایند ضبط شده است دارای امضای مشابه یک کاربر شماره تلفن واقعی است.

یکی دیگر از گزینه تنظیم یک نقش آزمون از طریق ادعاهای سفارشی در این کاربران به آنها را متمایز به عنوان کاربران جعلی اگر شما می خواهید برای محدود کردن بیشتر دسترسی داشته باشید.

آزمایش ادغام

علاوه بر آزمایش دستی ، تأیید هویت Firebase API هایی را برای کمک به نوشتن تست های ادغام برای تست تأیید تلفن ارائه می دهد. این API ها با غیرفعال کردن نیاز reCAPTCHA در وب و اعلان های فشار بی صدا در iOS ، تأیید برنامه را غیرفعال می کنند. این امر آزمایش اتوماسیون را در این جریانها ممکن کرده و پیاده سازی آن را آسان تر می کند. علاوه بر این ، آنها به شما امکان می دهند جریانهای تأیید فوری را در Android آزمایش کنید.

در وب، مجموعه ای appVerificationDisabledForTesting به true قبل از ارائه firebase.auth.RecaptchaVerifier . با این کار reCAPTCHA به طور خودکار برطرف می شود و به شما امکان می دهد شماره تلفن را بدون حل دستی آن ارسال کنید. توجه داشته باشید که حتی اگر reCAPTCHA غیرفعال باشد ، استفاده از شماره تلفن غیر داستانی همچنان در ورود به سیستم کامل نمی شود. فقط شماره تلفن های تخیلی را می توان با این API استفاده کرد.

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "+16505554567";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // confirmationResult can resolve with the fictional testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

هنگام تأیید برنامه غیرفعال است ، تأییدکنندگان برنامه reCAPTCHA ساختگی قابل مشاهده و نامرئی رفتار متفاوتی دارند:

  • قابل مشاهده reCAPTCHA را: هنگامی که از reCAPTCHA قابل مشاهده است از طریق ارائه appVerifier.render() ، به صورت خودکار بعد از کسری از ثانیه تاخیر برطرف می شود. این معادل این است که کاربر بلافاصله پس از ارائه روی reCAPTCHA کلیک کند. پاسخ reCAPTCHA پس از مدتی منقضی می شود و سپس مجدداً خودکار حل می شود.
  • reCAPTCHA را نامرئی: نامرئی reCAPTCHA را نمی خودکار حل و فصل در رندر و به جای این کار را بر روی appVerifier.verify() تماس و یا زمانی که لنگر را فشار دهید از reCAPTCHA را پس از کمتر از یک ثانیه تاخیر کلیک. به طور مشابه، پاسخ خواهد بعد از مدتی منقضی و تنها خودکار حل و فصل هم پس از appVerifier.verify() تماس و یا زمانی که لنگر را فشار دهید از reCAPTCHA را کلیک شود دوباره.

هرگاه یک reCAPTCHA ساختگی برطرف شود ، عملکرد پاسخ مربوطه همانطور که انتظار می رود با پاسخ جعلی فعال می شود. اگر یک تماس تلفنی انقضا نیز مشخص شده باشد ، در پایان آن فعال می شود.

مراحل بعدی

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

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

  • در خود پایگاه فایربیس بیدرنگ و ابر ذخیره سازی قوانین امنیتی ، شما می توانید دریافت امضا در شناسه کاربری منحصر به فرد کاربر را از auth متغیر، و استفاده از آن برای کنترل آنچه داده دسترسی کاربر می تواند.

شما می توانید اجازه به کاربران برای ورود به سیستم برنامه خود را با استفاده از ارائه دهندگان تأیید هویت چندگانه توسط ارتباط تایید اعتبار ارائه دهنده به یک حساب کاربری موجود.

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

نسخه وب 9

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

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

نسخه وب 8

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