نظام تسجيل الدخول باستخدام Angular وNodeJS وMongoDB

تعليمات كاملة خطوة بخطوة مع الكود

نصائح للمدونين

المقدمة

أنظمة تسجيل الدخول ميزة شائعة في تطبيقات الويب. في هذا المقال، سنبني نظام تسجيل دخول باستخدام Angular وNodeJS وMongoDB. Angular إطار عمل أمامي، بينما NodeJS تقنية خلفية قوية، وMongoDB قاعدة بيانات NoSQL مرنة.

إعداد بيئة التطوير

تثبيت NodeJS

1. اذهب إلى موقع NodeJS الرسمي وقم بتنزيل أحدث نسخة
2. شغل المثبت واتبع التعليمات

تثبيت Angular CLI

افتح terminal وقم بتنفيذ الأمر:

npm install -g @angular/cli

تثبيت MongoDB

قم بتنزيل MongoDB من الموقع الرسمي واتبع خطوات التثبيت.

بناء الواجهة الخلفية باستخدام NodeJS وMongoDB

إعداد مشروع الواجهة الخلفية

mkdir backend && cd backend
npm init -y
npm install express mongoose cors

إنشاء نموذج المستخدم (User Schema)

في ملف models/User.js:

const mongoose = require('mongoose');
const UserSchema = mongoose.Schema({
    username: { type: String, required: true },
    email: { type: String, required: true },
    password: { type: String, required: true }
});
module.exports = mongoose.model('User', UserSchema);

إنشاء مسارات المستخدم (User Routes)

في ملف routes/user.js:

const express = require('express');
const router = express.Router();
const User = require('../models/User');

router.post('/register', (req, res) => {
    const newUser = new User({
        username: req.body.username,
        email: req.body.email,
        password: req.body.password
    });
    newUser.save()
        .then(() => res.json('تم إضافة المستخدم!'))
        .catch(err => res.status(400).json('خطأ: ' + err));
});

router.post('/login', (req, res) => {
    User.findOne({ email: req.body.email, password: req.body.password })
        .then(user => {
            if (user) {
                res.json('تم تسجيل الدخول بنجاح!');
            } else {
                res.status(400).json('بريد إلكتروني أو كلمة مرور غير صحيحة.');
            }
        })
        .catch(err => res.status(400).json('خطأ: ' + err));
});

module.exports = router;

بناء الواجهة الأمامية باستخدام Angular

إعداد مشروع الواجهة الأمامية

ng new frontend

إنشاء مكون تسجيل الدخول (Login Component)

في ملف login.component.html:

<div class="container">
    <h5>تسجيل الدخول</h5>
    <form (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label>البريد الإلكتروني</label>
            <input type="email" class="form-control" [(ngModel)]="email" name="email">
        </div>
        <div class="form-group">
            <label>كلمة المرور</label>
            <input type="password" class="form-control" [(ngModel)]="password" name="password">
        </div>
        <button type="submit" class="btn btn-primary">تسجيل الدخول</button>
    </form>
    <div *ngIf="message" class="alert alert-danger">{{ message }}</div>
</div>

إنشاء مكون التسجيل (Registration Component)

في ملف registration.component.html:

<div class="container">
    <h5>التسجيل</h5>
    <form (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label>اسم المستخدم</label>
            <input type="text" class="form-control" [(ngModel)]="username" name="username">
        </div>
        <div class="form-group">
            <label>البريد الإلكتروني</label>
            <input type="email" class="form-control" [(ngModel)]="email" name="email">
        </div>
        <div class="form-group">
            <label>كلمة المرور</label>
            <input type="password" class="form-control" [(ngModel)]="password" name="password">
        </div>
        <button type="submit" class="btn btn-primary">تسجيل</button>
    </form>
    <div *ngIf="message" class="alert alert-danger">{{ message }}</div>
</div>

إنشاء خدمة المصادقة (Auth Service)

في ملف auth.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private baseURL = 'http://localhost:3000';
  
  constructor(private http: HttpClient) {}
  
  register(username: string, email: string, password: string) {
    return this.http.post(`${this.baseURL}/register`, { username, email, password });
  }
  
  login(email: string, password: string) {
    return this.http.post(`${this.baseURL}/login`, { email, password });
  }
}

إنشاء واجهة برمجة التطبيقات (API) للواجهة الخلفية

في ملف server.js:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');

const app = express();
app.use(bodyParser.json());
app.use(cors());

mongoose.connect('mongodb://localhost:27017/login-registration', { useNewUrlParser: true });

const User = mongoose.model('User', {
  username: String,
  email: String,
  passwordHash: String
});

function generateAccessToken(user) {
  return jwt.sign(user, 'secret');
}

app.post('/register', async (req, res) => {
  const { username, email, password } = req.body;
  const passwordHash = await bcrypt.hash(password, 10);
  const user = new User({ username, email, passwordHash });
  
  user.save((err, user) => {
    if (err) {
      console.error(err);
      res.status(500).send('خطأ في تسجيل مستخدم جديد.');
    } else {
      const token = generateAccessToken({ username, email });
      res.json({ token });
    }
  });
});

app.post('/login', async (req, res) => {
  const { email, password } = req.body;
  const user = await User.findOne({ email });
  
  if (!user) {
    return res.status(404).send('المستخدم غير موجود.');
  }
  
  const validPassword = await bcrypt.compare(password, user.passwordHash);
  if (!validPassword) {
    return res.status(401).send('كلمة المرور غير صحيحة.');
  }
  
  const token = generateAccessToken({ username: user.username, email });
  res.json({ token });
});

app.listen(3000, () => {
  console.log('الخادم يعمل على المنفذ 3000');
});

اختبار نظام تسجيل الدخول والتسجيل

1. ابدأ خادم الواجهة الخلفية: node server.js
2. ابدأ خادم الواجهة الأمامية: ng serve
3. افتح المتصفح على http://localhost:4200/
4. اختبر عملية التسجيل ثم تسجيل الدخول

الخلاصـــــة

في هذا المقال، قمنا بتغطية كيفية إنشاء نظام تسجيل دخول باستخدام Angular وNode.js وMongoDB. بدأنا ببناء مكونات الواجهة الأمامية باستخدام Angular، ثم انتقلنا إلى بناء مكونات الواجهة الخلفية باستخدام Node.js وMongoDB.

الأسئلة الشائعة

ما هو Angular؟

إطار عمل لتطبيقات الويب تم تطويره بواسطة Google لبناء تطبيقات ويب ديناميكية وسريعة الاستجابة.

ما هو Node.js؟

بيئة تنفيذ لجافاسكريبت على جانب الخادم تسمح للمطورين بتنفيذ كود جافاسكريبت خارج المتصفح.

لماذا نستخدم bcrypt لتشفير كلمات المرور؟

يوفر تشفير كلمات المرور باستخدام bcrypt طبقة أمان إضافية عن طريق جعل كسر كلمات مرور المستخدمين أكثر صعوبة.

هل يمكن استخدام قاعدة بيانات مختلفة مع هذا النظام؟

نعم، يمكنك استخدام قاعدة بيانات مختلفة عن طريق تعديل كود الواجهة الخلفية لاستخدام برنامج تشغيل قاعدة بيانات مختلف.

كيف كان المقال؟