איך לאמת אפליקציות Django באמצעות django-allauth

Django

הסופר בחר בקרן הקוד הפתוח והחופשי לקבל תרומה כחלק מתוכנית כתוב בשביל תרומות.

הקדמה

אימות הוא התהליך שבו מאומתים משתמשים אמיתיים או רשומים במערכת, המסייע להבטיח את יישומי התוכנה שלך מפני גישה לא מורשית. ישנן מספר טכניקות שמשמשות לאימות משתמשים כמו אימות שם משתמש/סיסמה, ביומטריה אנושית או סיסמאות תמונה. בסביבת האינטרנט הקוד הפתוח Django, טיפול באימות יכול להיות מוקדם או ניתן להשתמש במודולים מוכנים כמו django-allauth, django-rest-social-auth, django-registration, ועוד.

django-allauth הוא סט משולב של אפליקציות Django שעוסקות באימות חשבונות, רישום, ניהול ואימות חשבונות צד שלישי (חברתי). זהו אחד ממודולי האימות הפופולריים ביותר בגלל יכולתו לטפל בכניסות מקומיות וחברתיות כאחד. ניתן להוסיף תמיכה לספקי OAuth/OAuth2 נוספים עם בסיס קוד משותף של האפליקציה. לא רק שהוא מטפל בלוגיקת האימות, אלא גם ניתן להתאים אותו לצרכי העיצוב שלך.

במדריך זה, תצביע על אפליקציית Django שמשתמשת ב־django-allauth לאימות באמצעות חשבון של DigitalOcean.

דרישות קדם

עבור מדריך זה, יהיה עליך לצרף:

A DigitalOcean account. If you do not have one, sign up for a new account.
פייתון 3.5+ מותקן על המחשב שלך, תוכל לעשות זאת על ידי מעקב אחר המדריך כיצד להתקין פייתון 3 ולהגדיר סביבת פיתוח עבור המחשב שלך.
ידע בסיסי בנושא מסגרת ה־Django לפיתוח אינטרנטי, אותו תוכל למצוא בסדרת המדריכים שלנו על פיתוח ב־Django.

שלב 1 — הגדרת סביבת הפיתוח

בשלב זה, תגדיר את סביבת הפיתוח של האפליקציה שלך ב־Django. תפעיל סביבת וירטואלית ותתקין את תלותי הפרויקט.

בתחילה, צור ספרייה חדשה ושנה אליה. במדריך זה נעשה שימוש ב־Django-Allauth:

mkdir Django-Allauth
cd Django-Allauth

ודא שאתה משתמש בתיקייה זו למשך שאר המדריך.

הבא, צור סביבת עבודה וירטואלית באמצעות Pipenv, כלי אריזה עבור Python. תחילה, התקן pipenv:

pip3 install pipenv

הבא, הפעל את סביבת העבודה הווירטואלית:

pipenv shell

הבא, התקן את התלויות שתשתמש בהן בפיתוח (django ו־django-allauth) באמצעות pipenv:

pipenv install django
pipenv install django-allauth

סיימת להגדיר את סביבת הפיתוח שלך. הבא, תתחיל לפתח את אפליקציית ה-Django שלך.

שלב 2 — יצירת אפליקציית ה-Django שלך

בשלב זה, תיצור אפליקציית Django פשוטה עם עמידת django-allauth.

השלב הראשון ליצירת האפליקציה שלך הוא ליצור את יישום הפרויקט, שנקרא Authentication במדריך זה:

django-admin startproject Authentication

הבא, גש לנתיב ספריית הפרויקט וצור אפליקציה עבור האפליקציה שלך; המדריך הזה משתמש ב־main:

cd Authentication
python manage.py startapp main

בתיקיית הפרויקט, השתמש ב־nano או בעורך הטקסט האהוב עליך כדי לפתוח את settings.py לעריכה:

nano Authentication/settings.py

לרשימת האפליקציות המותקנות, הוסף את האפליקציה main כמצוין:

