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

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

শুরু করার আগে

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

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

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

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

উপরের তথ্যগুলো পাওয়ার পর, আপনার Firebase প্রোজেক্টের জন্য সাইন-ইন প্রোভাইডার হিসেবে OpenID Connect সক্রিয় করুন:

  1. আপনার জাভাস্ক্রিপ্ট প্রজেক্টে ফায়ারবেস যুক্ত করুন

  2. আপনি যদি Firebase Authentication with Identity Platform এ আপগ্রেড না করে থাকেন, তবে তা করুন। OpenID Connect অথেনটিকেশন শুধুমাত্র আপগ্রেড করা প্রজেক্টগুলিতেই উপলব্ধ।

  3. Firebase কনসোলের সাইন-ইন প্রোভাইডার্স পৃষ্ঠায়, ‘Add new provider’-এ ক্লিক করুন এবং তারপরে ‘OpenID Connect’-এ ক্লিক করুন।

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

    আপনার প্রোভাইডার সমর্থন করলে সর্বদা কোড ফ্লো ব্যবহার করা উচিত । ইমপ্লিসিট ফ্লো কম নিরাপদ এবং এর ব্যবহার কঠোরভাবে নিরুৎসাহিত করা হয়।

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

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

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

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

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

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

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

    Web

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('oidc.example-provider');
    

    Web

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
    
  2. ঐচ্ছিক : OAuth অনুরোধের সাথে আপনি যে অতিরিক্ত কাস্টম OAuth প্যারামিটারগুলো পাঠাতে চান, তা নির্দিষ্ট করুন।

    Web

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

    Web

    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 স্কোপগুলো নির্দিষ্ট করুন, যেগুলো আপনি অথেনটিকেশন প্রোভাইডারের কাছ থেকে অনুরোধ করতে চান।

    Web

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

    Web

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

    আপনার প্রোভাইডার কোন কোন স্কোপ সাপোর্ট করে, তা জেনে নিন।

  4. OAuth প্রোভাইডার অবজেক্ট ব্যবহার করে Firebase-এর সাথে প্রমাণীকরণ করুন।

    আপনি ব্যবহারকারীকে প্রোভাইডারের সাইন-ইন পেজে রিডাইরেক্ট করতে পারেন অথবা একটি পপ-আপ ব্রাউজার উইন্ডোতে সাইন-ইন পেজটি খুলতে পারেন।

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

    signInWithRedirect() কল করে প্রোভাইডারের সাইন-ইন পেজে রিডাইরেক্ট করুন:

    Web

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);
    

    Web

    firebase.auth().signInWithRedirect(provider);
    

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

    Web

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

    Web

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

    পপ-আপ প্রবাহ

    Web

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

    Web

    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 সাইন-ইন প্রক্রিয়াটি প্রয়োগ করা থাকে, তাহলে আপনি সরাসরি ফায়ারবেসের সাথে প্রমাণীকরণের জন্য আইডি টোকেনটি ব্যবহার করতে পারেন:

Web

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

Web

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