تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

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

قبل البدء

أضِف مصادقة Firebase إلى تطبيق الويب، لضمان استخدامك الإصدار v9 المتوافق (موصى به) أو لحزمة SDK قديمة (راجِع الشريط الجانبي أعلاه).
تضمين FirebaseUI من خلال أحد الخيارات التالية:
1. شبكة توصيل المحتوى (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" />
```
2. وحدة npm
  
  ثبِّت واجهة FirebaseUI وتبعياتها عبر npm باستخدام الأمر التالي:
```
$ npm install firebaseui --save
```
  require الوحدات التالية في ملفات المصدر:
```
var firebase = require('firebase');
var firebaseui = require('firebaseui');
```
3. مكوِّن آلة صنع العجلة
  
  ثبّت واجهة 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)، يجب إعداد واجهة المستخدم للمصادقة.

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

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

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

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

في وحدة تحكُّم Firebase، افتح قسم المصادقة وفعِّل مصادقة البريد الإلكتروني وكلمة المرور.

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

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، افتح قسم المصادقة. في علامة التبويب طريقة تسجيل الدخول، فعِّل موفّر البريد الإلكتروني/كلمة المرور. تجدر الإشارة إلى أنّه يجب تفعيل ميزة تسجيل الدخول باستخدام عنوان البريد الإلكتروني/كلمة المرور لاستخدام ميزة تسجيل الدخول باستخدام رابط البريد الإلكتروني.
في القسم نفسه، فعِّل طريقة تسجيل الدخول رابط البريد الإلكتروني (تسجيل الدخول بدون كلمة مرور) وانقر على حفظ.

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

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

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

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:

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

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

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

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

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

هناك حالات يحاول فيها مستخدم الترقية إلى مستخدم حالي في Firebase، بعد أن سجّل دخوله بدون الكشف عن هويته. وبما أنّه لا يمكن ربط أحد المستخدمين الحاليين بمستخدم حالي آخر، ستعرض أداة FirebaseUI استدعاء signInFailure مع رمز الخطأ 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 وتخصيصها، يُرجى الانتقال إلى صفحة البدء.
إذا عثرت على مشكلة في FirebaseUI وأردت الإبلاغ عنها، استخدِم أداة تتبُّع مشاكل GitHub.