قم بالمصادقة باستخدام Firebase باستخدام رقم هاتف باستخدام JavaScript

يمكنك استخدام مصادقة Firebase لتسجيل دخول مستخدم عن طريق إرسال رسالة SMS إلى هاتف المستخدم. يقوم المستخدم بتسجيل الدخول باستخدام رمز يستخدم لمرة واحدة موجود في رسالة SMS.

تتمثل أسهل طريقة لإضافة تسجيل الدخول برقم الهاتف إلى تطبيقك في استخدام FirebaseUI ، والذي يتضمن أداة تسجيل الدخول التي تعمل على تسجيل الدخول والتي تنفذ تدفقات تسجيل الدخول لتسجيل الدخول إلى رقم الهاتف ، بالإضافة إلى تسجيل الدخول المستند إلى كلمة المرور والتسجيل الموحد -في. يصف هذا المستند كيفية تنفيذ تدفق تسجيل الدخول إلى رقم الهاتف باستخدام Firebase SDK.

قبل ان تبدأ

مخاوف أمنية

المصادقة باستخدام رقم هاتف فقط ، على الرغم من ملاءمتها ، إلا أنها أقل أمانًا من الطرق الأخرى المتاحة ، لأن حيازة رقم هاتف يمكن نقلها بسهولة بين المستخدمين. أيضًا ، على الأجهزة ذات ملفات تعريف المستخدمين المتعددة ، يمكن لأي مستخدم يمكنه تلقي رسائل SMS تسجيل الدخول إلى حساب باستخدام رقم هاتف الجهاز.

إذا كنت تستخدم تسجيل الدخول المستند إلى رقم الهاتف في تطبيقك ، فيجب أن تقدمه جنبًا إلى جنب مع طرق تسجيل دخول أكثر أمانًا ، وإبلاغ المستخدمين بالمقايضات الأمنية باستخدام تسجيل الدخول برقم الهاتف.

تفعيل تسجيل الدخول إلى رقم الهاتف لمشروع Firebase

لتسجيل دخول المستخدمين عن طريق الرسائل القصيرة SMS ، يجب أولاً تمكين طريقة تسجيل الدخول إلى رقم الهاتف لمشروع Firebase:

1. في وحدة تحكم Firebase ، افتح قسم المصادقة .
2. في صفحة طريقة تسجيل الدخول ، قم بتمكين طريقة تسجيل الدخول برقم الهاتف .
3. في نفس الصفحة ، إذا لم يكن النطاق الذي سيستضيف تطبيقك مدرجًا في قسم نطاقات إعادة توجيه OAuth ، فأضف نطاقك.

الحصة النسبية لطلبات تسجيل الدخول إلى رقم هاتف Firebase عالية بما يكفي لعدم تأثر معظم التطبيقات. ومع ذلك ، إذا كنت بحاجة إلى تسجيل دخول عدد كبير جدًا من المستخدمين باستخدام مصادقة الهاتف ، فقد تحتاج إلى ترقية خطة التسعير الخاصة بك. انظر صفحة التسعير .

قم بإعداد مدقق reCAPTCHA

قبل أن تتمكن من تسجيل دخول المستخدمين بأرقام هواتفهم ، يجب عليك إعداد أداة التحقق reCAPTCHA من Firebase. يستخدم Firebase reCAPTCHA لمنع إساءة الاستخدام ، مثل التأكد من أن طلب التحقق من رقم الهاتف يأتي من أحد المجالات المسموح بها لتطبيقك.

لا تحتاج إلى إعداد عميل reCAPTCHA يدويًا ؛ عند استخدام كائن RecaptchaVerifier الخاص بـ Firebase SDK ، يقوم Firebase تلقائيًا بإنشاء ومعالجة أي مفاتيح وأسرار ضرورية للعميل.

يدعم كائن RecaptchaVerifier reCAPTCHA غير المرئي ، والذي يمكنه غالبًا التحقق من المستخدم دون الحاجة إلى أي إجراء من المستخدم ، بالإضافة إلى عنصر واجهة المستخدم reCAPTCHA ، والذي يتطلب دائمًا تفاعل المستخدم لإكماله بنجاح.

