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

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

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

قبل البدء

  1. أضِف مصادقة Firebase إلى تطبيق الويب، والتأكد من استخدام الإصدار v9 المتوافق (موصى به) أو حزمة SDK قديمة (يُرجى الاطّلاع على الشريط الجانبي أعلاه).

  2. تضمين 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 لتسجيل دخول المستخدمين، يجب تفعيل إعداد طرق تسجيل الدخول التي تريد دعمها.

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

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

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

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

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

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

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

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

  3. أضِف رقم تعريف مزوِّد خدمة البريد الإلكتروني إلى قائمة 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...
});

  4. عند عرض واجهة مستخدم تسجيل الدخول بشكل مشروط (ذا صلة بتطبيقات الصفحة الواحدة)، استخدام 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);
}

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

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

    يتوافق تسجيل الدخول عبر رابط البريد الإلكتروني في FirebaseUI- على الويب مع نظام التشغيل 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)

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

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

  3. أضِف رقم تعريف موفّر بروتوكول 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...
});

  4. اختياري: لتحديد نطاقات مخصّصة أو مَعلمات 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.
  ]
});

رقم الهاتف

  1. في وحدة تحكُّم Firebase، افتح قسم المصادقة وفعِّل الخيار. تسجيل الدخول باستخدام رقم هاتفك.

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

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

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

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

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

تسجيل الدخول

لبدء عملية تسجيل الدخول إلى FirebaseUI، عليك إعداد مثيل FirebaseUI من خلال تمرير مثيل Auth الأساسي.

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

حدِّد عنصر HTML الذي سيتم فيه عرض أداة تسجيل الدخول في FirebaseUI.

<!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

تحديد إعدادات FirebaseUI (عمليات تخصيص الموفّرين وتخصيصات واجهة المستخدم وكذلك معاودة الاتصال بنجاح، وما إلى ذلك).

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);
    }
  }
});

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

  • لمزيد من المعلومات عن استخدام واجهة مستخدم Firebase وتخصيصها، يُرجى الانتقال إلى قراءة
  • إذا عثرت على مشكلة في واجهة مستخدم Firebase وأردت الإبلاغ عنها، استخدِم أداة تتبُّع مشاكل GitHub