FirebaseUI এর মাধ্যমে আপনার ওয়েব অ্যাপে সহজেই সাইন-ইন করুন

FirebaseUI হলো Firebase Authentication SDK-এর উপর ভিত্তি করে নির্মিত একটি লাইব্রেরি, যা আপনার অ্যাপে ব্যবহারের জন্য ড্রপ-ইন UI ফ্লো প্রদান করে। FirebaseUI নিম্নলিখিত সুবিধাগুলো প্রদান করে:

  • একাধিক প্রোভাইডার - ইমেল/পাসওয়ার্ড, ইমেল লিঙ্ক, ফোন অথেন্টিকেশন, গুগল, ফেসবুক, টুইটার এবং গিটহাব সাইন-ইন এর জন্য সাইন-ইন ফ্লো।
  • অ্যাকাউন্ট লিঙ্কিং - বিভিন্ন আইডেন্টিটি প্রোভাইডারের মধ্যে ব্যবহারকারীর অ্যাকাউন্টগুলো নিরাপদে লিঙ্ক করার প্রক্রিয়া।
  • কাস্টমাইজেশন - আপনার অ্যাপের প্রয়োজন অনুযায়ী FirebaseUI-এর CSS স্টাইলগুলো ওভাররাইড করুন। এছাড়াও, FirebaseUI ওপেন সোর্স হওয়ায়, আপনি প্রজেক্টটি ফর্ক করে আপনার প্রয়োজন অনুযায়ী নিখুঁতভাবে কাস্টমাইজ করতে পারেন।
  • এক-ট্যাপে সাইন-আপ এবং স্বয়ংক্রিয় সাইন-ইন - দ্রুত বিভিন্ন ডিভাইসে সাইন-ইন করার জন্য এক-ট্যাপে সাইন-আপের সাথে স্বয়ংক্রিয় ইন্টিগ্রেশন।
  • স্থানীয়করণকৃত ইউআই - ৪০টিরও বেশি ভাষার জন্য আন্তর্জাতিকীকরণ।
  • বেনামী ব্যবহারকারীদের আপগ্রেড করা - সাইন-ইন/সাইন-আপের মাধ্যমে বেনামী ব্যবহারকারীদের আপগ্রেড করার সুবিধা। আরও তথ্যের জন্য, ‘বেনামী ব্যবহারকারীদের আপগ্রেড করা’ বিভাগটি দেখুন।

শুরু করার আগে

  1. আপনার ওয়েব অ্যাপ্লিকেশনে Firebase Authentication যোগ করুন এবং নিশ্চিত করুন যে আপনি v9 বা তার পরবর্তী নেমস্পেসড API ব্যবহার করছেন (মডিউলার API নয় ; উপরের সাইডবার দেখুন)।

  2. নিম্নলিখিত বিকল্পগুলির মধ্যে যেকোনো একটির মাধ্যমে FirebaseUI অন্তর্ভুক্ত করুন:

    • সিডিএন

      আপনার পেজের <head> ট্যাগে, Firebase কনসোল থেকে পাওয়া ইনিশিয়ালাইজেশন স্নিপেটের নিচে নিম্নলিখিত স্ক্রিপ্ট এবং CSS ফাইলটি অন্তর্ভুক্ত করুন:

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

    • এনপিএম মডিউল

      নিম্নলিখিত কমান্ড ব্যবহার করে npm-এর মাধ্যমে FirebaseUI এবং এর নির্ভরতাগুলি ইনস্টল করুন:

      $ npm install firebaseui --save

      আপনার সোর্স ফাইলগুলোর মধ্যে নিম্নলিখিত মডিউলগুলো require :

      var firebase = require('firebase');
var firebaseui = require('firebaseui');

    • বোয়ার উপাদান

      নিম্নলিখিত কমান্ডটি ব্যবহার করে Bower-এর মাধ্যমে FirebaseUI এবং এর নির্ভরতাগুলি ইনস্টল করুন:

      $ 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 ইম্পোর্ট করার পর, Auth UI ইনিশিয়ালাইজ করুন।

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

সাইন-ইন পদ্ধতি সেট আপ করুন

ফায়ারবেস ব্যবহার করে ব্যবহারকারীদের সাইন ইন করানোর আগে, আপনাকে অবশ্যই সেই সাইন-ইন পদ্ধতিগুলো সক্রিয় এবং কনফিগার করতে হবে যা আপনি সমর্থন করতে চান।

ইমেল ঠিকানা এবং পাসওয়ার্ড

  1. Firebase কনসোলে, Security > Authentication- এ যান।

  2. সাইন-ইন পদ্ধতি ট্যাবে, ইমেল/পাসওয়ার্ড সাইন-ইন প্রদানকারীকে সক্রিয় করুন।

  3. FirebaseUI signInOptions তালিকায় ইমেল প্রদানকারীর আইডিটি যোগ করুন।

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

  4. ঐচ্ছিক : ব্যবহারকারীকে একটি ডিসপ্লে নাম প্রবেশ করাতে বাধ্য করার জন্য EmailAuthProvider কনফিগার করা যেতে পারে (ডিফল্টরূপে এটি ' true ' থাকে)।

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

  1. Firebase কনসোলে, Security > Authentication- এ যান।

  2. সাইন-ইন পদ্ধতি ট্যাবে, ইমেল/পাসওয়ার্ড সাইন-ইন প্রদানকারীকে সক্রিয় করুন। মনে রাখবেন, ইমেল লিঙ্ক সাইন-ইন ব্যবহার করার জন্য ইমেল/পাসওয়ার্ড সাইন-ইন অবশ্যই সক্রিয় থাকতে হবে।

  3. একই বিভাগে, ইমেল লিঙ্ক (পাসওয়ার্ডবিহীন সাইন-ইন) সাইন-ইন প্রদানকারীকে সক্রিয় করুন।

  4. সংরক্ষণ করুন- এ ক্লিক করুন।

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

  6. শর্তসাপেক্ষে সাইন-ইন UI রেন্ডার করার সময় (যা সিঙ্গেল পেজ অ্যাপের জন্য প্রযোজ্য), URL-টি ইমেল সাইন-ইন লিঙ্কের সাথে সম্পর্কিত কিনা এবং সাইন-ইন সম্পন্ন করার জন্য UI-টি রেন্ডার করা প্রয়োজন কিনা, তা শনাক্ত করতে ui.isPendingRedirect() ব্যবহার করুন। 

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

  7. ঐচ্ছিক : ইমেল লিঙ্ক সাইন-ইন-এর জন্য 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 প্রদানকারী (গুগল, ফেসবুক, টুইটার এবং গিটহাব)

  1. Firebase কনসোলে, Security > Authentication- এ যান।

  2. সাইন-ইন পদ্ধতি ট্যাবে, নির্দিষ্ট OAuth প্রোভাইডারের সাইন-ইন সক্ষম করুন। নিশ্চিত করুন যে সংশ্লিষ্ট OAuth ক্লায়েন্ট আইডি এবং সিক্রেটও উল্লেখ করা আছে।

  3. যদি আগে থেকে না করে থাকেন, তাহলে আপনার অ্যাপের ডোমেইনটি অনুমোদন করুন:

    1. Firebase কনসোলে, Security > Authentication > Settings ট্যাবে যান।

    2. অনুমোদিত ডোমেইন বিভাগে, 'ডোমেইন যোগ করুন'- এ ক্লিক করুন এবং আপনার ডোমেইনটি যোগ করুন।

  4. FirebaseUI-এর signInOptions তালিকায় OAuth প্রোভাইডার আইডিটি যোগ করুন। 

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

  5. ঐচ্ছিক : কাস্টম স্কোপ, অথবা প্রতিটি প্রোভাইডারের জন্য কাস্টম 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 কনসোলে, Security > Authentication- এ যান।

  2. সাইন-ইন পদ্ধতি ট্যাবে, ফোন সাইন-ইন প্রদানকারীকে সক্রিয় করুন।

  3. যদি আগে থেকে না করে থাকেন, তাহলে আপনার অ্যাপের ডোমেইনটি অনুমোদন করুন:

    1. Firebase কনসোলে, Security > Authentication > Settings ট্যাবে যান।

    2. অনুমোদিত ডোমেইন বিভাগে, 'ডোমেইন যোগ করুন'- এ ক্লিক করুন এবং আপনার ডোমেইনটি যোগ করুন।

  4. FirebaseUI signInOptions তালিকায় ফোন নম্বর প্রোভাইডার আইডিটি যোগ করুন। 

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

  5. ঐচ্ছিক : reCAPTCHA দৃশ্যমান হবে নাকি অদৃশ্যমান হবে, তা নির্ধারণের জন্য PhoneAuthProvider-কে কাস্টম 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 সাইন-ইন প্রক্রিয়াটি শুরু করতে, অন্তর্নিহিত Auth ইনস্ট্যান্সটি পাস করে FirebaseUI ইনস্ট্যান্সটি ইনিশিয়ালাইজ করুন। 

// 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 কনফিগারেশন নির্দিষ্ট করুন (সমর্থিত প্রোভাইডার, UI কাস্টমাইজেশন, সফলতার কলব্যাক ইত্যাদি)। 

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

বেনামী ব্যবহারকারীদের আপগ্রেড করা হচ্ছে

বেনামী ব্যবহারকারী আপগ্রেড সক্ষম করা

যখন কোনো বেনামী ব্যবহারকারী একটি স্থায়ী অ্যাকাউন্ট দিয়ে সাইন ইন বা সাইন আপ করেন, তখন আপনি নিশ্চিত করতে চাইবেন যে ব্যবহারকারী সাইন আপ করার আগে যা করছিলেন তা যেন চালিয়ে যেতে পারেন। এটি করার জন্য, সাইন-ইন UI কনফিগার করার সময় কেবল autoUpgradeAnonymousUsers true তে সেট করুন (এই অপশনটি ডিফল্টরূপে নিষ্ক্রিয় থাকে)।

বেনামী ব্যবহারকারীর আপগ্রেড মার্জ দ্বন্দ্ব পরিচালনা করা

এমন কিছু পরিস্থিতি তৈরি হয় যখন একজন ব্যবহারকারী, যিনি প্রথমে বেনামে সাইন ইন করেছেন, তিনি একটি বিদ্যমান Firebase ব্যবহারকারীর অ্যাকাউন্টে আপগ্রেড করার চেষ্টা করেন। যেহেতু একজন বিদ্যমান ব্যবহারকারীকে অন্য একজন বিদ্যমান ব্যবহারকারীর সাথে লিঙ্ক করা যায় না, তাই উপরোক্ত ঘটনাটি ঘটলে FirebaseUI firebaseui/anonymous-upgrade-merge-conflict এরর কোড সহ signInFailure কলব্যাকটি ট্রিগার করবে। এরর অবজেক্টটিতে স্থায়ী ক্রেডেনশিয়ালটিও থাকবে। সাইন-ইন সম্পন্ন করার জন্য কলব্যাকে স্থায়ী ক্রেডেনশিয়াল দিয়ে সাইন-ইন করার প্রক্রিয়াটি ট্রিগার করা উচিত। 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 ইস্যু ট্র্যাকার ব্যবহার করুন।