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

يمكنك استخدام Firebase Authentication لتسجيل دخول أحد المستخدمين عن طريق إرسال رسالة SMS. إلى هاتف المستخدم. يسجِّل المستخدم الدخول باستخدام رمز يُستخدم لمرة واحدة ومضمّن في رسالة SMS

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

قبل البدء

انسخ مقتطف الإعداد من وحدة تحكم Firebase لمشروعك كما هو موضح في أضِف Firebase إلى مشروع JavaScript.

المخاوف المرتبطة بالأمان

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

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

تفعيل ميزة "تسجيل الدخول باستخدام رقم الهاتف" لمشروع Firebase

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

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

إعداد أداة التحقّق من reCAPTCHA

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

ولن تحتاج إلى إعداد برنامج reCAPTCHA يدويًا. عند استخدام كائن RecaptchaVerifier في حزمة تطوير البرامج (SDK) لمنصّة Firebase، وهو Firebase تلقائيًا ينشئ ويتعامل مع أي مفاتيح وأسرار ضرورية للعميل.

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

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

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 المصغّر

لاستخدام تطبيق 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 إرسال رمز المصادقة إلى هاتف المستخدم عن طريق رسالة قصيرة SMS:

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

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

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

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

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

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

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

  1. احرص على استخدام أرقام هواتف خيالية بالفعل، وغير موجودة. لا يسمح لك Firebase Authentication بضبط أرقام الهواتف الحالية التي يستخدمها مستخدمون حقيقيون كأرقام اختبار. أحد الخيارات المتاحة هو استخدام 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 Authentication واجهات برمجة تطبيقات للمساعدة في كتابة اختبارات الدمج. لاختبار مصادقة الهاتف. توقِف واجهات برمجة التطبيقات هذه التحقّق من التطبيقات من خلال إيقاف 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 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