Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

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

قبل ان تبدأ

إذا كان لديك بالفعل لا، نسخ قصاصة التهيئة من حدة Firebase لمشروع كما هو موضح في إضافة Firebase لمشروع جافا سكريبت .

مخاوف أمنية

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

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

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

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

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

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

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

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

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

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

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

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

إصدار الويب 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 الكائن، وتحديد هوية من الحاوية عند القيام بذلك. على سبيل المثال:

إصدار الويب 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 يقرر، يمكنك الحصول على هوية اختبار reCAPTCHA القطعة، والتي يمكنك استخدامها لإجراء مكالمات إلى اختبار reCAPTCHA API:

إصدار الويب 9

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

إصدار الويب 8

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

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

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

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

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

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

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

بعد استدعاء signInWithPhoneNumber تنجح، مطالبة المستخدم إلى كتابة رمز التحقق التي تلقوها عن طريق الرسائل القصيرة. ثم، تسجيل الدخول للمستخدم عن طريق تمرير رمز ل 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. يوفر الاختبار باستخدام أرقام الهواتف الخيالية المزايا التالية:

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

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

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

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

  1. في وحدة التحكم Firebase ، فتح الباب المصادقة.
  2. في تسجيل الدخول التبويب الأسلوب، تمكين مزود الهاتف إذا كنت لم تقم بذلك بالفعل.
  3. فتح أرقام الهاتف لاختبار القائمة الأكورديون.
  4. توفير رقم الهاتف الذي تريد اختباره، على سبيل المثال: +1 650-555-3434.
  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 الحقيقي وسحابة التخزين قواعد الأمن ، يمكنك الحصول على قعت في هوية المستخدم الفريد المستخدم من 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.
});