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

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

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

قبل ان تبدأ

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

  2. قم بتضمين FirebaseUI عبر أحد الخيارات التالية:

    1. CDN

      قم بتضمين النص البرمجي التالي وملف CSS في علامة <head> بصفحتك، أسفل مقتطف التهيئة من Firebase Console:

      <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، قم بتهيئة Auth UI.

// 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-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)

  1. في وحدة تحكم Firebase ، افتح قسم المصادقة وقم بتمكين تسجيل الدخول لموفر OAuth المحدد. تأكد من تحديد معرف وسر عميل OAuth المطابق أيضًا.

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

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

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

تسجيل الدخول

لبدء تدفق تسجيل الدخول إلى 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 Auth:

// 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 وتخصيصه، قم بزيارة الملف README .
  • إذا وجدت مشكلة في FirebaseUI وترغب في الإبلاغ عنها، فاستخدم أداة تعقب المشكلات في GitHub .