🟦 الدرس 16: دمج تسجيل الدخول بواسطة Google OAuth 2.0 في Flask

(Google Login Integration)

هذا الدرس هو خطوة احترافية مهمة جدًا تجعل تطبيق الملاحظات يبدو مثل التطبيقات الكبيرة، ويعطي تجربة تسجيل دخول سريعة وآمنة دون استخدام كلمات مرور.

---

✅ الجزء الأول: ما هو Google OAuth؟

OAuth 2.0 هو نظام يسمح للتطبيقات بالوصول إلى بيانات المستخدم الأساسية (مثل الاسم والبريد) بدون معرفة كلمة السر.

عند تسجيل الدخول:

1. المستخدم يضغط "تسجيل الدخول عبر Google".
2. يتم نقله إلى صفحة Google الرسمية.
3. يوافق على إعطاء التطبيق المعلومات الأساسية.
4. يعود التطبيق ويحصل على بيانات المستخدم.

والنتيجة؟
✔️ تسجيل دخول آمن جدًا
✔️ بدون كلمات مرور
✔️ أفضل لأمان المستخدم وتجربة أسرع

---

✅ الجزء الثاني: تجهيز Google Cloud Console

1. افتح:

https://console.cloud.google.com/

2. أنشئ مشروع جديد

"New Project"

3. من القائمة:

APIs & Services → OAuth consent screen

• اختر نوع التطبيق: External
• أدخل معلومات بسيطة: اسم التطبيق – البريد – اللوجو (اختياري)
• احفظ

4. من القائمة:

Credentials → Create Credentials → OAuth Client ID

• اختر: Web Application
• أدخل Redirect URI:

http://localhost:5000/auth/callback

5. احصل على:

• Client ID
• Client Secret

سنخزنهم في .env لاحقًا.

---

✅ الجزء الثالث: تثبيت المكتبة اللازمة

نستخدم أقوى مكتبة OAuth لبايثون:

pip install authlib
pip install python-dotenv

---

✅ الجزء الرابع: إضافة الإعدادات داخل Flask

ملف: .env

GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here
SECRET_KEY=supersecretkey

ملف: app.py

from flask import Flask, redirect, url_for, session, request, render_template, flash
from authlib.integrations.flask_client import OAuth
from dotenv import load_dotenv
import os

load_dotenv()

app = Flask(__name__)
app.secret_key = os.getenv("SECRET_KEY")

oauth = OAuth(app)

google = oauth.register(
    name='google',
    client_id=os.getenv("GOOGLE_CLIENT_ID"),
    client_secret=os.getenv("GOOGLE_CLIENT_SECRET"),
    access_token_url='https://accounts.google.com/o/oauth2/token',
    access_token_params=None,
    authorize_url='https://accounts.google.com/o/oauth2/auth',
    authorize_params={
        'access_type': 'offline',
        'prompt': 'consent'
    },
    api_base_url='https://www.googleapis.com/oauth2/v1/',
    client_kwargs={'scope': 'openid email profile'}
)

---

✅ الجزء الخامس: مسارات تسجيل الدخول

1) زر تسجيل الدخول

@app.route('/login')
def login():
    return render_template("login.html")

2) إرسال المستخدم إلى Google

@app.route('/login/google')
def login_google():
    redirect_uri = url_for('auth_callback', _external=True)
    return google.authorize_redirect(redirect_uri)

3) استقبال بيانات المستخدم من Google

@app.route('/auth/callback')
def auth_callback():
    token = google.authorize_access_token()
    user_info = google.get('userinfo').json()

    session['user'] = {
        'name': user_info['name'],
        'email': user_info['email'],
        'picture': user_info['picture']
    }

    flash("Welcome " + user_info['name'], "success")
    return redirect(url_for('notes'))

---

✅ الجزء السادس: حماية صفحات الملاحظات

ضع هذا الديكوريتر لحماية المسارات:

from functools import wraps

def login_required(f):
    @wraps(f)
    def secure_route(*args, **kwargs):
        if 'user' not in session:
            flash("Please login first", "warning")
            return redirect(url_for("login"))
        return f(*args, **kwargs)
    return secure_route

