ওয়েব অ্যাপে OpenID কানেক্ট ব্যবহার করে প্রমাণীকরণ করুন

আপনি যদি আইডেন্টিটি প্ল্যাটফর্মের সাথে Firebase প্রমাণীকরণে আপগ্রেড করে থাকেন, তাহলে আপনি আপনার পছন্দের OpenID Connect (OIDC) অনুগত প্রদানকারী ব্যবহার করে Firebase-এর মাধ্যমে আপনার ব্যবহারকারীদের প্রমাণীকরণ করতে পারেন। এটি ফায়ারবেস দ্বারা স্থানীয়ভাবে সমর্থিত নয় এমন পরিচয় প্রদানকারী ব্যবহার করা সম্ভব করে।

তুমি শুরু করার আগে

একটি OIDC প্রদানকারী ব্যবহার করে ব্যবহারকারীদের সাইন ইন করতে, আপনাকে প্রথমে প্রদানকারীর কাছ থেকে কিছু তথ্য সংগ্রহ করতে হবে:

  • ক্লায়েন্ট আইডি : প্রদানকারীর জন্য অনন্য একটি স্ট্রিং যা আপনার অ্যাপকে শনাক্ত করে। আপনার সরবরাহকারী আপনার সমর্থন করা প্রতিটি প্ল্যাটফর্মের জন্য আপনাকে একটি আলাদা ক্লায়েন্ট আইডি বরাদ্দ করতে পারে। এটি আপনার প্রদানকারীর দ্বারা জারি করা আইডি টোকেনে aud দাবির একটি মান।

  • ক্লায়েন্ট সিক্রেট : একটি গোপন স্ট্রিং যা প্রদানকারী একটি ক্লায়েন্ট আইডির মালিকানা নিশ্চিত করতে ব্যবহার করে। প্রতিটি ক্লায়েন্ট আইডির জন্য, আপনার একটি মিলিত ক্লায়েন্ট গোপনীয়তার প্রয়োজন হবে। (যদি আপনি প্রমাণীকরণ কোড ফ্লো ব্যবহার করেন তবেই এই মানটি প্রয়োজন, যা দৃঢ়ভাবে সুপারিশ করা হয়।)

  • ইস্যুকারী : একটি স্ট্রিং যা আপনার প্রদানকারীকে সনাক্ত করে। এই মানটি অবশ্যই একটি URL হতে হবে যা /.well-known/openid-configuration এর সাথে যুক্ত হলে, প্রদানকারীর OIDC আবিষ্কারের নথির অবস্থান। উদাহরণস্বরূপ, যদি ইস্যুকারী https://auth.example.com হয়, তাহলে আবিষ্কারের নথিটি অবশ্যই https://auth.example.com/.well-known/openid-configuration এ উপলব্ধ হতে হবে।

আপনার কাছে উপরের তথ্য পাওয়ার পরে, আপনার Firebase প্রকল্পের জন্য একটি সাইন-ইন প্রদানকারী হিসাবে OpenID Connect সক্ষম করুন:

  1. আপনার JavaScript প্রকল্পে Firebase যোগ করুন ।

  2. আপনি যদি আইডেন্টিটি প্ল্যাটফর্মের সাথে ফায়ারবেস প্রমাণীকরণে আপগ্রেড না করে থাকেন তবে তা করুন৷ OpenID Connect প্রমাণীকরণ শুধুমাত্র আপগ্রেড করা প্রকল্পগুলিতে উপলব্ধ।

  3. Firebase কনসোলের সাইন-ইন প্রদানকারী পৃষ্ঠায়, নতুন প্রদানকারী যোগ করুন-এ ক্লিক করুন এবং তারপর OpenID Connect-এ ক্লিক করুন।

  4. আপনি অনুমোদন কোড প্রবাহ বা অন্তর্নিহিত অনুদান প্রবাহ ব্যবহার করবেন কিনা তা নির্বাচন করুন৷

    যদি আপনার প্রদানকারী এটি সমর্থন করে তবে আপনার সর্বদা কোড প্রবাহ ব্যবহার করা উচিত । অন্তর্নিহিত প্রবাহ কম নিরাপদ এবং এটি ব্যবহার করা দৃঢ়ভাবে নিরুৎসাহিত করা হয়।

  5. এই প্রদানকারীর একটি নাম দিন. যে প্রোভাইডার আইডি তৈরি হয়েছে তা নোট করুন: oidc.example-provider এর মত কিছু। আপনি যখন আপনার অ্যাপে সাইন-ইন কোড যোগ করবেন তখন আপনার এই আইডির প্রয়োজন হবে।

  6. আপনার ক্লায়েন্ট আইডি এবং ক্লায়েন্ট সিক্রেট এবং আপনার প্রদানকারীর ইস্যুকারী স্ট্রিং উল্লেখ করুন। এই মানগুলি অবশ্যই আপনার প্রদানকারীর দ্বারা নির্ধারিত মানগুলির সাথে হুবহু মেলে৷

  7. আপনার পরিবর্তন সংরক্ষণ করুন.