Django-Allauth/Authentication/Authentication/settings.py

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'main', # אפליקציה חדשה
]

מאחר ואנו מציגים דף אחד לאתר, אין צורך לבצע שינויים בקובץ models.py.

אחר כך, פתח את קובץ urls.py של הפרויקט לעריכה ובצע את השינויים הבאים:

Django-Allauth/Authentication/Authentication/urls.py

from  django.contrib  import  admin
from  django.urls  import  path, include

urlpatterns = [
path('', include('main.urls')),
path('admin/', admin.site.urls),
]

קובץ urls.py משמש לניתוב של אפליקציות Django.

בשלב הבא, באפליקציית main, צור קובץ נוסף בשם urls.py והוסף את השורות הבאות:

Django-Allauth/Authentication/main/urls.py

from  django.urls  import  path
from . import views 

urlpatterns = [
path('', views.homepage, name='homepage'),
]

קובץ urls.py זה נמצא בשימוש לניתוב של קבצי האפליקציה main.

בשלב הבא, פתח את קובץ views.py והוסף את השורות הבאות:

Django-Allauth/Authentication/main/views.py

from  django.shortcuts  import  render

def  homepage(request):
    return  render(request=request,
    template_name= 'home.html',)

קובץ views.py משמש להצגת הדף home.html בתיקיית התבניות.

בשלב הבא, בתיקיית השורש של הפרויקט (Authentication), צור תיקייה חדשה בשם templates. בתיקיית templates, צור דף HTML בשם home.html והוסף את השורות הבאות:

Authentication/templates/home.html


<html>
    <head>
        <style>
        h3 {text-align: center;}
        p {text-align: center;}
        </style>
    </head>
    <body>        
    <!-- CSS ממוזג ומינומלי -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- JavaScript ממוזג ומינומלי -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            
        <nav>
            <div class="nav-wrapper"style="background-color: teal">
              <a href="#" class="brand-logo">Django-Allauth</a>
            </div>
          </nav>
        <h3 style=center>Welcome Home</h3>
        <div class="row">
            <div class="col s12 m6">
              <div class="card whitedarken-1">
                <div class="card-content blue-text">
                  <span class="card-title">Lorem Ipsum</span>
                  <p>{% lorem 1 p %}</p>
                </div>
              </div>
            </div>  
            <div class="col s12 m6">
              <div class="card white darken-1">
                <div class="card-content blue'-text">
                  <span class="card-title">Lorem Ipsum</span>
                  <p>{% lorem 1 p %}</p>
                </div>
              </div>
            </div>          
          </div>
          <div class="container text-dark mt-5">
            <div class="row justify-content-md-center">
              <div class="col md-5 p-3">
                {% if user.is_authenticated%}
                <p>Welcome, {{user.username}}</p>
                <a href="http://127.0.0.1:8000/accounts/logout/">Logout</a>
                {%else%}
                <p>Please <a href="http://127.0.0.1:8000/accounts/login/">Login</a></p>
                {%endif%}
              </div>
            </div>
          </div>
    </body>
</html>

דף הדגמה זה כולל טקסט דוגמה שמוצג בכרטיסיות ואזור התחברות שיש להשתמש בו בשלב מאוחר יותר עם האימות.

הדף האינטרנטי מעוצב באמצעות Materialize CDN, ספק תוכן חינמי ופתוח לקידוד חזיתי מבוסס על עיצוב Material Design. זה עוזר לטעון ספריות CSS, JavaScript ו-jQuery של Materialize כדי ליצור פרויקטים יפים ונגישים. ודא כי יש לך חיבור אינטרנטי כדי שה-CDN יטען את קבצי העיצוב.

מנתיב התיקיות, Django-Allauth/Authentication, הפעל את האפליקציה האינטרנטית באמצעות הפקודה הבאה:

python manage.py runserver

תראה פלט דומה לזה:

OutputPerforming system checks...

System check identified no issues (0 silenced).
June 10, 2022 - 13:35:20
Django version 4.0.4, using settings 'Authentication.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