يمكن ترجمة reCAPTCHA الأساسي إلى تفضيل المستخدم عن طريق تحديث رمز اللغة على مثيل Auth قبل تقديم reCAPTCHA. سيتم أيضًا تطبيق الترجمة المذكورة أعلاه على رسالة SMS المرسلة إلى المستخدم ، والتي تحتوي على رمز التحقق.

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

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 ، مع تحديد معرف الزر الذي يرسل نموذج تسجيل الدخول الخاص بك. على سبيل المثال:

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

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

استخدم أداة reCAPTCHA

لاستخدام عنصر واجهة المستخدم reCAPTCHA المرئي ، قم بإنشاء عنصر في صفحتك لاحتواء عنصر واجهة المستخدم ، ثم قم بإنشاء كائن RecaptchaVerifier ، مع تحديد معرف الحاوية عند القيام بذلك. على سبيل المثال:

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

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

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

اختياري: حدد معلمات reCAPTCHA

يمكنك تعيين وظائف رد الاتصال اختياريًا على كائن RecaptchaVerifier التي يتم استدعاؤها عندما يحل المستخدم reCAPTCHA أو تنتهي صلاحية reCAPTCHA قبل أن يرسل المستخدم النموذج:

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

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 المكالمة:

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

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

بعد render الحلول ، ستحصل على معرف أداة reCAPTCHA ، والذي يمكنك استخدامه لإجراء مكالمات إلى واجهة برمجة تطبيقات reCAPTCHA :

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

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

أرسل رمز التحقق إلى هاتف المستخدم

لبدء تسجيل الدخول إلى رقم الهاتف ، قدم للمستخدم واجهة تطالبه بتقديم رقم هاتفه ، ثم اتصل بـ signInWithPhoneNumber لمطالبة Firebase بإرسال رمز مصادقة إلى هاتف المستخدم عن طريق الرسائل القصيرة:

1. احصل على رقم هاتف المستخدم.

   تختلف المتطلبات القانونية ، ولكن كأفضل ممارسة ولتحديد التوقعات للمستخدمين ، يجب عليك إبلاغهم بأنهم إذا استخدموا تسجيل الدخول عبر الهاتف ، فقد يتلقون رسالة SMS للتحقق ويتم تطبيق الأسعار القياسية.

2. Call signInWithPhoneNumber ، قم بتمرير رقم هاتف المستخدم و RecaptchaVerifier الذي قمت بإنشائه مسبقًا.

   Web modular API

   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 namespaced API

   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 إرسال رسالة SMS تحتوي على رمز التحقق إلى هاتف المستخدم.

سجل دخول المستخدم برمز التحقق

بعد نجاح المكالمة signInWithPhoneNumber ، اطلب من المستخدم كتابة رمز التحقق الذي تلقاه عبر رسالة نصية قصيرة. بعد ذلك ، قم بتسجيل الدخول إلى المستخدم عن طريق تمرير الرمز إلى طريقة confirm الخاصة بكائن ConfirmationResult الذي تم تمريره إلى معالج الوفاء الخاص بـ signInWithPhoneNumber (أي الكتلة الخاصة به then ). على سبيل المثال:

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

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. يوفر الاختبار باستخدام أرقام الهواتف الخيالية المزايا التالية:

• اختبر مصادقة رقم الهاتف دون استهلاك حصة الاستخدام الخاصة بك.
• اختبر مصادقة رقم الهاتف دون إرسال رسالة SMS فعلية.
• قم بإجراء اختبارات متتالية باستخدام نفس رقم الهاتف دون التعرض للاختناق. هذا يقلل من مخاطر الرفض أثناء عملية مراجعة متجر التطبيقات إذا كان المراجع يستخدم نفس رقم الهاتف للاختبار.
• اختبر بسهولة في بيئات التطوير دون أي جهد إضافي ، مثل القدرة على التطوير في محاكي iOS أو محاكي Android بدون خدمات Google Play.
• اكتب اختبارات التكامل دون أن تمنعك فحوصات الأمان التي تُطبق عادةً على أرقام الهواتف الحقيقية في بيئة الإنتاج.

يجب أن تستوفي أرقام الهواتف الخيالية المتطلبات التالية:

1. تأكد من استخدام أرقام هواتف خيالية بالفعل وغير موجودة بالفعل. لا تسمح لك مصادقة Firebase بتعيين أرقام الهواتف الحالية التي يستخدمها المستخدمون الحقيقيون كأرقام اختبار. أحد الخيارات هو استخدام 555 رقمًا مسبوقًا كأرقام هواتف تجريبية في الولايات المتحدة ، على سبيل المثال: +1 650-555-3434
2. يجب تنسيق أرقام الهواتف بشكل صحيح وفقًا للطول والقيود الأخرى. سيستمرون في إجراء نفس التحقق من صحة رقم هاتف المستخدم الحقيقي.
3. يمكنك إضافة ما يصل إلى 10 أرقام هواتف للتطوير.
4. استخدم أرقام هواتف / أكواد اختبارية يصعب تخمينها وقم بتغييرها بشكل متكرر.

قم بإنشاء أرقام هواتف ورموز تحقق خيالية

1. في وحدة تحكم Firebase ، افتح قسم المصادقة .
2. في علامة التبويب طريقة تسجيل الدخول ، قم بتمكين موفر الهاتف إذا لم تكن قد قمت بذلك بالفعل.
3. افتح قائمة أرقام الهواتف لاختبار الأكورديون.
4. أدخل رقم الهاتف الذي تريد اختباره ، على سبيل المثال: 3434-555-555 +1 650 .
5. قدم رمز التحقق المكون من 6 أرقام لهذا الرقم المحدد ، على سبيل المثال: 654321 .
6. أضف الرقم. إذا كانت هناك حاجة ، يمكنك حذف رقم الهاتف ورمزه بالمرور فوق الصف المقابل والنقر فوق أيقونة سلة المهملات.

الاختبار اليدوي

يمكنك البدء مباشرة في استخدام رقم هاتف وهمي في تطبيقك. يتيح لك ذلك إجراء اختبار يدوي أثناء مراحل التطوير دون التعرض لمشكلات في الحصة النسبية أو تقييدها. يمكنك أيضًا الاختبار مباشرة من محاكي iOS أو محاكي Android بدون تثبيت خدمات Google Play.

عندما تقدم رقم الهاتف الوهمي وترسل رمز التحقق ، لا يتم إرسال رسالة SMS فعلية. بدلاً من ذلك ، تحتاج إلى تقديم رمز التحقق الذي تم تكوينه مسبقًا لإكمال تسجيل الدخول.

عند اكتمال تسجيل الدخول ، يتم إنشاء مستخدم Firebase برقم الهاتف هذا. يمتلك المستخدم نفس السلوك والخصائص مثل مستخدم رقم هاتف حقيقي ، ويمكنه الوصول إلى Realtime Database / Cloud Firestore والخدمات الأخرى بنفس الطريقة. الرمز المميز للمعرف الذي تم سكه أثناء هذه العملية له نفس توقيع مستخدم رقم هاتف حقيقي.

هناك خيار آخر وهو تعيين دور اختباري عبر مطالبات مخصصة على هؤلاء المستخدمين لتمييزهم كمستخدمين مزيفين إذا كنت ترغب في تقييد الوصول بشكل أكبر.

اختبار التكامل

بالإضافة إلى الاختبار اليدوي ، توفر مصادقة Firebase واجهات برمجة تطبيقات للمساعدة في كتابة اختبارات التكامل لاختبار مصادقة الهاتف. تعمل واجهات برمجة التطبيقات هذه على تعطيل التحقق من التطبيق عن طريق تعطيل متطلبات reCAPTCHA في الويب وإشعارات الدفع الصامتة في iOS. هذا يجعل اختبار الأتمتة ممكنًا في هذه التدفقات ويسهل تنفيذه. بالإضافة إلى ذلك ، فهي تساعد في توفير القدرة على اختبار تدفقات التحقق الفوري على Android.

على الويب ، اضبط appVerificationDisabledForTesting على true قبل عرض firebase.auth.RecaptchaVerifier . يؤدي هذا إلى حل reCAPTCHA تلقائيًا ، مما يسمح لك بتمرير رقم الهاتف دون حله يدويًا. لاحظ أنه على الرغم من تعطيل reCAPTCHA ، فإن استخدام رقم هاتف غير وهمي سيظل يفشل في إكمال تسجيل الدخول. ولا يمكن استخدام سوى أرقام الهواتف الوهمية مع واجهة برمجة التطبيقات هذه.

// 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 وقواعد أمان التخزين السحابي ، يمكنك الحصول على معرف المستخدم الفريد للمستخدم الذي قام بتسجيل الدخول من متغير 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