مساعدة في الربط بين angular و laravel

1- تأكد من أن Laravel مثبت على جهاز الخادم الخاص بك ويعمل بشكل صحيح، وأسهل طريقة هي باستخدام بيئة عمل Laragon وبعد تثبيتها قم بالضغط برز الفأرة الأيمن على واجهة البرنامج ثم اختر Quickapp بعد ذلك اختر Laravel.

وستجد أنه تم إنشاء مشروع لارافيل، وباستطاعتك العثور على مجلد المشروع بالضغط على زر Root في واجهة Laragon. 

2- قم بإنشاء API للاتصال بقاعدة البيانات الخاصة بك في Laravel، باستخدام Laravel's Eloquent ORM لإنشاء الاتصال بقاعدة البيانات.

3- في Angular، قم بإنشاء خدمة (Service) للاتصال بـ API المنشأ في Laravel، وباستطاعتك استخدام Angular's HttpClient لإرسال الطلبات إلى API.

4- إنشاء نموذج (Model) لبيانات تسجيل الدخول الخاصة بك في Angular.

5- إنشاء نموذج (Model) في Laravel لبيانات تسجيل الدخول الخاصة بك.

6- إنشاء ملف تحكم (Controller) في Laravel لإدارة عمليات تسجيل الدخول، من خلال استخدام الدالة "validate" في Laravel للتحقق من صحة بيانات تسجيل الدخول.

7- بربط ملف التحكم في Laravel مع API الخاص بك.

8- في Angular، قم بإنشاء نموذج (Model) لاستقبال الرد عند الاتصال بالـ API.

9- في Angular، عليك بإنشاء مكون (Component) للتحكم بواجهة المستخدم لتسجيل الدخول وإرسال البيانات إلى الخدمة (Service).

10- ربط المكون (Component) الخاص بك في Angular مع النموذج (Model) الخاص بك وخدمة (Service).

مثال بسيط لكيفية إنشاء API في Laravel والاتصال بها من Angular:

أولاً، يجب عليك إنشاء جدول لتخزين بيانات المستخدمين في قاعدة البيانات الخاصة بك.

ولهذا المثال، سننشئ جدولًا باسم "users" وستكون لدينا الأعمدة التالية: "id"، "name"، "email"، و "password".

ثانياً، قم بتحديث ملف "routes/api.php" في Laravel لإنشاء طريقة POST لإجراء تسجيل الدخول، و سنستخدم الطريقة "authenticate" لهذا الغرض، ويجب عليك إنشاء ملف تحكم (Controller) خاص بهذه الطريقة.

// routes/api.php

use Illuminate\Http\Request;

Route::post('/authenticate', 'AuthController@authenticate');

ثالثًا، قم بإنشاء ملف تحكم (Controller) جديد بالاسم "AuthController" وإضافة الطريقة "authenticate" إليه.

حيث يتم التحقق من صحة بيانات تسجيل الدخول وإرجاع رمز مميز (token) عندما يتم إدخال بيانات تسجيل الدخول صالحة.

// app/Http/Controllers/AuthController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    public function authenticate(Request $request)
    {
        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            $user = Auth::user();
            $token = $user->createToken('MyApp')->accessToken;

            return response()->json([
                'user' => $user,
                'access_token' => $token,
            ]);
        }

        return response()->json([
            'message' => 'Invalid login credentials',
        ], 401);
    }
}

رابعاً، يجب عليك تثبيت "laravel/passport" وإعداده لاستخدامه مع Laravel.

composer require laravel/passport

ثم، قم بتشغيل الأمر التالي لتحديث قاعدة البيانات الخاصة بك:

php artisan migrate

وأخيرًا، يجب عليك إنشاء خدمة (Service) في Angular للاتصال بـ API المنشأ في Larave، وباستطاعتك استخدام HttpClient في Angular لإرسال طلب POST لـ API المنشأ في Laravel والحصول على رمز مميز (token) في حالة نجاح تسجيل الدخول.

// auth.service.ts

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

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(private http: HttpClient) {}

  login(email: string, password: string) {
    return this.http.post<any>('/api/authenticate', { email, password });
  }
}

ويمكن استخدام الخدمة المنشأة في Angular في مكون تسجيل الدخول الخاص بك:

// login.component.ts

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent {
  email: string = '';
  password: string = '';

  constructor(private authService: AuthService) {}

  onSubmit() {
    this.authService.login(this.email, this.password).subscribe(
      (response) => {
        console.log(response.access_token);
      },
      (error) => {
        console.log(error);
      }
    );
  }
}

لربط نموذج تسجيل الدخول في Angular بقاعدة البيانات في Laravel:

• إنشاء API في Laravel: يمكن استخدام Laravel Passport لإنشاء API موثوق بها في Laravel. يجب تثبيته باستخدام Composer وتكوينه وفقًا للتوثيق الرسمي. بعد ذلك، يمكن إنشاء وظيفة في Laravel لإرجاع بيانات تسجيل الدخول باستخدام Passport.
• إنشاء ملف خدمة (service) في Angular: يمكن استخدام مكتبة HttpClient من Angular لإجراء مكالمات API. يمكن إنشاء ملف خدمة في Angular للاتصال بـ API الخاص بـ Laravel باستخدام HttpClient.
• استخدام نموذج تسجيل الدخول في Angular:يمكن استخدام نموذج تسجيل الدخول في Angular للحصول على بيانات تسجيل الدخول من المستخدم باستخدام توجيه وظيفة إرسال النموذج.
• إنشاء وظيفة في Angular لإرسال بيانات تسجيل الدخول إلى API الخاص بـ Laravel: باستخدام HttpClient. يجب تضمين بيانات تسجيل الدخول بشكل صحيح في الجسم الذي يتم إرساله إلى API.
• كتابة وظيفة في Laravel للتحقق من صحة بيانات تسجيل الدخول: المرسلة من Angular. يجب التحقق من صحة اسم المستخدم وكلمة المرور باستخدام وظيفة التحقق المدمجة في Laravel.
• استخدام البيانات المسترجعة من API الخاص بـ Laravel: بعد التحقق من صحة بيانات تسجيل الدخول في Laravel، يمكن استخدام البيانات المسترجعة من API لتسجيل الدخول في التطبيق الخاص بك.

هذه الخطوات الرئيسية لتنفيذ المطلوب يمكنك الإطلاع على المصادر التالية للمزيد من المعلومات 1 و 2 و 3