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

FirebaseUI هي مكتبة بنيت على أعلى Firebase مصادقة SDK الذي يوفر انخفاض في تدفقات UI لاستخدامها في التطبيق الخاص بك. يوفر FirebaseUI المزايا التالية:

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

قبل ان تبدأ

  1. إضافة مصادقة Firebase إلى تطبيق الويب الخاص بك .

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

    1. CDN

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

      <script src="https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.js"></script>
      <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.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. إضافة ID مزود البريد الإلكتروني إلى قائمة 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. في نفس القسم، تمكن رابط البريد الإلكتروني (passwordless تسجيل الدخول) تسجيل الدخول الأسلوب وانقر فوق حفظ.

  3. إضافة ID مزود البريد الإلكتروني إلى قائمة 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 مشروط (ذات الصلة لتطبيقات صفحة واحدة)، استخدم ui.isPendingRedirect() لكشف إذا كان يتوافق URL لتسجيل الدخول مع وصلة البريد الإلكتروني واحتياجات UI التي ستقدم لإكمال تسجيل الدخول.

    // 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-الروبوت و FirebaseUI-دائرة الرقابة الداخلية حيث مستخدم واحد بدء تدفق من FirebaseUI-الروبوت يمكن فتح الرابط والكامل تسجيل الدخول مع FirebaseUI على شبكة الإنترنت. وينطبق الشيء نفسه على التدفق المعاكس.

    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 المقابل أيضًا.

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

  3. إضافة ID مزود أوث إلى قائمة 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. اختياري: لتحديد نطاقات مخصصة، أو معلمات أوث مخصصة لكل مزود، يمكنك تمرير كائن بدلا من مجرد قيمة الموفر:

    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. أضف رقم الهاتف ID مزود إلى قائمة 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 وترغب في الإبلاغ عن ذلك، استخدم قضية تعقب جيثب .