Firebase SDK দিয়ে সাইন-ইন ফ্লো পরিচালনা করুন

আপনার OIDC প্রদানকারী ব্যবহার করে Firebase-এর মাধ্যমে আপনার ব্যবহারকারীদের প্রমাণীকরণ করার সবচেয়ে সহজ উপায় হল Firebase SDK-এর মাধ্যমে সম্পূর্ণ সাইন-ইন প্রবাহ পরিচালনা করা।

Firebase JavaScript SDK দিয়ে সাইন-ইন প্রবাহ পরিচালনা করতে, এই ধাপগুলি অনুসরণ করুন:

  1. Firebase কনসোলে আপনি যে প্রোভাইডার আইডি পেয়েছেন সেটি ব্যবহার করে একটি OAuthProvider এর একটি উদাহরণ তৈরি করুন।

    ওয়েব মডুলার API

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    ওয়েব নামস্থান API

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

  2. ঐচ্ছিক : অতিরিক্ত কাস্টম OAuth প্যারামিটার নির্দিষ্ট করুন যা আপনি OAuth অনুরোধের সাথে পাঠাতে চান।

    ওয়েব মডুলার API

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    ওয়েব নামস্থান API

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    এটি সমর্থন করে এমন পরামিতিগুলির জন্য আপনার প্রদানকারীর সাথে যোগাযোগ করুন। মনে রাখবেন যে আপনি setCustomParameters দিয়ে Firebase-প্রয়োজনীয় প্যারামিটার পাস করতে পারবেন না। এই প্যারামিটারগুলি হল client_id , response_type , redirect_uri , state , scope এবং response_mode ।

  3. ঐচ্ছিক : মৌলিক প্রোফাইলের বাইরে অতিরিক্ত OAuth 2.0 স্কোপ নির্দিষ্ট করুন যা আপনি প্রমাণীকরণ প্রদানকারীর কাছ থেকে অনুরোধ করতে চান।

    ওয়েব মডুলার API

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    ওয়েব নামস্থান API

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    এটি সমর্থন করে এমন সুযোগগুলির জন্য আপনার প্রদানকারীর সাথে যোগাযোগ করুন৷

  4. OAuth প্রদানকারী অবজেক্ট ব্যবহার করে Firebase দিয়ে প্রমাণীকরণ করুন।

    আপনি হয় ব্যবহারকারীকে প্রদানকারীর সাইন-ইন পৃষ্ঠায় পুনঃনির্দেশ করতে পারেন অথবা একটি পপ-আপ ব্রাউজার উইন্ডোতে সাইন-ইন পৃষ্ঠা খুলতে পারেন৷

    পুনঃনির্দেশিত প্রবাহ

    signInWithRedirect() কল করে প্রদানকারীর সাইন-ইন পৃষ্ঠায় পুনঃনির্দেশ করুন :

    ওয়েব মডুলার API

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    ওয়েব নামস্থান API

    firebase.auth().signInWithRedirect(provider);

    ব্যবহারকারী সাইন-ইন সম্পূর্ণ করার পরে এবং আপনার অ্যাপে ফিরে আসার পরে, আপনি getRedirectResult() কল করে সাইন-ইন ফলাফল পেতে পারেন।

    ওয়েব মডুলার API

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    ওয়েব নামস্থান API

    firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    পপ-আপ প্রবাহ

    ওয়েব মডুলার API

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available using getAdditionalUserInfo(result)

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    ওয়েব নামস্থান API

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

  5. যদিও উপরের উদাহরণগুলি সাইন-ইন প্রবাহের উপর ফোকাস করে, আপনি linkWithRedirect() এবং linkWithPopup() ব্যবহার করে একটি OIDC প্রদানকারীকে একটি বিদ্যমান ব্যবহারকারীর সাথে লিঙ্ক করতে একই প্যাটার্ন ব্যবহার করতে পারেন এবং reauthenticateWithRedirect() এবং reauthenticateWithPopup() ব্যবহার করে একজন ব্যবহারকারীকে পুনরায় প্রমাণীকরণ করতে পারেন, যা সাম্প্রতিক লগইন প্রয়োজন এমন সংবেদনশীল ক্রিয়াকলাপের জন্য নতুন শংসাপত্র পুনরুদ্ধার করতে ব্যবহার করা যেতে পারে।

সাইন-ইন প্রবাহ ম্যানুয়ালি পরিচালনা করুন

আপনি যদি ইতিমধ্যেই আপনার অ্যাপে OpenID Connect সাইন-ইন প্রবাহ প্রয়োগ করে থাকেন, তাহলে Firebase-এর সাথে প্রমাণীকরণের জন্য আপনি আইডি টোকেনটি সরাসরি ব্যবহার করতে পারেন:

ওয়েব মডুলার API

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

ওয়েব নামস্থান API

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });