في الشهر الماضي، كنت في الساعة 2 صباحًا في مشروع لأحد العملاء في أبو ظبي - وهو تطبيق تجارة إلكترونية جديد بموعد نهائي صعب. تم الانتهاء من الواجهة الخلفية، ولكن تنفيذ طرق تسجيل الدخول المتعددة تحول إلى كابوس. أراد العميل أن يكون تسجيل الدخول باستخدام Google و Apple والبريد الإلكتروني جاهزًا، وشعرت أن البرامج التعليمية الموجودة تفتقد إلى الخطوات الرئيسية. إذا كنت في هذا الموقف، فسوف يرشدك هذا المنشور خلال الإعداد بأمثلة برمجية حقيقية والصعوبات الصادقة التي واجهتها.

إعداد Firebase والتبعيات

ابدأ أولاً بالأساسيات. لقد أنشأت مشروع React Native جديدًا باستخدام Expo SDK 54، والذي يتماشى مع مجموعة أدوات العميل ويبسط تكامل Apple Auth لاحقًا. تُعد حزمة تطوير البرامج الرسمية (SDK) من Firebase ‏(v9.23) هي الخيار الأمثل لـ React Native، لكن تسجيل الدخول باستخدام Apple مع Firebase يتطلب @react-native-firebase/apple-auth و expo-apple-authentication إذا كنت تستخدم Expo.

bash

npm install firebase @react-native-firebase/auth @react-native-firebase/apple-auth
# or with Expo
expo install expo-apple-authentication

تنبيه: وثائق Firebase واضحة بشأن تمكين موفري الخدمة في وحدة تحكم Firebase، ولكن إعداد Apple يبدو وكأنه عملية بحث عن الكنوز. يجب أن يتطابق URI لإعادة توجيه OAuth من Apple مع إعدادات مشروع Firebase تمامًا - بما في ذلك الشرطات المائلة اللاحقة وأنظمة URI. لقد قضيت 90 دقيقة في تصحيح أخطاء حلقة إعادة توجيه لانهائية لأن مسار URI كان يحتوي على /auth إضافي لم أكن بحاجة إليه.

تكوين مصادقة Firebase

في وحدة تحكم Firebase، قم بتمكين:

البريد الإلكتروني/كلمة المرور: واضح، ولكن تحقق من "السماح باستعادة كلمة المرور" للمستخدمين الذين لا يتذكرون بريدهم الإلكتروني القديم.
Google: قم بتنزيل تكوين JSON لنظام Android؛ يستخدم iOS ملف GoogleService-Info.plist.
Apple: قم بإنشاء مفتاح خاص في بوابة مطوري Apple وأدخل معرّف المفتاح ومعرّف الفريق والبريد الإلكتروني الرئيسي في Firebase.

تفصيل واحد محبط: تتطلب Apple عنوان بريد إلكتروني للرد في شاشة OAuth الخاصة بها. إذا تخطيت هذا الحقل، فلن تكون أخطاء Apple وصفية. كان العميل مرتبكًا حتى عثرت على هذا الإصلاح.

اعتبارات واجهة المستخدم/تجربة المستخدم لعملاء الإمارات العربية المتحدة

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

•عرض تسميات عربية لـ "تسجيل الدخول باستخدام Google" عندما تكون لغة الهاتف هي العربية (استخدم i18n-js أو لغة الجهاز).
•لمسات ألوان محلية - تخطَّ الأزرق أو الأبيض العام؛ استخدم تطبيق حجز سيارات الليموزين الذي أنشأته اللون الذهبي للأزرار (نعم، الذهبي).
•شاشة موحدة مع جميع موفري الخدمة الثلاثة في أعمدة، وليس مكدسًا رأسيًا فوضويًا.

تنفيذ طرق تسجيل الدخول

لننتقل إلى التعليمات البرمجية. بالنسبة لتسجيل الدخول عبر البريد الإلكتروني، تعمل تدفقات Firebase الأساسية:

import auth from '@react-native-firebase/auth';

const handleEmailSignin = async (email: string, password: string) => {
  try {
    await auth().signInWithEmailAndPassword(email, password);
  } catch (error) {
    console.error(error.code, error.message);
  }
};

بالنسبة إلى Google و Apple، استخدم signInWithCredential مع رمز خاص بموفر الخدمة. إليك كيف يبدو Google باستخدام @react-native-google-signin/google-signin:

import { GoogleSignin } from '@react-native-google-signin/google-signin';

GoogleSignin.configure({
  webClientId: 'YOUR_WEB_CLIENT_ID',
});

const handleGoogleSignIn = async () => {
  await GoogleSignin.hasPlayServices();
  const { idToken } = await GoogleSignin.signIn();
  const credential = auth.GoogleAuthProvider.credential(idToken);
  await auth().signInWithCredential(credential);
};

كان Apple Auth هو الأكثر هشاشة. على نظام Android، تتم معالجته من خلال النافذة المنبثقة على الويب في Firebase، ولكن نظام iOS يحتاج إلى expo-apple-authentication:

import * as AppleAuthentication from 'expo-apple-authentication';

const handleAppleSignIn = async () => {
  try {
    const credential = await AppleAuthentication.signInAsync({
      requestedScopes: [
        AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
        AppleAuthentication.AppleAuthenticationScope.EMAIL,
      ],
    });
    
    const { identityToken } = credential;
    const provider = auth.AppleAuthProvider.credential(identityToken!);
    await auth().signInWithCredential(provider);
  } catch (error) {
    console.error(error);
  }
};

لقد أخطأت في requestedScopes مرة واحدة وحصلت على أخطاء غامضة على نظام iOS. تتطلب Apple هذين النطاقين لكي تعمل بشكل موثوق.

معالجة الأخطاء الحقيقية

ترجع Firebase رموز خطأ مختلفة وفقًا للمصدر. بالنسبة لتسجيل الدخول عبر البريد الإلكتروني، فإن auth/wrong-password واضح ومباشر، ولكن يمكن أن يطرح Google و Apple قيمة auth/invalid-credential إذا كانت الرموز مميزة بشكل خاطئ.

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

هناك مشكلة أخرى: إذا قام المستخدم بتغيير بريده الإلكتروني في Apple إلى Apple ID مختلف، فستربطه Firebase كحساب جديد. أصيب العميل بالذعر حتى أكدت أن هذا قيد من جانب Apple.

الاختبار عبر الأجهزة

في الإمارات العربية المتحدة، يتوقع العملاء أداءً قويًا على كل من iPhone و Android - حتى إذا كان جمهورهم الأساسي هو iOS (كما هو الحال في تطبيق يركز على مراكز التسوق في دبي). لقد اختبرت على:

•Xiaomi Redmi Note 12 (Android 13) لتدفق البريد الإلكتروني.
•iPhone 14 (iOS 16) لتسجيل الدخول باستخدام Apple.
•يعمل محاكي iOS لجزء منه فقط، ولكن الأجهزة الفعلية ضرورية لمصادقة Apple.

هناك خلل: فشل signInWithCredential في Expo على نظام Android لتسجيل الدخول باستخدام Apple. كان الحل هو إضافة firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL) لفرض استمرار الجلسة (session persistence).

النشر ومشكلات ما بعد الإطلاق

أطلق العميل التطبيق مع عمل جميع موفري الخدمة الثلاثة، لكنهم أضافوا شرطًا في اللحظة الأخيرة: رسائل خطأ عربية مترجمة. تم تعيين رموز خطأ Firebase لملف JSON برسائل مترجمة.

على سبيل المثال:

json

{
  "invalid-email": "البريد الإلكتروني غير صالح"
}

بالنسبة لمشروع آخر، Greeny Corner، واجهنا احتياجات مماثلة للترجمة لاحتياجات تذكيرات العناية بالنباتات باللغتين العربية والإنجليزية. لقد وفرت مرونة مصادقة Firebase هنا الوقت.

ملاحظات أخيرة

إن تنفيذ مصادقة Firebase مع العديد من موفري الخدمة ليس علمًا معقدًا، لكن الشيطان يكمن في التفاصيل الصغيرة - مثل مراوغات URI لإعادة توجيه Apple أو أخطاء 403 في Apple Developer Console لأنك نسيت تمكين تسجيل الدخول لمعرف التطبيق الخاص بك.

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

إذا وفر لك هذا المنشور الوقت (أو ليلة بلا نوم)، فقل مرحباً على sarahprofile.com/contact. أنا أعمل على ورقة غش Firebase + TypeScript لـ React Native - قد تحتاجها.

مصادقة Firebase في React Native: تسجيل الدخول باستخدام Google و Apple والبريد الإلكتروني في وقت واحد