Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

إضافة بيانات تسجيل الدخول بسهولة إلى تطبيق الويب باستخدام FirebaseUI

FirebaseUI هي مكتبة مضمّنة في حزمة تطوير البرامج (SDK) الخاصة بخدمة "مصادقة Firebase"، وتوفّر مسارات واجهة مستخدم جاهزة للاستخدام في تطبيقك. وتوفّر FirebaseUI المزايا التالية:

مزوّدو خدمات متعددون: عمليات تسجيل الدخول باستخدام البريد الإلكتروني/كلمة المرور، ورابط البريد الإلكتروني، والمصادقة عبر الهاتف، وتسجيل الدخول باستخدام Google وFacebook وTwitter وGitHub
ربط الحساب: عمليات ربط حسابات المستخدمين بأمان على مستوى مقدّمي خدمات تحديد الهوية
التخصيص: يمكنك تجاهل أنماط CSS في FirebaseUI لتتوافق مع متطلبات تطبيقك. بالإضافة إلى ذلك، بما أنّ FirebaseUI هي برنامج مفتوح المصدر، يمكنك إنشاء نسخة من المشروع وتخصيصها لتناسب احتياجاتك تمامًا.
إنشاء حساب بنقرة واحدة وتسجيل الدخول تلقائيًا: تتكامل هذه الميزة تلقائيًا مع إنشاء حساب بنقرة واحدة لتسجيل الدخول بسرعة على جميع الأجهزة.
واجهة مستخدم مترجمة: نشر التطبيق على نطاق عالمي بأكثر من 40 لغة
ترقية المستخدمين المجهولين: إمكانية ترقية المستخدمين المجهولين من خلال تسجيل الدخول أو الاشتراك لمزيد من المعلومات، يُرجى الانتقال إلى قسم ترقية المستخدمين المجهولين.

قبل البدء

أضِف خدمة "المصادقة" من Firebase إلى تطبيق الويب، مع التأكّد من استخدام واجهة برمجة التطبيقات ذات مساحة الاسم الإصدار 9 أو إصدار أحدث (وليس واجهة برمجة التطبيقات النموذجية، راجِع الشريط الجانبي أعلاه).
يمكنك تضمين FirebaseUI باستخدام أحد الخيارات التالية:
- شبكة توصيل المحتوى (CDN)
  
  أدرِج النص البرمجي وملف CSS التاليَين في علامة <head> الخاصة بصفحتك، أسفل مقتطف التهيئة من وحدة تحكّم Firebase:
```
<script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />
```
- وحدة npm
  
  ثبِّت FirebaseUI والملفات التابعة لها من خلال npm باستخدام الأمر التالي:
```
$ npm install firebaseui --save
```
  require الوحدات التالية ضِمن ملفات المصدر:
```
var firebase = require('firebase');
var firebaseui = require('firebaseui');
```
- Bower Component
  
  ثبِّت FirebaseUI والملفات التابعة له من خلال Bower باستخدام الأمر التالي:
```
$ bower install firebaseui --save
```
  أدرِج الملفات المطلوبة في HTML إذا كان خادم HTTP يعرض الملفات ضمن bower_components/:
```
<script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />
```

تهيئة FirebaseUI

بعد استيراد حزمة SDK، عليك إعداد واجهة مستخدم Auth.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

إعداد طُرق تسجيل الدخول

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

عنوان البريد الإلكتروني وكلمة المرور

في وحدة تحكّم Firebase، انتقِل إلى الأمان > المصادقة.
في علامة التبويب طريقة تسجيل الدخول، فعِّل موفّر خدمة تسجيل الدخول البريد الإلكتروني/كلمة المرور.

أضِف رقم تعريف موفِّر البريد الإلكتروني إلى قائمة signInOptions في FirebaseUI.

ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

اختياري: يمكن ضبط EmailAuthProvider لطلب إدخال اسم معروض من المستخدم (القيمة التلقائية هي true).

ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false
    }
  ]
});

المصادقة باستخدام رابط يتم إرساله إلى البريد الإلكتروني

في وحدة تحكّم Firebase، انتقِل إلى الأمان > المصادقة.
في علامة التبويب طريقة تسجيل الدخول، فعِّل موفّر خدمة تسجيل الدخول البريد الإلكتروني/كلمة المرور. يُرجى العِلم أنّه يجب تفعيل تسجيل الدخول باستخدام عنوان البريد الإلكتروني وكلمة المرور لاستخدام تسجيل الدخول باستخدام رابط البريد الإلكتروني.
في القسم نفسه، فعِّل موفّر خدمة تسجيل الدخول رابط البريد الإلكتروني (تسجيل الدخول بدون كلمة مرور).
انقر على حفظ.

