‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

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

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

ساده‌ترین راه برای افزودن ورود به سیستم با شماره تلفن به برنامه، استفاده از FirebaseUI است، که شامل ابزارک ورود به سیستم آماده‌ای است که جریان‌های ورود به سیستم را برای ورود به سیستم با شماره تلفن، و همچنین ورود به سیستم فدرال و مبتنی بر گذرواژه پیاده‌سازی می‌کند. این سند نحوه پیاده‌سازی جریان ورود به سیستم با شماره تلفن را بااستفاده از «کیت توسعه نرم‌افزار Firebase» شرح می‌دهد.

قبل از شروع

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

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

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

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

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

در کنسول Firebase، به امنیت > اصالت‌سنجی بروید.
در برگه روش ورود به سیستم، ارائه‌دهنده ورود به سیستم تلفن را فعال کنید.
خط‌مشی‌ای برای مناطقی که می‌خواهید ارسال پیامک به آن‌ها مجاز یا غیرمجاز باشد تنظیم کنید. تنظیم خط‌مشی منطقه پیامک می‌تواند به محافظت از برنامه‌هایتان دربرابر سوءاستفاده از پیامک کمک کند. برای پروژه‌های جدید، خط‌مشی پیش‌فرض هیچ منطقه‌ای را مجاز نمی‌داند.
1. در کنسول Firebase، به امنیت > اصالت‌سنجی > زبانه تنظیمات بروید.
2. در بخش خط‌مشی منطقه پیامک، خط‌مشی منطقه پیامک را تنظیم کنید.
اگر قبلاً این کار را نکرده‌اید، دامنه برنامه‌تان را مجاز کنید:
1. در کنسول Firebase، به امنیت > اصالت‌سنجی > زبانه تنظیمات بروید.
2. در بخش دامنه‌های مجاز، روی افزودن دامنه کلیک کنید و دامنه‌تان را اضافه کنید.
توجه داشته باشید که localhost به‌عنوان دامنه میزبانی‌شده برای اهداف احراز هویت تلفنی مجاز نیست.

راه‌اندازی درستی‌سنج reCAPTCHA

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

لازم نیست کارخواه reCAPTCHA را به‌صورت دستی راه‌اندازی کنید؛ وقتی از شیء RecaptchaVerifier «کیت توسعه نرم‌افزار Firebase» استفاده می‌کنید، Firebase به‌طور خودکار هرگونه رمز و کلید کارخواه لازم را ایجاد و مدیریت می‌کند.

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

با به‌روزرسانی کد زبان در نمونه Auth قبل‌از پرداز کردن reCAPTCHA، می‌توان reCAPTCHA پرداز شده زیرین را براساس اولویت کاربر بومی‌سازی کرد. بومی‌سازی ذکرشده در بالا برای پیامک ارسالی به کاربر که حاوی کد درستی‌سنجی است نیز اعمال خواهد شد.

Web

import { getAuth } from "firebase/auth";

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

Web

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

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

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

Web

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

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

Web

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

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

Web

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

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

Web

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

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

می‌توانید به‌صورت اختیاری توابع برگشتی را در RecaptchaVerifier شیء تنظیم کنید که وقتی کاربر reCAPTCHA را حل می‌کند یا reCAPTCHA قبل‌از ارسال فرم توسط کاربر منقضی می‌شود فراخوانی می‌شوند:

Web

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

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

Web

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

اختیاری: پیش‌پرداز کردن reCAPTCHA

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

Web

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

Web

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});phone-auth.js

پس‌از اینکه render حل شد، شناسه ابزارک reCAPTCHA را دریافت می‌کنید که می‌توانید از آن برای تماس با میانای برنامه‌سازی کاربردی reCAPTCHA استفاده کنید:

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);auth_get_recaptcha_response.js

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);phone-auth.js

کد درستی‌سنجی به تلفن کاربر ارسال شود

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

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

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

با signInWithPhoneNumber تماس بگیر و شماره تلفن کاربر و RecaptchaVerifier را که قبلاً ساخته‌ای به آن ارسال کن.

