ওয়েব অ্যাপে OpenID Connect ব্যবহার করে যাচাইকরণ

আপনি Firebase Authentication with Identity Platform-এ আপগ্রেড করে থাকলে, আপনার পছন্দমতো OpenID Connect (OIDC) মেনে চলা প্রদানকারীর মাধ্যমে Firebase ব্যবহার করে আপনার ব্যবহারকারীদের যাচাই করতে পারবেন। এর ফলে 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. আপনি Firebase Authentication with Identity Platform-এ আপগ্রেড না করে থাকলে, তা করুন। OpenID Connect যাচাইকরণ শুধুমাত্র আপগ্রেড করা প্রোজেক্টে উপলভ্য।

  3. Firebase কনসোলে, নিরাপত্তা > যাচাইকরণ বিকল্পে যান।

  4. সাইন-ইন পদ্ধতি ট্যাবে, নতুন পরিষেবা প্রদানকারী যোগ করুন বিকল্পে ক্লিক করুন এবং তারপরে OpenID Connect বিকল্পে ক্লিক করুন।

  5. আপনি অনুমোদন কোড ফ্লো নাকি ইমপ্লিসিট গ্র্যান্ট ফ্লো ব্যবহার করবেন তা বেছে নিন।

    আপনার প্রদানকারী এটি সমর্থন করলে, আপনাকে সবসময় কোড ফ্লো ব্যবহার করতে হবে। ইমপ্লিসিট ফ্লো কম সুরক্ষিত এবং এটি ব্যবহার করার জন্য কঠোরভাবে নিষেধ করা হয়।

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

  7. আপনার ক্লায়েন্ট আইডি ও ক্লায়েন্ট সিক্রেট এবং আপনার প্রদানকারীর ইস্যুকারী স্ট্রিং উল্লেখ করুন। এইসব ভ্যালু আপনার পরিষেবা প্রদানকারীর অ্যাসাইন করা ভ্যালুর সাথে হুবহু মিলতে হবে।

  8. আপনার করা পরিবর্তন সেভ করুন।

Firebase SDK-এর মাধ্যমে সাইন-ইন ফ্লো ম্যানেজ করা

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

Firebase JavaScript SDK-এর মাধ্যমে সাইন-ইন ফ্লো ম্যানেজ করতে, এইসব ধাপ অনুসরণ করুন:

  1. Firebase Console-এ পাওয়া প্রোভাইডার আইডি ব্যবহার করে 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'
    });
    

    আপনার পরিষেবা প্রদানকারীর সাথে কথা বলে দেখুন যে কোন কোন প্যারামিটার কাজ করে। মনে রাখবেন, আপনি Firebase-এর প্রয়োজনীয় প্যারামিটার setCustomParameters-এর সাথে পাস করতে পারবেন না। এইসব প্যারামিটার হল 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 সাইন-ইন ফ্লো প্রয়োগ করে থাকেন, তাহলে আপনি Firebase-এর সাথে যাচাই করার জন্য সরাসরি ID টোকেন ব্যবহার করতে পারেন:

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