Ember Simple Auth ব্যবহার করে ইউজার Authentication

Ember Simple Auth একটি জনপ্রিয় Ember.js অ্যাডন যা অ্যাপ্লিকেশনে ইউজার অথেন্টিকেশন এবং অথরাইজেশন পরিচালনা করতে সহায়ক। এটি ইউজার লগইন, লগআউট, টোকেন ব্যবস্থাপনা এবং সেশনের স্টোরেজ সহজভাবে পরিচালনা করে। Ember Simple Auth-এর সাহায্যে আপনি আপনার Ember অ্যাপ্লিকেশনে নিরাপদভাবে ইউজার অথেন্টিকেশন যোগ করতে পারেন।

এখানে আমরা Ember Simple Auth ব্যবহার করে কীভাবে ইউজার অথেন্টিকেশন ইনস্টল, কনফিগার এবং পরিচালনা করা যায়, তা বিস্তারিতভাবে দেখব।

1. Ember Simple Auth ইনস্টলেশন

Ember Simple Auth ইনস্টল করতে, আপনি Ember CLI ব্যবহার করবেন। প্রথমে এটি ইনস্টল করতে হবে:

ember install ember-simple-auth

এটি ember-simple-auth অ্যাডন ইনস্টল করবে এবং আপনার প্রজেক্টে প্রয়োজনীয় কনফিগারেশন সেটআপ করবে।

2. Ember Simple Auth কনফিগারেশন

এখন আপনাকে Ember Simple Auth এর কনফিগারেশন করতে হবে। সাধারণত, আপনি app/authenticators/application.js এবং app/authorizers/application.js ফাইল তৈরি করবেন, যেগুলি ইউজারের অথেন্টিকেশন এবং অথরাইজেশন পরিচালনা করবে।

২.১ Authenticator তৈরি করা

একটি authenticator তৈরি করতে, আপনাকে একটি ফাইল তৈরি করতে হবে যেখানে আপনি ইউজারের লগইন তথ্য যাচাই করবেন। এখানে আমরা একটি টোকেন ভিত্তিক অথেন্টিকেশন ব্যবস্থার উদাহরণ দেখব।

ember generate authenticator oauth2

এটি app/authenticators/oauth2.js ফাইল তৈরি করবে। আপনি এই ফাইলে আপনার টোকেন যাচাই এবং পুনরুদ্ধারের লজিক লিখবেন।

// app/authenticators/oauth2.js
import OAuth2PasswordGrant from 'ember-simple-auth/authenticators/oauth2-password-grant';

export default OAuth2PasswordGrant.extend({
  serverTokenEndpoint: 'https://api.example.com/token',  // API endpoint
});

এখানে, OAuth2PasswordGrant ব্যবহার করে token ফেচ এবং সংরক্ষণ করা হবে।

২.২ Authorizer তৈরি করা

এখন, আপনাকে authorizer তৈরি করতে হবে যা টোকেন সংগ্রহ এবং প্রেরণ করবে।

ember generate authorizer application

এটি app/authorizers/application.js ফাইল তৈরি করবে।

// app/authorizers/application.js
import Base from 'ember-simple-auth/authorizers/base';

export default Base.extend({
  authorize(data, block) {
    const token = data.authenticated.access_token;
    block('Authorization', `Bearer ${token}`);
  }
});

এখানে, Authorization হেডারে Bearer token যোগ করা হচ্ছে যাতে এটি API রিকোয়েস্টে পাঠানো যায়।

3. Ember Simple Auth কনফিগারেশন এবং সংযোগ

এখন, আপনাকে Ember Simple Auth এর কনফিগারেশন app/initializers/ember-simple-auth.js ফাইলে করতে হবে।

// app/initializers/ember-simple-auth.js
import { initialize } from 'ember-simple-auth/initializers/session';
import { inject as service } from '@ember/service';

export function initialize(application) {
  application.inject('route', 'session', service());
}

export default {
  initialize
};