أضِف معرّف مقدّم خدمة البريد الإلكتروني إلى قائمة signInOptions في FirebaseUI مع رابط البريد الإلكتروني signInMethod.

ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
    }
  ],
  // Other config options...
});

عند عرض واجهة مستخدم تسجيل الدخول بشكل مشروط (وهذا مهم للتطبيقات ذات الصفحة الواحدة)، استخدِم ui.isPendingRedirect() لرصد ما إذا كان عنوان URL يتوافق مع تسجيل الدخول باستخدام رابط البريد الإلكتروني، وما إذا كان يجب عرض واجهة المستخدم لإكمال عملية تسجيل الدخول.
```
// Is there an email link sign-in?
if (ui.isPendingRedirect()) {
  ui.start('#firebaseui-auth-container', uiConfig);
}
// This can also be done via:
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  ui.start('#firebaseui-auth-container', uiConfig);
}
```

اختياري: يمكن ضبط EmailAuthProvider لتسجيل الدخول باستخدام رابط البريد الإلكتروني للسماح للمستخدم بإكمال عملية تسجيل الدخول على عدة أجهزة أو حظره من ذلك.

يمكن تحديد دالة ردّ اتصال اختيارية emailLinkSignIn لعرض إعدادات firebase.auth.ActionCodeSettings التي سيتم استخدامها عند إرسال الرابط. يوفّر ذلك إمكانية تحديد كيفية التعامل مع الرابط، والرابط الديناميكي المخصّص، والحالة الإضافية في الرابط لصفحة معيّنة، وما إلى ذلك. وفي حال عدم توفير هذه المعلومات، يتم استخدام عنوان URL الحالي ويتم تشغيل مسار الويب فقط.

تتوافق ميزة تسجيل الدخول باستخدام رابط يتم إرساله عبر البريد الإلكتروني في FirebaseUI-web مع FirebaseUI-Android وFirebaseUI-iOS، حيث يمكن للمستخدم الذي يبدأ عملية تسجيل الدخول من خلال FirebaseUI-Android فتح الرابط وإكمال عملية تسجيل الدخول باستخدام FirebaseUI-web. وينطبق الأمر نفسه على المسار المعاكس.

ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
      // Allow the user the ability to complete sign-in cross device,
      // including the mobile apps specified in the ActionCodeSettings
      // object below.
      forceSameDevice: false,
      // Used to define the optional firebase.auth.ActionCodeSettings if
      // additional state needs to be passed along request and whether to open
      // the link in a mobile app if it is installed.
      emailLinkSignIn: function() {
        return {
          // Additional state showPromo=1234 can be retrieved from URL on
          // sign-in completion in signInSuccess callback by checking
          // window.location.href.
          url: 'https://www.example.com/completeSignIn?showPromo=1234',
          // Custom FDL domain.
          dynamicLinkDomain: 'example.page.link',
          // Always true for email link sign-in.
          handleCodeInApp: true,
          // Whether to handle link in iOS app if installed.
          iOS: {
            bundleId: 'com.example.ios'
          },
          // Whether to handle link in Android app if opened in an Android
          // device.
          android: {
            packageName: 'com.example.android',
            installApp: true,
            minimumVersion: '12'
          }
        };
      }
    }
  ]
});

موفّرو OAuth (Google وFacebook وTwitter وGitHub)

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

أضِف معرّف موفّر OAuth إلى قائمة signInOptions في FirebaseUI.

ui.start('#firebaseui-auth-container', {
  signInOptions: [
    // List of OAuth providers supported.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

اختياري: لتحديد نطاقات مخصّصة أو مَعلمات OAuth مخصّصة لكل مقدّم خدمة، يمكنك تمرير عنصر بدلاً من قيمة مقدّم الخدمة فقط:

ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      scopes: [
        'https://www.googleapis.com/auth/contacts.readonly'
      ],
      customParameters: {
        // Forces account selection even when one account
        // is available.
        prompt: 'select_account'
      }
    },
    {
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        // Forces password re-entry.
        auth_type: 'reauthenticate'
      }
    },
    firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
    firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
  ]
});

