0Pricing
Firebase Auth & Realtime Database Apps · درس

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

نفّذ مصادقة موثوقة برقم الهاتف باستخدام التحقق عبر SMS لتوفير وصول آمن للمستخدمين

المصادقة برقم الهاتف درس مجاني في Firebase Auth & Realtime Database Apps على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Firebase Auth & Realtime Database Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Firebase Auth & Realtime Database Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Secure Login with Phone Numbers

Phone number authentication allows users to sign in to your app using their mobile phone number. It's a secure and convenient method, especially for users who prefer not to create traditional email/password accounts or use social logins.

  • Accessibility: Many users find it easy to use.
  • Security: Leverages SMS for verification, adding a layer of security.
  • No Passwords: Reduces password fatigue and forgotten password issues.

Enabling Phone Authentication

Before you can use phone number authentication in your app, you need to enable it in your Firebase project settings.

  1. Go to the Firebase Console.
  2. Navigate to Authentication > Sign-in method.
  3. Enable the Phone provider.
  4. Optionally, specify which phone numbers are allowed for testing.

This step tells Firebase that your project will support phone sign-ins.

Client-Side Preparation

To use phone authentication, your client-side application needs to be set up correctly. This often involves specific mechanisms to verify the user isn't a bot.

  • Web: You'll need to use a RecaptchaVerifier to protect against abuse.
  • Android: Firebase uses SafetyNet for device verification.
  • iOS: Firebase uses DeviceCheck for device verification.

These checks ensure that the phone number verification requests are coming from legitimate app instances.

The Verification Flow

The phone number authentication process typically follows these steps:

  1. The user enters their phone number into your app.
  2. Your app requests Firebase to send a verification code via SMS to that number.
  3. Firebase sends the SMS and returns a confirmationResult object to your app.
  4. The user receives the SMS and enters the code into your app.
  5. Your app uses the confirmationResult and the SMS code to sign the user in.

Let's see how to implement this.

Initiating Phone Verification (Web)

On the web, you'll use firebase.auth().signInWithPhoneNumber(). It requires a phone number and a RecaptchaVerifier instance. The confirmationResult is crucial for the next step.

/* Assuming Firebase SDK is initialized and 'auth' is firebase.auth() */

// 1. Prepare reCAPTCHA verifier (invisible is common for better UX)
const appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, now signInWithPhoneNumber can proceed
    console.log('reCAPTCHA solved!');
  }
});

// 2. Send the verification code
function sendVerificationCode(phoneNumber) {
  firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then((confirmationResult) => {
      // SMS sent. Save this object globally to confirm the code later.
      window.confirmationResult = confirmationResult;
      console.log('Verification code sent to ' + phoneNumber);
    }).catch((error) => {
      console.error('Error sending SMS:', error.message);
    });
}

// Example usage (in a real app, this would be triggered by a button click)
// sendVerificationCode('+15551234567');
console.log("Function 'sendVerificationCode' defined. Call it with a phone number (e.g., sendVerificationCode('+15551234567')) to try.");

Protecting with reCAPTCHA

For web applications, Firebase Phone Auth requires reCAPTCHA verification to prevent abuse, like automated bots attempting to send SMS messages.

  • You need an HTML element (e.g., a div) with a specific ID (like 'recaptcha-container') where reCAPTCHA can render, even if it's invisible.
  • The RecaptchaVerifier handles the challenge. Once solved, the callback is triggered, allowing signInWithPhoneNumber to proceed.

It's an important security measure for web clients.

Confirming the SMS Code

Once the user receives the SMS code and enters it, you use the confirmationResult object (saved from the previous step) to verify the code and complete the sign-in.

/* Assuming 'window.confirmationResult' holds the object from signInWithPhoneNumber */

function verifySmsCode(smsCode) {
  if (window.confirmationResult) {
    window.confirmationResult.confirm(smsCode)
      .then((result) => {
        // User signed in successfully!
        const user = result.user;
        console.log('User signed in with phone number:', user.phoneNumber);
        console.log('User UID:', user.uid);
      }).catch((error) => {
        // User couldn't sign in (e.g., invalid code)
        console.error('Error verifying SMS code:', error.message);
      });
  } else {
    console.error('No confirmationResult found. Send SMS first!');
  }
}

// Example usage (in a real app, this would be triggered by a button click)
// verifySmsCode('123456'); // Replace with the actual code received via SMS
console.log("Function 'verifySmsCode' defined. Call it with an SMS code (e.g., verifySmsCode('123456')) after sending a verification code.");

Accessing User Information

After a successful phone number sign-in, the user's information is available through the firebase.auth().currentUser object, just like any other authentication method.

  • You can access their uid, phoneNumber, and other profile details.
  • Use the onAuthStateChanged listener to monitor the user's login state across your application.

This allows you to personalize content and manage user sessions.

Handling Common Errors

It's important to anticipate and handle errors gracefully to provide a good user experience. Some common errors with phone authentication include:

  • auth/invalid-phone-number: The provided phone number is not valid.
  • auth/missing-verification-code: The user didn't enter a code or it was empty.
  • auth/invalid-verification-code: The entered SMS code is incorrect.
  • auth/captcha-check-failed: reCAPTCHA verification failed (web).
  • auth/too-many-requests: Too many verification attempts from the same device/IP.

Always display user-friendly messages for these errors.

Verify Your Knowledge

Which of the following is REQUIRED for phone number authentication in a web application?

Phone Auth Summary

You've learned how to implement phone number authentication with Firebase!

  • Enable the provider in the Firebase Console.
  • Set up client-side checks (reCAPTCHA for web).
  • Initiate verification with signInWithPhoneNumber().
  • Confirm the SMS code using the confirmationResult.
  • Handle various error scenarios gracefully.

Phone auth offers a great balance of security and convenience for your users. Practice implementing it in your projects!

الأسئلة الشائعة

هل درس «المصادقة برقم الهاتف» مجاني؟

نعم — نص درس «المصادقة برقم الهاتف» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Firebase Auth & Realtime Database Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Firebase Auth & Realtime Database Apps 4 دروس في المجموع.

ماذا ستتعلم في «المصادقة برقم الهاتف»؟

نفّذ مصادقة موثوقة برقم الهاتف باستخدام التحقق عبر SMS لتوفير وصول آمن للمستخدمين تتمرن على Firebase Auth & Realtime Database Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Firebase Auth & Realtime Database Apps؟

لا تُشترط خبرة سابقة. Firebase Auth & Realtime Database Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «المصادقة برقم الهاتف»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Firebase Auth & Realtime Database Apps هذا؟

نعم. كل درس في Firebase Auth & Realtime Database Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. المصادقة برقم الهاتف
  2. المصادقة متعددة العوامل (MFA)
  3. المطالبات المخصصة وقواعد الأمان
  4. ربط الحسابات وإدارة مزوّدي المصادقة
← العودة إلى Firebase Auth & Realtime Database Apps