এখানে, session service প্রত্যেক রাউটে ইনজেক্ট করা হয়েছে যাতে অ্যাপ্লিকেশন জুড়ে সেশন ডেটা অ্যাক্সেস করা যায়।

4. UI (User Interface) তৈরি করা

এখন, আপনাকে লগইন ফর্ম তৈরি করতে হবে যাতে ইউজার নাম এবং পাসওয়ার্ড ইনপুট করতে পারে। Ember Simple Auth-এর সাহায্যে আপনি লগইন ফর্মটি তৈরি করতে পারেন।

৪.১ Login কম্পোনেন্ট তৈরি করা

ember generate component login-form

এটি একটি নতুন কম্পোনেন্ট তৈরি করবে, যা আপনার login ফর্মের জন্য ব্যবহৃত হবে।

// app/components/login-form.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';

export default class LoginFormComponent extends Component {
  @service session;

  username = '';
  password = '';

  @action
  async login() {
    try {
      await this.session.authenticate('authenticator:oauth2', this.username, this.password);
      // Redirect to dashboard or home
      this.transitionToRoute('dashboard');
    } catch (error) {
      alert('Login failed');
    }
  }
}

এখানে, login অ্যাকশনটি session.authenticate কল করে এবং ইউজারকে লগইন করে। যদি লগইন সফল হয়, তবে ইউজারকে dashboard রাউটে রিডাইরেক্ট করা হবে।

৪.২ Login টেমপ্লেট

<!-- app/templates/components/login-form.hbs -->
<form {{on "submit" this.login}}>
  <label for="username">Username</label>
  <input id="username" type="text" value={{this.username}} required>
  
  <label for="password">Password</label>
  <input id="password" type="password" value={{this.password}} required>

  <button type="submit">Login</button>
</form>

এখানে, ইউজারের username এবং password ইনপুট ফিল্ডে নেওয়া হচ্ছে এবং লগইন বাটনে ক্লিক করলে login অ্যাকশন ট্রিগার হবে।

5. Authentication এর পরে রিডাইরেকশন

একবার ইউজার লগইন সফল হলে, আপনি তাকে অ্যাপ্লিকেশনের dashboard বা অন্য কোনো প্রোটেক্টেড রাউটে রিডাইরেক্ট করতে পারেন। এটি Ember Simple Auth এর মাধ্যমে সহজে করা যায়।

// app/routes/application.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {
  @service session;

  beforeModel() {
    if (!this.session.isAuthenticated) {
      this.transitionTo('login');
    }
  }
}

এখানে, beforeModel হুক ব্যবহার করে চেক করা হচ্ছে যে ইউজার লগইন করেছেন কিনা। যদি না করেন, তবে তাকে login রাউটে রিডাইরেক্ট করা হবে।

6. Logout ফাংশন

এবার আপনি ইউজারের logout ফাংশনও তৈরি করতে পারেন, যা সেশন শেষ করবে এবং ইউজারকে লগআউট করবে।

// app/components/logout-button.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';

export default class LogoutButtonComponent extends Component {
  @service session;

  @action
  logout() {
    this.session.invalidate();  // Logout
    this.transitionToRoute('login');
  }
}

এখানে, logout অ্যাকশনটি session.invalidate() ব্যবহার করে সেশন ইন্টেরেকশন বন্ধ করবে এবং ইউজারকে লগইন পৃষ্ঠায় রিডাইরেক্ট করবে।

Ember Simple Auth এর মাধ্যমে আপনি সহজেই আপনার Ember.js অ্যাপ্লিকেশনে authentication এবং authorization ম্যানেজ করতে পারেন। এটি ইউজার লগইন, লগআউট, টোকেন ব্যবস্থাপনা এবং সেশন পরিচালনার জন্য কার্যকরী টুলস সরবরাহ করে। OAuth2 বা JWT ভিত্তিক অথেন্টিকেশন ব্যবস্থায় সহজেই কাজ করতে পারে এবং Ember.js অ্যাপ্লিকেশনে নিরাপত্তা নিশ্চিত করতে সহায়ক।