مثال:

@app.route('/notes')
@login_required
def notes():
    return render_template("notes.html")

---

✅ الجزء السابع: صفحة تسجيل الدخول login.html

<div class="container text-center mt-5">
    <h2>Login to Notes App</h2>
    <a href="/login/google" class="btn btn-danger mt-3">
        Login with Google
    </a>
</div>

---

🎯 نتيجة الدرس 16

بعد تنفيذ هذا الدرس سيصبح لديك:

✔ تسجيل دخول Google كامل
✔ حماية الصفحات والملاحظات
✔ جلسات (Sessions) آمنة
✔ تجربة احترافية وجميلة للمستخدم

---

🎯 تمرين الدرس 16:

"أضف زر تسجيل دخول عبر Google داخل الـ Navbar، وبعد تسجيل الدخول أظهر صورة المستخدم واسمه داخل الـ Navbar بدلًا من زر تسجيل الدخول."

---

✅ الهدف من التمرين

1- جعل تسجيل الدخول جزءًا من التصميم الأساسي للتطبيق (الـ Navbar).
2- عند تسجيل الدخول:

• يظهر اسم المستخدم
• وصورته الشخصية (Google Profile Image)
• وزر تسجيل خروج “Logout”

3- عند عدم تسجيل الدخول:

• يظهر زر “Login with Google”

---

🔧 الخطوة 1: تعديل ملف base.html (الNavbar الرئيس)

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Notes App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
    <div class="container">
        <a class="navbar-brand" href="{{ url_for('notes') }}">Notes App</a>

        <ul class="navbar-nav ms-auto">

            {% if session.get('user') %}
                <!-- User Logged In -->
                <li class="nav-item d-flex align-items-center">
                    <img src="{{ session['user']['picture'] }}" 
                         style="width:35px; height:35px; border-radius:50%; margin-right:10px;">
                </li>

                <li class="nav-item">
                    <a class="nav-link text-white">{{ session['user']['name'] }}</a>
                </li>

                <li class="nav-item">
                    <a class="btn btn-outline-light btn-sm ms-2" href="{{ url_for('logout') }}">
                        Logout
                    </a>
                </li>

            {% else %}
                <!-- User NOT Logged In -->
                <li class="nav-item">
                    <a href="{{ url_for('login_google') }}" class="btn btn-danger btn-sm">
                        Login with Google
                    </a>
                </li>
            {% endif %}

        </ul>
    </div>
</nav>

<div class="container">
    {% block content %}{% endblock %}
</div>

</body>
</html>

---

🔧 الخطوة 2: إضافة مسار تسجيل الخروج logout

في app.py

@app.route('/logout')
def logout():
    session.pop('user', None)
    flash("Logged out successfully", "info")
    return redirect(url_for('login'))

---

🔧 الخطوة 3: تعديل صفحة login.html لجعل الزر بسيط فقط

login.html

{% extends "base.html" %}
{% block content %}

<div class="text-center mt-5">
    <h3>Please Login to Continue</h3>

    <a href="{{ url_for('login_google') }}" class="btn btn-danger mt-3">
        Login with Google
    </a>
</div>

{% endblock %}

---

🔧 الخطوة 4: التأكد من وجود login_google endpoint

في app.py:

@app.route('/login/google')
def login_google():
    redirect_uri = url_for('auth_callback', _external=True)
    return google.authorize_redirect(redirect_uri)

---

🔧 الخطوة 5: التأكد من مسار callback

@app.route('/auth/callback')
def auth_callback():
    token = google.authorize_access_token()
    user_info = google.get('userinfo').json()

    session['user'] = {
        'name': user_info['name'],
        'email': user_info['email'],
        'picture': user_info['picture']
    }

    flash("Welcome " + user_info['name'], "success")
    return redirect(url_for('notes'))

---

🟢 النتيجة النهائية بعد الحل

قبل تسجيل الدخول:

✔ يظهر زر أحمر: Login with Google

بعد تسجيل الدخول:

✔ صورة المستخدم
✔ اسمه
✔ زر Logout
✔ الواجهة تصبح احترافية جدًا 👌🔥