Web

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

Web

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

اگر 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 را برای کاربر صادر می‌کند و اگر کاربر از چالش عبور کند، درخواست می‌کند که Firebase Authentication پیامکی حاوی کد درستی‌سنجی به تلفن کاربر ارسال کند.

پس‌از موفقیت‌آمیز بودن تماس با signInWithPhoneNumber، از کاربر بخواهید کد درستی‌سنجی را که ازطریق پیامک دریافت کرده است تایپ کند. سپس، با ارسال کد به روش confirm شیء ConfirmationResult که به مدیر اجرای signInWithPhoneNumber (یعنی بلوک then آن) ارسال شده است، به سیستم کاربر وارد شوید. برای مثال:

Web

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

Web

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?)
  // ...
});phone-auth.js

اگر تماس با confirm موفقیت‌آمیز باشد، کاربر باموفقیت به سیستم وارد می‌شود.

دریافت شیء AuthCredential واسط

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

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

سپس، می‌توانید کاربر را با این اطلاعات اعتباری به سیستم وارد کنید:

firebase.auth().signInWithCredential(credential);

آزمایش با شماره تلفن‌های ساختگی

می‌توانید بااستفاده از کنسول Firebase، شماره تلفن‌های ساختگی برای توسعه تنظیم کنید. آزمایش با شماره تلفن‌های ساختگی این مزایا را دارد:

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

شماره‌های تلفن ساختگی باید این الزامات را برآورده کنند:

مطمئن شوید که از شماره تلفن‌هایی استفاده می‌کنید که واقعاً خیالی هستند و ازقبل وجود ندارند. ‫Firebase Authentication به شما اجازه نمی‌دهد شماره تلفن‌های موجود مورداستفاده کاربران واقعی را به‌عنوان شماره‌های آزمایشی تنظیم کنید. یکی از گزینه‌ها استفاده از شماره‌های پیش‌شماره ۵۵۵ به‌عنوان شماره تلفن‌های آزمایشی ایالات متحده است، برای مثال: +1 650-555-3434
شماره تلفن‌ها باید ازنظر طول و دیگر محدودیت‌ها قالب‌بندی صحیح داشته باشند. این شماره‌ها همچنان همان فرایند اعتبارسنجی شماره تلفن کاربر واقعی را طی خواهند کرد.
می‌توانید حداکثر ۱۰ شماره تلفن برای توسعه اضافه کنید.
از شماره تلفن‌ها/کدهای آزمایشی استفاده کنید که حدس زدن آن‌ها دشوار باشد و آن‌ها را مرتباً تغییر دهید.

ایجاد شماره تلفن‌های ساختگی و کدهای درستی‌سنجی

در کنسول Firebase، به امنیت > اصالت‌سنجی بروید.
در برگه روش ورود به سیستم، ارائه‌دهنده ورود به سیستم تلفن را فعال کنید اگر قبلاً این کار را نکرده‌اید.
بخش شماره‌های تلفن برای آزمایش را ازهم باز کنید.
شماره تلفنی را که می‌خواهید آزمایش کنید ارائه دهید، برای مثال: +1 650-555-3434.
کد درستی‌سنجی ۶ رقمی را برای آن شماره خاص ارائه دهید، برای مثال: 654321.
برای هر شماره، روی افزودن کلیک کنید. درصورت نیاز، می‌توانید شماره تلفن و کد آن را با نگه داشتن نشانگر روی ردیف مربوطه و کلیک کردن روی نماد سطل زباله حذف کنید.

آزمایش دستی

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

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

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

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

آزمایش یکپارچه‌سازی

علاوه‌بر آزمایش دستی، Firebase Authentication «میاناهای برنامه‌سازی کاربردی» را برای کمک به نوشتن آزمایش‌های یکپارچه‌سازی برای آزمایش اصالت‌سنجی تلفنی ارائه می‌دهد. این «میاناهای برنامه‌سازی کاربردی» با غیرفعال کردن الزام 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 دریافت کنید. به مدیریت کاربران مراجعه کنید.
در 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