টোকেন বেসড সিকিউরিটি (JWT)

JSON Web Token (JWT) হল একটি ওপেন স্ট্যান্ডার্ড (RFC 7519) যা নিরাপদভাবে দুটি পার্টির মধ্যে ডেটা ট্রান্সফার করার জন্য ব্যবহৃত হয়। এটি সাধারণত ইউজার অথেন্টিকেশন এবং অথরাইজেশনে ব্যবহৃত হয়। Vue.js অ্যাপ্লিকেশনগুলোতে JWT (Token-based Authentication) ব্যবহার করার মাধ্যমে আপনি সহজেই নিরাপদ অথেন্টিকেশন প্রক্রিয়া তৈরি করতে পারেন, যেখানে ইউজারের ডেটা ক্লায়েন্ট সাইডে নিরাপদে সংরক্ষিত থাকে এবং সার্ভার সাইডে কেবলমাত্র একটি টোকেন যাচাই করা হয়।

এই টিউটোরিয়ালে, আমরা JWT কীভাবে Vue.js অ্যাপ্লিকেশনে ব্যবহার করতে পারি তা দেখবো, যেমন লগইন করার পর টোকেন সংগ্রহ করা, টোকেন দিয়ে API কল করা এবং লগআউট করা।

১. JWT কী?

JWT (JSON Web Token) একটি ছোট, URL-safe টোকেন যা দুটি অংশে বিভক্ত থাকে:

1. Header: এটি টোকেনের ধরণ (হাস্তা করার জন্য JWT) এবং অ্যালগরিদম নির্ধারণ করে (যেমন HMAC SHA256 বা RSA)।
2. Payload: এটি টোকেনের ভিতরে থাকা ডেটা (claims)। এটি ইউজারের তথ্য যেমন, ইউজারের আইডি, রোলস, এক্সপিরেশন টাইম ইত্যাদি ধারণ করতে পারে।
3. Signature: এটি হেডার এবং পে-লোডের সিকিউরিটি অংশ, যাতে টোকেনটি পরিবর্তন না করা হয়।

একটি সাধারণ JWT এইভাবে দেখতে পারে:

xxxxx.yyyyy.zzzzz

• xxxxx: Header
• yyyyy: Payload
• zzzzz: Signature

২. JWT Authentication Workflow

1. লগইন: ইউজার তার ক্রেডেনশিয়ালস (যেমন ইউজারনেম এবং পাসওয়ার্ড) প্রদান করেন। সার্ভার তা যাচাই করে একটি JWT টোকেন ফেরত দেয়।
2. API কল: ইউজার টোকেন সহ API এ রিকোয়েস্ট পাঠান। টোকেনটি হেডারে পাঠানো হয় (সাধারণত Authorization: Bearer <token>)।
3. টোকেন যাচাই: সার্ভার টোকেন যাচাই করে এবং ইউজারকে প্রমাণীকৃত হিসেবে চিহ্নিত করে।
4. লগআউট: ইউজার যখন লগআউট করেন, তখন টোকেন ক্লায়েন্ট সাইড থেকে মুছে দেওয়া হয়।

৩. Vue.js এ JWT ব্যবহার করা

Vue.js অ্যাপ্লিকেশনে JWT ব্যবহারের জন্য কিছু সাধারণ পদক্ষেপ অনুসরণ করতে হয়:

1. লগইন পেজ তৈরি করা: ইউজার তার ক্রেডেনশিয়ালস পাঠাবে এবং সার্ভার থেকে JWT টোকেন নেবে।
2. টোকেন সংরক্ষণ করা: JWT টোকেন সাধারণত LocalStorage বা SessionStorage এ সংরক্ষণ করা হয়।
3. API কলের জন্য টোকেন ব্যবহার করা: API কলের সময় হেডারে JWT পাঠানো হয়।
4. টোকেন যাচাই করা: সার্ভার এই টোকেন যাচাই করে ব্যবহারকারীকে অনুমতি দেয়।

৪. JWT Authentication Flow Example in Vue.js