נווט אל כתובת ה-URL http://127.0.0.1:8000/. עליך לראות את האתר שנראה כמו זה:

האתר הדוגמה מציג טקסט מילוי וכולל אזור התחברות בתחתיתו. לאחר שתקינו אימות, תשתמשו בקישור Login בדף האינטרנט בשלב מאוחר יותר.

בשלב זה, בניתם אפליקציה על דף אחד. בשלב הבא, תטפלו כעת באימות באמצעות django-allauth.

שלב 3 — הגדרת `django-allauth`

כדי לאמת באמצעות django-allauth, עליכם תחילה להגדיר את זה. זה נעשה על ידי ביצוע מספר שינויים בקבצי הפרויקט.

פתחו את Authentication/settings.py לעריכה. תחת INSTALLED_APPS, הוסיפו את השורות המודגשות לרישום של יישומי ה-django-allauth ושל DigitalOcean כספק התחברות חברתי:

Django-Allauth/Authentication/Authentication/settings.py

INSTALLED_APPS = [
    
    # וודאו שהיישומים הנדרשים הללו מתווספים
    'django.contrib.sites',
	  # יישומי Django-allauth
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # ספק התחברות חברתי/גורם חיצוני ל Digital Ocean
    'allauth.socialaccount.providers.digitalocean',
]

באשכול ה-TEMPLATES עדכנו כפי שמוצג:

[label Django-Allauth/Authentication/Authentication/settings.py]  
# הוראות תהליכי הקונטקסט:
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
        'context_processors': [         
	 'django.template.context_processors.request',
            ],
        },
    },
]

השורה החדשה מטפלת בבקשות HTTP מ־Django-Allauth.

לאחר מכן, צרו קטע עבור AUTHENTICATION_BACKENDS והוסיפו את השורות הבאות:

Django-Allauth/Authentication/Authentication/settings.py


AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
	  'allauth.account.auth_backends.AuthenticationBackend',
    ]

השורה הראשונה משמשת לכניסת משתמש על ידי שם משתמש דרך לוח המחוונים של Django, שתעשו בשלב מאוחר יותר. השורה השנייה משמשת לשיטות אימות מסוימות של django-allauth, כמו כניסה על ידי ספק OAuth.

לאחר מכן, הוסיפו שני הפניות אימות כפי שמוצג:

Django-Allauth/Authentication/Authentication/settings.py


LOGIN_REDIRECT_URL = 'homepage'
LOGOUT_REDIRECT_URL = 'homepage'

שורות אלו מפנות את המשתמש לדף הבית לאחר אימות ולאחר התנתקות מהאתר.

העריכה האחרונה ב־settings.py היא להגדיר את המזהה של כתובת ה־URL של האתר שלך. בסוף הקובץ שלך, הוסף את השורה הבאה:

Django-Allauth/Authentication/Authentication/settings.py

# מגדיר את המזהה של כתובת ה־URL של האתר שלך.
SITE_ID =1

שורה זו מציינת את מזהה מסד הנתונים של אובייקט ה־Site הקשור עם קובץ ה־settings.py.

שמור וסגור את הקובץ שלך.

באשף ה־urls.py הראשי, פתח את הקובץ לעריכה. הוסף את הנתיב אל יישומי Allauth כך:

Django-Allauth/Authentication/Authentication/urls.py


urlpatterns = [
	...
	path('accounts/', include('allauth.urls')),
]

השורה החדשה הזו משמשת להפנית קובץ ה־URL של היישום allauth. יישום django-allauth מגיע עם סט של כתובות URL עבור דפי HTML שלו. כמה כתובות URL שמספק allauth כוללות: account_login, account_logout, account_set_password, בנוסף לאחרים. עיינו ב־תיעוד המוצר django-allauth לקבלת מידע נוסף.

שמור וסגור את הקובץ שלך.

בשלב זה, תגדיר את django-allauth באפליקצייתך ותהיה מוכן להשתמש בו לאימות.

שלב 4 — הוספת ספק אימות צד שלישי

בשלב זה, תוסיף אימות צד שלישי לאפליקציית Django שלך באמצעות django-allauth. ישנם רבים ספקי אימות צד שלישי שאפשר להשתמש בהם עם django-allauth, כולל התחברויות חברתיות מ-Google, Facebook, Twitter, ואחרים המפורטים ברשימת django-allauth של ספקים.

למדריך זה, תשתמש ב-DigitalOcean כהתחברות חברתית שלך. כדי להוסיף ספק אימות כגון DigitalOcean, עליך תחילה להרשם להם.

התחבר לחשבון ה-DigitalOcean שלך ונווט אל פלטפורמת הענן של DigitalOcean, שם תקבל גישה ללוח מחוונים שנראה כך:

לחץ על הכפתור API בצד שמאל של לוח המחוונים כדי ליצור את היישום של OAuth שלך. בלוח המחוונים יישומים ו-API, לחץ על הכפתור יישום OAuth כדי לגשת להרשמת OAuth לאתר שלך. תראה לוח מחוונים שנראה כך:

לחץ על הכפתור רישום אפליקציה OAuth כדי להתחיל ברישום האפליקציה שלך ל OAuth. טופס קופץ יופיע:

הזן את שם הפרוייקט (Django-Allauth) וכל תיאור שתרצה. בחלק הזן כתובת הדף הראשי, הזן אחת מהכתובות הבאות:

http://127.0.0.1:8000
http://localhost:8000

בחלק הזן כתובת URL להתקשרות חוזרת, הזן אחת מהכתובות הבאות להפניה:

http://127.0.0.1:8000/accounts/digitalocean/login/callback/
http://localhost:8000/accounts/digitalocean/login/callback/

הערה: לצורך הדגמה, במדריך זה משתמשים ב־localhost:8000 או ב־127.0.0.1:8000. כאשר מפעילים אפליקציה בייצור, יש לשנות את הכתובות כך שיכללו את שם הדומיין במקום.

לאחר שהזנת את פרטי הפרוייקט, לחץ על רישום אפליקציה OAuth כדי לשמור את השינויים. לאחר מכן תופנה בחזרה ללוח המחוונים של האפליקציה עם האפליקציה שנוצרה כפי שמוצג למטה:

לחץ על שם האפליקציה כדי לגשת אל מזהה הלקוח ואל הסוד של הלקוח:

העתק ושמור את פרטי אלו לשימוש מאוחר יותר.

לאחר הגדרת ה־API ב־DigitalOcean, כעת ניתן להוסיף אותו לפאנל הניהול של האפליקציה שלך ב־Django. כדי לגשת לפאנל הניהול של Django, עליך תחילה להיות בעל משתמש ראשי, שניתן ליצור באמצעות הפקודה הבאה:

python manage.py createsuperuser

הזן את הפרטים הנדרשים והרץ את השרת שוב.

גש לפאנל הניהול באמצעות ה-URL, http://127.0.0.1:8000/admin/. התחבר עם פרטי הסופרמשתמש שלך ותיכנס ללוח הבקרה שנראה כמו הבא:

בפאנל השמאלי, לחץ על Sites, ואז על Add Site + כדי להוסיף או לערוך אתר קיים (example.com) או להוסיף אחד חדש באמצעות http://127.0.0.1:8000 כמוצג למטה:

הגדרה זו מגדירה את כתובת ה-URL של השרת של האתר שבו יתבצע אימות של DigitalOcean. במקרה זה, זו היא http://127.0.0.1:8000.

לחץ על Save.

באמצעות ניווט חזרה אל לוח הבקרה הראשי על ידי לחיצה על Home. בסעיף Social Accounts, לחץ על Social Applications, ואז לחץ על Add Social Applications +. באמצעות הפרטים שהעתקת מקונסול DigitalOcean, הזן את הפרטים הנדרשים עבור ספק השירות, שם האפליקציה, זיהוי הלקוח (Client ID) והמפתח הסודי של הלקוח (Client Secret Key). תחת Sites, בחר את האתר שיצרת כעת מתחת ל-Available sites ולחץ על החץ (—>) כדי להעביר אותו לפאנל ה-Chosen sites. לחץ על כפתור ה-Save כדי לשמור את הפרטים.

הגדרה זו משמשת לחיבור ספק ההתחברות החברתית על ידי שימוש ב-Client id וב-Secret Key, שמשמשים כזיהוי ציבורי של האפליקציה שלך וכזיהוי סודי בהתאמה. הם משמשים לאימות האפליקציה שלך ולביצוע בקשות ל-API של DigitalOcean.

בשלב זה, הגדרת את DigitalOcean כספק אימות צד שלישי עבור אפליקציית ה-Django שלך. בשלב האחרון, תתחבר לאתר שלך באמצעות חשבון DigitalOcean שלך.

שלב 5 — בדיקת אימות

בשלב זה, תתחבר לאתר שלך ב-Django באמצעות חשבון DigitalOcean שלך. ראשית, התנתק כמנהל ונווט לדף הכניסה (http://127.0.0.1:8000/accounts/login/):

לחץ על הקישור DigitalOcean כדי להתחבר באמצעות DigitalOcean. (כפי שמוצג בצילום המסך, אופן נוסף לאימות הוא להירשם באמצעות שם משתמש וסיסמה.)

במסך הבא, לחץ על המשך. דף חדש יופיע שבו יתבקש ממך לבחור את חשבון הקבוצה שלך ב-DigitalOcean וללחוץ על הכפתור אשר אפליקציה.

הרשאה היא התהליך שבו נותן לאדם את היכולת לגשת למשאב. במקרה זה, אתה נותן לאתר שלך גישה לפרטי הכניסה שלך מ-DigitalOcean כדי לאמת אותך.

לאחר התחברות, תראה את דף הבית שלך כפי שמוצג למטה:

לאחר התחברות מוצלחת, שם המשתמש שלך והקישור התנתקות יוצגו באתר.

הערה: במהלך התהליך עשוי להופיע לך הודעת שגיאה, אין זיהוי SocialApp התואם:

הבעיה הזו נוצרת בדרך כלל כאשר אתה מתייחס בצורה שגויה למספר זיהוי של האתר שלך, למשל אם יש לך example.com כאתר הראשון באתר שלך. כדי לפתור את זה, יש למצוא את SITE_ID בקובץ settings.py ולהגדיל את הערך שלו ב-1 עד שהשגיאה תיעלם.

בשלב זה, ביצעת בדיקה לתצורת האימות שלך על ידי התחברות לאתר שלך באמצעות פרטי ההתחברות של DigitalOcean.

מסקנה

במדריך זה, בנית Django app שמטפל באימות חברתי באמצעות django-allauth. כלולת אימות חברתי מ-DigitalOcean וביצעת בדיקה על ידי התחברות לאתר שלך. ניתן לגשת לקוד הפרוייקט ב-GitHub.

כשלב הבא, ניתן להשתמש ב-django-allauth לאימות בכל אחד מפרוייקטי האפליקציה שלך ב-Django עם כל אחד מ-ספקי django-allauth. למידע נוסף על אימות Django עם django-allauth, ניתן לעיין ב-תיעוד הרשמי של Django-Allauth וב-תיעוד הרשמי של Django על אימות.

אתה יכול גם להוסיף עיצוב לעמודי allauth, שיש להם עיצוב בסיסי ברירת מחדל. כדי להוסיף עיצוב לעמודי allauth, אתה יכול לשכפל את פרויקט ה־django-allauth מ־GitHub ולהשתמש בספריית ה־django-allauth/allauth/templates מהמאגר שהועתק כדי לעצב את העמודים שלך.

Source:
https://www.digitalocean.com/community/tutorials/how-to-authenticate-django-apps-using-django-allauth