با FirebaseUI به راحتی ورود به برنامه وب خود را اضافه کنید

FirebaseUI کتابخانه ای است که در بالای Firebase Authentication SDK ساخته شده است که جریان های رابط کاربری را برای استفاده در برنامه شما فراهم می کند. FirebaseUI مزایای زیر را ارائه می دهد:

  • چندین ارائه‌دهنده - جریان‌های ورود به سیستم برای ایمیل/گذرواژه، پیوند ایمیل، احراز هویت تلفن، ورود به سیستم گوگل، فیس‌بوک، توییتر و گیت هاب.
  • پیوند حساب - برای پیوند ایمن حساب‌های کاربری در بین ارائه‌دهندگان هویت جریان دارد.
  • سفارشی سازی - سبک های CSS FirebaseUI را نادیده بگیرید تا با نیازهای برنامه شما مطابقت داشته باشد. همچنین، از آنجایی که FirebaseUI منبع باز است، می توانید پروژه را فورک کرده و آن را دقیقاً مطابق با نیازهای خود سفارشی کنید.
  • ثبت نام با یک ضربه و ورود خودکار - ادغام خودکار با ثبت نام با یک ضربه برای ورود سریع از طریق دستگاه.
  • UI محلی - بین المللی سازی برای بیش از 40 زبان .
  • ارتقاء کاربران ناشناس - امکان ارتقاء کاربران ناشناس از طریق ورود به سیستم/ثبت نام. برای اطلاعات بیشتر، به بخش ارتقاء کاربران ناشناس مراجعه کنید.

قبل از شروع

  1. احراز هویت Firebase را به برنامه وب خود اضافه کنید ، مطمئن شوید که از v9 compat (توصیه می‌شود) یا قدیمی‌تر 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. جزء Bower

      FirebaseUI و وابستگی های آن را از طریق Bower با استفاده از دستور زیر نصب کنید:

      $ bower install firebaseui --save

      اگر سرور HTTP شما فایل‌های داخل bower_components/ را ارائه می‌دهد، فایل‌های مورد نیاز را در HTML خود وارد کنید:

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />

FirebaseUI را راه اندازی کنید

پس از وارد کردن SDK، UI Auth را مقداردهی اولیه کنید.

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

روش های ورود به سیستم را تنظیم کنید

قبل از اینکه بتوانید از Firebase برای ورود به سیستم کاربران استفاده کنید، باید روش‌های ورود به سیستمی را که می‌خواهید پشتیبانی کنید فعال و پیکربندی کنید.

آدرس ایمیل و رمز عبور

  1. در کنسول Firebase ، بخش Authentication را باز کنید و احراز هویت ایمیل و رمز عبور را فعال کنید.

  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 ، بخش Authentication را باز کنید. در برگه روش ورود به سیستم ، ارائه دهنده ایمیل/گذرواژه را فعال کنید. توجه داشته باشید که ورود ایمیل/رمز عبور برای استفاده از ورود به سیستم پیوند ایمیل باید فعال باشد.

  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 برای ورود به سیستم پیوند ایمیل را می توان به گونه ای پیکربندی کرد که به کاربر اجازه دهد یا از تکمیل ورود به سیستم بین دستگاهی جلوگیری کند.

    برای بازگرداندن پیکربندی firebase.auth.ActionCodeSettings برای استفاده در هنگام ارسال پیوند، می‌توان یک پاسخ تماس اختیاری emailLinkSignIn تعریف کرد. این توانایی تعیین نحوه مدیریت پیوند، پیوند پویا سفارشی، وضعیت اضافی در پیوند عمیق و غیره را فراهم می‌کند. وقتی ارائه نمی‌شود، از 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 ، بخش Authentication را باز کنید و ورود به سیستم ارائه دهنده OAuth مشخص شده را فعال کنید. مطمئن شوید که شناسه مشتری OAuth و راز مربوطه نیز مشخص شده باشد.

  2. همچنین در بخش Authentication ، مطمئن شوید دامنه ای که صفحه ورود شما در آن رندر می شود نیز به لیست دامنه های مجاز اضافه شده است.

  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 ، بخش Authentication را باز کرده و ورود به سیستم شماره تلفن را فعال کنید.

  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 استفاده کنید.