Web Development User Authentication এবং Authorization ব্যবস্থাপনা গাইড ও নোট

Framework7 দিয়ে মোবাইল এবং ওয়েব অ্যাপ্লিকেশনে User Authentication (ব্যবহারকারী প্রমাণীকরণ) এবং Authorization (অনুমোদন) ব্যবস্থা গড়ে তোলা অত্যন্ত গুরুত্বপূর্ণ। এই ব্যবস্থাগুলি নিশ্চিত করে যে শুধুমাত্র অনুমোদিত ব্যবহারকারীরা অ্যাপের নির্দিষ্ট অংশে প্রবেশ করতে পারে এবং ডেটা সুরক্ষিত থাকে। নিচে Framework7-এ ইউজার অথেনটিকেশন এবং অথরাইজেশন কিভাবে বাস্তবায়ন করবেন তার বিস্তারিত নির্দেশনা দেওয়া হলো।

১. ইউজার অথেনটিকেশন এবং অথরাইজেশন কী?

• Authentication (অথেনটিকেশন): এটি হলো ব্যবহারকারীর পরিচয় নিশ্চিত করার প্রক্রিয়া। সাধারণত, ব্যবহারকারী তাদের ইউজারনেম এবং পাসওয়ার্ড দিয়ে লগইন করে।
• Authorization (অথরাইজেশন): একবার ব্যবহারকারীর পরিচয় নিশ্চিত হয়ে গেলে, তাদের অ্যাপের নির্দিষ্ট অংশ বা ফিচারে প্রবেশের অনুমতি দেওয়া হয়। এটি নির্ধারণ করে কোন ব্যবহারকারী কোন রিসোর্স বা কার্যক্রমে অংশগ্রহণ করতে পারবেন।

২. Framework7-এ অথেনটিকেশন এবং অথরাইজেশন কিভাবে কাজ করে?

Framework7 মূলত একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, তাই অথেনটিকেশন এবং অথরাইজেশন ব্যবস্থাপনার জন্য আপনাকে ব্যাক-এন্ড সার্ভিস বা API ব্যবহার করতে হবে। সাধারণত, JWT (JSON Web Tokens), OAuth, বা অন্যান্য অথেনটিকেশন পদ্ধতি ব্যবহার করা হয়। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে JWT ব্যবহার করে Framework7-এ অথেনটিকেশন বাস্তবায়ন করা হয়েছে।

৩. প্রয়োজনীয় টুলস এবং লাইব্রেরি

• Backend Server/API: Node.js, Express.js, বা অন্য যেকোনো ব্যাক-এন্ড ফ্রেমওয়ার্ক ব্যবহার করতে পারেন।
• JWT (JSON Web Tokens): টোকেন ভিত্তিক অথেনটিকেশন।
• Axios: HTTP রিকোয়েস্ট পাঠানোর জন্য।
• Vuex (Framework7-Vue ব্যবহার করলে): স্টেট ম্যানেজমেন্টের জন্য।

৪. ব্যাক-এন্ড সেটআপ

উদাহরণ: Node.js এবং Express.js ব্যবহার করে একটি সহজ অথেনটিকেশন সার্ভার তৈরি করা।

// server.js
const express = require('express');
const jwt = require('jsonwebtoken');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const SECRET_KEY = 'your_secret_key';

app.use(bodyParser.json());
app.use(cors());

// Dummy user data
const users = [
  { id: 1, username: 'user1', password: 'password1' },
  { id: 2, username: 'user2', password: 'password2' },
];

// Login Route
app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  const user = users.find(
    (u) => u.username === username && u.password === password
  );
  if (user) {
    const token = jwt.sign({ id: user.id }, SECRET_KEY, { expiresIn: '1h' });
    res.json({ token });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
});

// Protected Route
app.get('/api/protected', verifyToken, (req, res) => {
  jwt.verify(req.token, SECRET_KEY, (err, data) => {
    if (err) {
      res.sendStatus(403);
    } else {
      res.json({ message: 'This is protected data.', data });
    }
  });
});

// Middleware to verify token
function verifyToken(req, res, next) {
  const bearerHeader = req.headers['authorization'];
  if (typeof bearerHeader !== 'undefined') {
    const bearer = bearerHeader.split(' ');
    const token = bearer[1];
    req.token = token;
    next();
  } else {
    res.sendStatus(403);
  }
}

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

৫. Frontend (Framework7-Vue) সেটআপ

ধাপ ১: Framework7-Vue প্রজেক্ট তৈরি করুন যদি ইতিমধ্যে না থাকে।

framework7 create --ui

ধাপ ২: প্রয়োজনীয় লাইব্রেরি ইনস্টল করুন।

npm install axios vuex --save

ধাপ ৩: Vuex স্টোর সেটআপ করুন।

src/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || '',
    status: '',
    user: {},
  },
  mutations: {
    auth_request(state) {
      state.status = 'loading';
    },
    auth_success(state, token) {
      state.status = 'success';
      state.token = token;
    },
    auth_error(state) {
      state.status = 'error';
    },
    logout(state) {
      state.status = '';
      state.token = '';
    },
  },
  actions: {
    login({ commit }, user) {
      return new Promise((resolve, reject) => {
        commit('auth_request');
        axios
          .post('http://localhost:3000/api/login', user)
          .then((resp) => {
            const token = resp.data.token;
            localStorage.setItem('token', token);
            axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
            commit('auth_success', token);
            resolve(resp);
          })
          .catch((err) => {
            commit('auth_error');
            localStorage.removeItem('token');
            reject(err);
          });
      });
    },
    logout({ commit }) {
      return new Promise((resolve) => {
        commit('logout');
        localStorage.removeItem('token');
        delete axios.defaults.headers.common['Authorization'];
        resolve();
      });
    },
  },
  getters: {
    isLoggedIn: (state) => !!state.token,
    authStatus: (state) => state.status,
  },
});

ধাপ ৪: main.js ফাইলে স্টোর যুক্ত করুন।

src/main.js

import Vue from 'vue';
import Framework7 from 'framework7/framework7.esm.bundle.js';
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js';
import App from './App.vue';
import store from './store'; // Vuex স্টোর ইমপোর্ট করুন
import axios from 'axios';

Vue.use(Framework7Vue);

