مصادقة الهاتف

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

سترسل Google وتخزّن أرقام الهواتف التي يقدّمها المستخدمون النهائيون للمصادقة لتحسين منع المحتوى غير المرغوب فيه وإساءة الاستخدام في جميع خدمات Google، بما في ذلك على سبيل المثال لا الحصر Firebase. على المطوّرين التأكّد من حصولهم على موافقة المستخدِم النهائي المناسبة قبل استخدام خدمة تسجيل الدخول باستخدام رقم الهاتف في Firebase Authentication.authentication

لا تتوفّر ميزة "المصادقة عبر الهاتف" من Firebase في بعض البلدان. يُرجى الاطّلاع على الأسئلة الشائعة للحصول على مزيد من المعلومات.

الإعداد

قبل بدء استخدام ميزة "المصادقة عبر الهاتف"، تأكَّد من اتّباع الخطوات التالية:

  1. فعِّل "الهاتف" كطريقة لتسجيل الدخول في وحدة تحكّم Firebase.
  2. Android: إذا لم يسبق لك ضبط تجزئة SHA-1 لتطبيقك في وحدة تحكّم Firebase، عليك إجراء ذلك. اطّلِع على مصادقة العميل للحصول على معلومات عن العثور على تجزئة SHA-1 لتطبيقك.
  3. نظام التشغيل iOS: في Xcode، فعِّل الإشعارات الفورية لمشروعك وتأكَّد من أنّه تم ضبط مفتاح مصادقة APNs باستخدام خدمة المراسلة عبر السحابة الإلكترونية من Firebase (FCM). بالإضافة إلى ذلك، عليك تفعيل أوضاع الخلفية للإشعارات عن بُعد. للاطّلاع على شرح مفصّل لهذه الخطوة، اطّلِع على مستندات Firebase iOS Phone Auth.
  4. الموقع الإلكتروني: تأكَّد من إضافة نطاق تطبيقاتك في وحدة تحكّم Firebase، ضمن نطاقات إعادة التوجيه باستخدام بروتوكول OAuth.

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

الاستخدام

توفّر حزمة تطوير البرامج (SDK) لميزة "مصادقة Firebase" في Flutter طريقتَين فرديتَين لتسجيل دخول المستخدم باستخدام رقم هاتفه. توفّر المنصات الأصلية (مثل Android وiOS) وظائف مختلفة لإثبات ملكية رقم هاتف مقارنةً بالويب، لذلك تتوفّر طريقتان لكل منصة حصريًا:

  • النظام الأساسي المضمّن: verifyPhoneNumber.
  • منصّة الويب: signInWithPhoneNumber.

اللغة الأصلية: verifyPhoneNumber

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

عليك أولاً أن تطلب من المستخدم رقم هاتفه. بعد تقديمها، استخدِم الطريقة verifyPhoneNumber():

await FirebaseAuth.instance.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) {},
  verificationFailed: (FirebaseAuthException e) {},
  codeSent: (String verificationId, int? resendToken) {},
  codeAutoRetrievalTimeout: (String verificationId) {},
);

هناك 4 عمليات استدعاء منفصلة يجب التعامل معها، سيحدّد كلّ منها كيفية تعديل واجهة مستخدم التطبيق:

  1. verificationCompleted: معالجة رمز الرسالة القصيرة تلقائيًا على أجهزة Android
  2. verificationFailed: يمكنك التعامل مع أحداث الفشل، مثل أرقام الهواتف غير الصالحة أو ما إذا تم تجاوز الحصة المسموح بها من الرسائل القصيرة.
  3. codeSent: الإجراء الذي يتم اتّخاذه عند إرسال رمز إلى الجهاز من Firebase، ويُستخدَم لطلب إدخال المستخدمين للرمز.
  4. codeAutoRetrievalTimeout: يمكنك التعامل مع مهلة في حال تعذّر معالجة رمز الرسائل القصيرة تلقائيًا.

verificationCompleted

لن يتمّ استدعاء هذا المعالِج إلّا على أجهزة Android التي تتيح معالجة الرموز التلقائية عبر الرسائل القصيرة.

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

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) async {
    // ANDROID ONLY!

    // Sign the user in (or link) with the auto-generated credential
    await auth.signInWithCredential(credential);
  },
);

verificationFailed

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

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationFailed: (FirebaseAuthException e) {
    if (e.code == 'invalid-phone-number') {
      print('The provided phone number is not valid.');
    }

    // Handle other errors
  },
);

codeSent

عندما تُرسِل Firebase رمزًا عبر الرسائل القصيرة إلى الجهاز، يتم تشغيل هذا المعالِج باستخدام verificationId وresendToken (لا يتوفّر resendToken إلا على أجهزة Android، وستعرض أجهزة iOS دائمًا قيمة null).

بعد بدء العملية، من الأفضل تعديل واجهة مستخدم تطبيقك لطلب إدخال المستخدم لرمز الرسالة القصيرة الذي يتوقّعه. بعد إدخال رمز الرسالة القصيرة، يمكنك دمج معرّف إثبات الهوية مع رمز الرسالة القصيرة لإنشاء PhoneAuthCredential جديد:

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  codeSent: (String verificationId, int? resendToken) async {
    // Update the UI - wait for the user to enter the SMS code
    String smsCode = 'xxxx';

    // Create a PhoneAuthCredential with the code
    PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: verificationId, smsCode: smsCode);

    // Sign the user in (or link) with the credential
    await auth.signInWithCredential(credential);
  },
);

لن تُعيد Firebase تلقائيًا إرسال رسالة SMS جديدة إذا تم إرسالها مؤخرًا. ومع ذلك، يمكنك إلغاء هذا السلوك من خلال إعادة استدعاء طريقة verifyPhoneNumber باستخدام رمز إعادة الإرسال في الوسيطة forceResendingToken. في حال نجاح العملية، ستتم إعادة إرسال رسالة SMS.

codeAutoRetrievalTimeout

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

ينتظر الجهاز تلقائيًا لمدة 30 ثانية، ولكن يمكن تخصيص هذه المدة باستخدام الوسيطة timeout:

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  timeout: const Duration(seconds: 60),
  codeAutoRetrievalTimeout: (String verificationId) {
    // Auto-resolution timed out...
  },
);

الويب: signInWithPhoneNumber

على منصات الويب، يمكن للمستخدمين تسجيل الدخول من خلال تأكيد إمكانية وصولهم إلى هاتف من خلال إدخال رمز الرسالة القصيرة المُرسَل إلى رقم الهاتف المقدَّم. لتوفير أمان إضافي ومنع الرسائل غير المرغوب فيها، يُطلب من المستخدمين إثبات أنّهم بشر من خلال إكمال Google reCAPTCHA widget. بعد التأكيد، سيتم إرسال رمز الرسائل القصيرة.

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

FirebaseAuth auth = FirebaseAuth.instance;

// Wait for the user to complete the reCAPTCHA & for an SMS code to be sent.
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456');

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

UserCredential userCredential = await confirmationResult.confirm('123456');

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

إعدادات reCAPTCHA

تطبيق reCAPTCHA المصغّر هو عملية مُدارة بالكامل توفّر أمانًا لتطبيق الويب.

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

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

لإضافة تطبيق مصغّر مضمّن، حدِّد معرّف عنصر DOM للوسيطة container في مثيل RecaptchaVerifier. يجب أن يكون العنصر متوفّرًا وفارغًا وإلا سيظهر خطأ. في حال عدم تقديم وسيطة container، سيتم عرض التطبيق المصغّر على أنّه "غير مرئي".

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
  container: 'recaptcha',
  size: RecaptchaVerifierSize.compact,
  theme: RecaptchaVerifierTheme.dark,
));

يمكنك اختياريًا تغيير الحجم والمظهر من خلال تخصيص المَعلمتَين size وtheme كما هو موضّح أعلاه.

من الممكن أيضًا الاستماع إلى الأحداث، مثل ما إذا كان المستخدم قد أكمل reCAPTCHA، وما إذا كانت reCAPTCHA قد انتهت صلاحيتها أو حدث خطأ:

RecaptchaVerifier(
  onSuccess: () => print('reCAPTCHA Completed!'),
  onError: (FirebaseAuthException error) => print(error),
  onExpired: () => print('reCAPTCHA Expired!'),
);

الاختبار

توفّر Firebase إمكانية اختبار أرقام الهواتف على الجهاز:

  1. في "وحدة تحكّم Firebase"، اختَر موفِّر مصادقة "الهاتف" وانقر على القائمة المنسدلة "أرقام الهواتف للاختبار".
  2. أدخِل رقم هاتف جديدًا (مثل +44 7444 555666) ورمزًا تجريبيًا (مثل 123456).

في حال تقديم رقم هاتف تجريبي لأيّ من الطريقتَين verifyPhoneNumber أو signInWithPhoneNumber، لن يتم إرسال أي رسالة قصيرة. يمكنك بدلاً من ذلك تقديم رمز الاختبار مباشرةً إلى PhoneAuthProvider أو باستخدام معالِج نتيجة التأكيد في signInWithPhoneNumber.