رقم الهاتف

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

أضِف معرّف مقدّم خدمة رقم الهاتف إلى قائمة signInOptions في FirebaseUI.

ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

اختياري: يمكن ضبط PhoneAuthProvider باستخدام مَعلمات reCAPTCHA مخصّصة سواء كانت reCAPTCHA مرئية أو غير مرئية (الإعداد التلقائي هو عادي). يُرجى الاطّلاع على مستندات reCAPTCHA API للحصول على مزيد من التفاصيل.

يمكن أيضًا ضبط البلد التلقائي الذي سيتم اختياره عند إدخال رقم الهاتف. يمكنك الرجوع إلى قائمة رموز البلدان التي تتوفّر فيها الخدمة للاطّلاع على القائمة الكاملة بالرموز. في حال عدم تحديد البلد، سيتم تلقائيًا ضبط حقل إدخال رقم الهاتف على الولايات المتحدة (+1).

تتوفّر الخيارات التالية حاليًا.

ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'normal', // 'invisible' or 'compact'
        badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
      },
      defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
      // For prefilling the national number, set defaultNationNumber.
      // This will only be observed if only phone Auth provider is used since
      // for multiple providers, the NASCAR screen will always render first
      // with a 'sign in with phone number' button.
      defaultNationalNumber: '1234567890',
      // You can also pass the full phone number string instead of the
      // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
      // the first country ID that matches the country code will be used to
      // populate the country selector. So for countries that share the same
      // country code, the selected country may not be the expected one.
      // In that case, pass the 'defaultCountry' instead to ensure the exact
      // country is selected. The 'defaultCountry' and 'defaultNationaNumber'
      // will always have higher priority than 'loginHint' which will be ignored
      // in their favor. In this case, the default country will be 'GB' even
      // though 'loginHint' specified the country code as '+1'.
      loginHint: '+11234567890'
    }
  ]
});

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

أخيرًا، اعرض واجهة FirebaseUI Auth:

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

ترقية المستخدمين المجهولين

تفعيل ترقية المستخدمين مجهولي الهوية

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

التعامل مع تعارضات الدمج عند ترقية حساب مستخدم مجهول الهوية

في بعض الحالات، يحاول مستخدم سجّل الدخول بشكل مجهول في البداية الترقية إلى حساب مستخدم حالي على Firebase. بما أنّه لا يمكن ربط مستخدم حالي بمستخدم حالي آخر، سيتم تشغيل معاودة الاتصال signInFailure في FirebaseUI مع رمز الخطأ firebaseui/anonymous-upgrade-merge-conflict عند حدوث ما سبق. سيحتوي عنصر الخطأ أيضًا على بيانات الاعتماد الدائمة. يجب أن يتم تفعيل تسجيل الدخول باستخدام بيانات الاعتماد الدائمة في دالة رد الاتصال لإكمال عملية تسجيل الدخول. قبل إكمال عملية تسجيل الدخول باستخدام auth.signInWithCredential(error.credential)، عليك حفظ بيانات المستخدم المجهول الهوية وحذفه. بعد إكمال عملية تسجيل الدخول، انسخ البيانات مرة أخرى إلى المستخدم غير المجهول. يوضّح المثال أدناه طريقة عمل هذا المسار.

// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
  // Whether to upgrade anonymous users should be explicitly provided.
  // The user must already be signed in anonymously before FirebaseUI is
  // rendered.
  autoUpgradeAnonymousUsers: true,
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // signInFailure callback must be provided to handle merge conflicts which
    // occur when an existing credential is linked to an anonymous user.
    signInFailure: function(error) {
      // For merge conflicts, the error.code will be
      // 'firebaseui/anonymous-upgrade-merge-conflict'.
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      // The credential the user tried to sign in with.
      var cred = error.credential;
      // Copy data from anonymous user to permanent user and delete anonymous
      // user.
      // ...
      // Finish sign-in after data is copied.
      return firebase.auth().signInWithCredential(cred);
    }
  }
});

الخطوات التالية

لمزيد من المعلومات حول استخدام FirebaseUI وتخصيصها، يُرجى الانتقال إلى ملف README.
إذا عثرت على مشكلة في FirebaseUI وأردت الإبلاغ عنها، استخدِم أداة Issue Tracker في GitHub.

إضافة بيانات تسجيل الدخول بسهولة إلى تطبيق الويب باستخدام FirebaseUI تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.