// সেটআপ Axios
if (store.state.token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${store.state.token}`;
}

new Vue({
  store, // স্টোর যুক্ত করুন
  render: (h) => h(App),
}).$mount('#app');

ধাপ ৫: লগইন কম্পোনেন্ট তৈরি করুন।

src/pages/Login.vue

<template>
  <f7-page>
    <f7-navbar title="Login" back-link="Back"></f7-navbar>
    <f7-block>
      <f7-list form>
        <f7-list-item>
          <f7-label>Username</f7-label>
          <f7-input v-model="username" type="text" placeholder="Enter username"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>Password</f7-label>
          <f7-input v-model="password" type="password" placeholder="Enter password"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-button @click="login">Login</f7-button>
      <p v-if="error" style="color:red">{{ error }}</p>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: '',
    };
  },
  methods: {
    login() {
      this.$store
        .dispatch('login', {
          username: this.username,
          password: this.password,
        })
        .then(() => {
          this.$router.navigate('/home/');
        })
        .catch((err) => {
          this.error = 'Invalid credentials';
          console.error(err);
        });
    },
  },
};
</script>

ধাপ ৬: প্রটেক্টেড পেজ তৈরি করুন।

src/pages/Home.vue

<template>
  <f7-page>
    <f7-navbar title="Home" right-slots>
      <f7-link @click="logout">Logout</f7-link>
    </f7-navbar>
    <f7-block>
      <h2>Welcome to the Home Page!</h2>
      <p>This is a protected route.</p>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  methods: {
    logout() {
      this.$store.dispatch('logout').then(() => {
        this.$router.navigate('/login/');
      });
    },
  },
};
</script>

ধাপ ৭: রাউটিং কনফিগার করুন এবং রুট প্রোটেকশন যুক্ত করুন।

src/router.js

import Home from './pages/Home.vue';
import Login from './pages/Login.vue';
import store from './store';

var routes = [
  {
    path: '/home/',
    component: Home,
    beforeEnter: (to, from, next) => {
      if (store.getters.isLoggedIn) {
        next();
      } else {
        next('/login/');
      }
    },
  },
  {
    path: '/login/',
    component: Login,
  },
  {
    path: '(.*)',
    redirect: '/login/',
  },
];

export default routes;

ধাপ ৮: অ্যাপ্লিকেশন চালু করুন এবং পরীক্ষা করুন।

npm start

ব্রাউজারে http://localhost:8080 এ গিয়ে লগইন পেজে যান। সঠিক ইউজারনেম ও পাসওয়ার্ড দিয়ে লগইন করলে হোম পেজে রিডাইরেক্ট হবে। যদি ইউজার লগইন না করে থাকে, তাহলে প্রটেক্টেড রুটে প্রবেশ করতে পারবে না।

৬. অথরাইজেশন কনসিডারেশন

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

উদাহরণ: রোল-ভিত্তিক অথরাইজেশন

স্টোরে রোল যোগ করুন:

src/store/index.js

state: {
  token: localStorage.getItem('token') || '',
  status: '',
  user: {
    name: '',
    email: '',
    role: '', // রোল যোগ করুন
  },
},
mutations: {
  // অন্যান্য মিউটেশন
  setUser(state, payload) {
    state.user.name = payload.name;
    state.user.email = payload.email;
    state.user.role = payload.role; // রোল সেট করুন
  },
},
actions: {
  // অন্যান্য অ্যাকশন
  updateUser({ commit }, userData) {
    commit('setUser', userData);
  },
},
getters: {
  // অন্যান্য গেটারস
  userRole: (state) => state.user.role,
},

রাউট প্রোটেকশন কনফিগার করুন:

src/router.js

{
  path: '/admin/',
  component: AdminPage,
  beforeEnter: (to, from, next) => {
    if (store.getters.isLoggedIn && store.getters.userRole === 'admin') {
      next();
    } else {
      next('/login/');
    }
  },
},

অ্যাডমিন পেজ কম্পোনেন্ট:

src/pages/AdminPage.vue

<template>
  <f7-page>
    <f7-navbar title="Admin Panel" back-link="Back"></f7-navbar>
    <f7-block>
      <h2>Welcome to the Admin Panel!</h2>
      <p>Only admins can see this.</p>
    </f7-block>
  </f7-page>
</template>

<script>
export default {};
</script>

৭. সুরক্ষা এবং সেরা প্র্যাকটিস

• HTTPS ব্যবহার করুন: সবসময় HTTPS ব্যবহার করে ডেটা ট্রান্সমিশন সুরক্ষিত রাখুন।
• টোকেন সুরক্ষা: JWT টোকেন নিরাপদে সংরক্ষণ করুন। স্থানীয় স্টোরেজে সংরক্ষণ করলে XSS আক্রমণের ঝুঁকি থাকে, তাই HTTP-only কুকিজ ব্যবহার করা উত্তম।
• পাসওয়ার্ড এনক্রিপশন: ব্যাক-এন্ডে পাসওয়ার্ড হ্যাশিং (যেমন bcrypt) ব্যবহার করুন।
• রোল-বেসড অথরাইজেশন: বিভিন্ন ইউজার রোলের জন্য পৃথক অনুমতি নির্ধারণ করুন।
• ইনপুট ভ্যালিডেশন: ইউজার ইনপুট সঠিকভাবে ভ্যালিডেট করুন এবং সার্ভার-সাইডে সুরক্ষা নিশ্চিত করুন।
• টোকেন এক্সপায়ারেশন: টোকেনের মেয়াদ সীমিত রাখুন এবং রিফ্রেশ টোকেন ব্যবহারের ব্যবস্থা করুন।

৮. উপসংহার

Framework7-Vue এর সাথে Vuex ব্যবহার করে ইউজার অথেনটিকেশন এবং অথরাইজেশন বাস্তবায়ন করা সহজ এবং কার্যকর। এই ব্যবস্থাপনা আপনাকে বড় এবং জটিল অ্যাপ্লিকেশনে স্টেট ম্যানেজমেন্ট এবং নিরাপত্তা নিশ্চিত করতে সাহায্য করে। উপরের ধাপগুলো অনুসরণ করে আপনি সহজেই আপনার Framework7 অ্যাপ্লিকেশনে শক্তিশালী অথেনটিকেশন এবং অথরাইজেশন ব্যবস্থা গড়ে তুলতে পারেন।

অতিরিক্ত রিসোর্স

• Framework7 Documentation
• Vuex Documentation
• JWT Introduction
• Express.js Documentation
• Axios Documentation