৪.১. লগইন পেজ

লগইন করার পর সার্ভার থেকে JWT টোকেন গ্রহণ করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো:

<!-- Login.vue -->
<template>
  <div>
    <form @submit.prevent="login">
      <label for="email">Email</label>
      <input type="email" v-model="email" required>

      <label for="password">Password</label>
      <input type="password" v-model="password" required>

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('https://your-api.com/login', {
          email: this.email,
          password: this.password
        });
        
        // Store the token in LocalStorage or SessionStorage
        localStorage.setItem('token', response.data.token);

        // Redirect to dashboard or other page
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('Login failed', error);
      }
    }
  }
};
</script>

এখানে, ইউজার লগইন করার পর সার্ভার থেকে JWT টোকেন পাঠানো হয় এবং তা LocalStorage এ সংরক্ষিত হয়।

৪.২. JWT টোকেন সহ API কল

JWT টোকেন সহ API কল করার জন্য, Authorization হেডারে টোকেন পাঠাতে হবে। টোকেন প্রেরণের উদাহরণ:

// APIService.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://your-api.com',
  headers: {
    'Content-Type': 'application/json'
  }
});

// Add token to Authorization header
api.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

export default api;

এখানে, axios interceptor ব্যবহার করা হয়েছে যাতে প্রতিটি API রিকোয়েস্টের সাথে JWT টোকেন যোগ করা হয়। যখন API কল হবে, টোকেন হেডারে পাঠানো হবে।

৪.৩. লগআউট

JWT টোকেন মুছে ফেলা বা লগআউট করার প্রক্রিয়া খুবই সোজা, শুধু LocalStorage বা SessionStorage থেকে টোকেন মুছে দিন।

// Logout.vue
<template>
  <div>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      // Remove token from local storage
      localStorage.removeItem('token');

      // Redirect to login page
      this.$router.push('/login');
    }
  }
};
</script>

এখানে, ইউজার লগআউট করার পর টোকেনটি LocalStorage থেকে মুছে ফেলা হয় এবং ইউজারকে লগইন পেজে পাঠানো হয়।

৫. JWT এর সিকিউরিটি

• HTTPS ব্যবহার করা: সব সময় HTTPS (SSL/TLS) ব্যবহার করুন যাতে টোকেনের মতো সংবেদনশীল ডেটা নিরাপদে ট্রান্সফার হয়।
• টোকেন এক্সপিরেশন: JWT টোকেনের জন্য এক্সপিরেশন টাইম সেট করা উচিত, যাতে একটি নির্দিষ্ট সময় পর টোকেনটি অকার্যকর হয়ে যায়। সাধারণত JWT টোকেনের ভিতরে exp (expiry) claim থাকে।
• রিফ্রেশ টোকেন: JWT টোকেনের মেয়াদ শেষ হলে, আপনি Refresh Token ব্যবহার করে নতুন টোকেন পেতে পারেন, তবে এটি নিরাপদে সংরক্ষণ করতে হবে।

সারাংশ

• JWT (JSON Web Token) হল একটি নিরাপদ উপায় যেটি ইউজার অথেন্টিকেশন এবং অথরাইজেশনে ব্যবহৃত হয়।
• Vue.js অ্যাপ্লিকেশনগুলোতে JWT ব্যবহার করতে, লগইন এর পর টোকেন সংগ্রহ করতে হয়, তারপর তা API কলের জন্য হেডারে পাঠানো হয়।
• JWT ব্যবহার করার সময় HTTPS, টোকেন এক্সপিরেশন, এবং রিফ্রেশ টোকেন ব্যবহারের মাধ্যমে সিকিউরিটি নিশ্চিত করতে হবে।

এইভাবে Vue.js অ্যাপ্লিকেশনগুলোতে JWT টোকেন বেসড অথেন্টিকেশন ব্যবহারের মাধ্যমে আপনি ইউজারের নিরাপত্তা এবং ডেটা সুরক্ষা নিশ্চিত করতে পারেন।