Django_Social_Login_Tutorial
大家一定常看到可以使用社交平台登入的網站，
像是使用 FACEBOOK ， GITHUB，
GOOGLE
，
TWITTER 登入並註冊網站。
今天要教大家使用 Django 實現一個可以使用社交平台登入並且註冊的網站，
建議對不熟悉 Django 的朋友，可以先觀看我之前寫的 Django 基本教學 – 從無到有 Django-Beginners-Guide，
如果你想看 Flask 的範例，可以參考我之前寫的 Flask-Login-example。
特色
-
基本登入以及註冊，使用社交平台登入。
-
忘記密碼使用信箱重新設定密碼。
安裝套件
確定電腦有安裝 Python 之後
請在 cmd ( 命令提示字元 ) 輸入以下指令
pip install -r requirements.txt
我可以從這篇範例學到什麼
-
對 Django 有更深入的認識並且了解他的強大。
-
了解 django template tag ( 自定義模板 ) 。
-
使用 Django 發送信件。
-
了解 django-bootstrap3 使用方法，以及為什麼我們要去使用它。
-
Django 的 authentication 以及 social-auth-app-django 的使用方法 ( 社交平台登入 )。
-
少踩幾個雷 QQ。
教學
了解 django template tag ( 自定義模板 )
我們先進去 account 資料夾裡，新增一個 templatetags 資料夾，並且在裡面建立一個空的 __init__.py，
然後我們再建立一個 account_tags.py，account 資料夾裡面的結構應該像下圖
我們在 account_tags.py 裡填入以下程式碼
from django import template
from django.contrib.auth.models import User
register = template.Library()
@register.simple_tag
def total_people():
return User.objects.count()
接著我們在 dashboard.html 裡填入下方程式碼 ( 完整程式碼請參考 dashboard.html )
重要的是 {% load account_tags %} 以及 {% total_people %}
注意，當你加入新的 template tags ，請重新啟動你的 Django Server
使用自定義 template tags 的好處是你可以在任何的 template 中處理資料，而不用每次都要使用 views 去 render 你的資料。
Django 提供三種方法來讓你建立自己的 template tags
更多可參考官網說明 django template tag ( 自定義模板 ) 。
使用 Django 發送信件
設定 Django 在 console 中輸出 e-mail 內容來代替使用SMTP寄送郵件（測試用）。
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
如果你想要真的寄出一封郵件，請修改 settings.py
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_HOST_USER = 'your_account@gmail.com'
EMAIL_HOST_PASSWORD = 'your_password'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
你也可以直接在 python console 中測試郵件是否會寄出
from django.core.mail import send_mail
接著寄出郵件
send_mail(‘Django mail’, ‘This e-mail was sent with Django.’,’your_account@gmail.com‘, [‘your_account@gmail.com‘], fail_silently=False)
本篇使用 Gmail 當作範例，其他的信箱應該大同小異，請自行研究。
一些設定，請參考我之前寫的
django-bootstrap3 使用方法，以及為什麼我們要去使用它
我們版型套用 bootstrap 來完成，
Django 在 render form 的時候，他有預設的 html 格式，不過有時候我們常常需要加入一些自己的 class。
我們有一個 form 如下
from django import forms
class UserRegistrationForm(forms.ModelForm):
password = forms.CharField(label='Password',
widget=forms.PasswordInput)
Django render 出如下 html
假如我們要加上自己的 class
依照官網的說明 customizing-widget-instances，我們可以使用下面這種方法
from django import forms
class UserRegistrationForm(forms.ModelForm):
password = forms.CharField(label='Password',
widget=forms.PasswordInput(attrs={'class': 'add_class'}))
然後 render 出來的內容會變成
雖然結果是我們想要的，但你會發現有點奇怪 , 因為這些東西其實應該寫在 html 裡面才對，而不是寫在 python 裡面，
這樣會不好管理 css，所以為了解決這個問題，就有 django-widget-tweaks 以及 django-bootstrap3 出現來解決這個問題，
在這邊我們使用 django-bootstrap3 ，因為我們是套用 bootstrap ，
django-bootstrap3 使用方法如下
更多說明可參考 django-bootstrap3
social-auth-app-django 的使用方法 ( 社交平台登入 )
請在你的命令提示字元 (cmd ) 底下輸入
pip install social-auth-app-django
INSTALLED_APPS = [
......
'social_django',
......
]
接著在你的命令提示字元 (cmd ) 底下輸入
python manage.py migrate
AUTHENTICATION_BACKENDS = (
......
'social_core.backends.facebook.FacebookOAuth2',
'social_core.backends.github.GithubOAuth2',
'social_core.backends.google.GoogleOAuth2',
'social_core.backends.twitter.TwitterOAuth',
......
)
設定 URLs
可參考本範例的 urls.py
urlpatterns = [
......
path('social-auth/', include('social_django.urls', namespace='social'))
]
設定 NAMESPACE
SOCIAL_AUTH_URL_NAMESPACE = 'social'
請到 https://developers.facebook.com/apps/?action=create 建立 app，
詳細教學可參考我之前寫的 facebook登入-前置作業，
比較要注意的地方是請將網址設定為 http://localhost:8000/ ， 並且將 fb 的應用程式網域設定為 localhost，
這樣你就可以在本地端測試，
最後請將你的 FACEBOOK KEY 以及 SECRET 貼到 settings.py
SOCIAL_AUTH_FACEBOOK_KEY = 'XXX' # Facebook App ID
SOCIAL_AUTH_FACEBOOK_SECRET = 'XXX' # Facebook App Secret
Templates 使用方法，可參考 login.html
請到 https://github.com/settings/applications/new 建立 app ，
本機測試設定如下
Authorization callback URL 請填入 http://localhost:8000/social-auth/complete/github/
最後請將你的 GITHUB KEY 以及 SECRET 貼到 settings.py
SOCIAL_AUTH_GITHUB_KEY = 'XXX' # GITHUB App ID
SOCIAL_AUTH_GITHUB_SECRET = 'XXX' # GITHUB App Secret
Templates 使用方法，可參考 login.html
請到 https://console.developers.google.com/project 建立 app
授權導向 URI 請填入http://localhost:8000/social-auth/complete/google-oauth2/
最後請將你的 GOOGLE KEY 以及 SECRET 貼到 settings.py
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = '' # Google Consumer Key
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = '' # Google Consumer Secret
記得啟用 GOOGLE+ API
Templates 使用方法，可參考 login.html
請到 https://developer.twitter.com/en/portal/projects-and-apps 建立 app,
Callback URL 請填入 http://localhost:8000/social-auth/complete/twitter/
最後請將你的 TWITTER KEY 以及 SECRET 貼到 settings.py
SOCIAL_AUTH_TWITTER_KEY = 'XXX' # TWITTER App ID
SOCIAL_AUTH_TWITTER_SECRET = 'XXX' # TWITTER App Secret
Templates 使用方法，可參考 login.html
執行畫面
首頁
佈署
佈署到 Heroku,
詳細教學可參考我之前寫的 Deploying_Django_To_Heroku_Tutorial
建議使用 WhiteNoise 佈署
pip3 install whitenoise
這樣靜態檔案才會正常顯示.
詳細說明可參考 Using WhiteNoise with Django
在 settings.py 中加入以下東西,
記得把 DEBUG 修改為 False
DEBUG = False
設定 STATIC_ROOT
STATIC_ROOT = BASE_DIR / "staticfiles"
設定 WhiteNoise 到 MIDDLEWARE
MIDDLEWARE = [
# ...
"django.middleware.security.SecurityMiddleware",
"whitenoise.middleware.WhiteNoiseMiddleware",
# ...
]
Add compression
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
最後執行 python3 manage.py collectstatic
如果沒有任何錯誤, 再將產生出來的東西一起 push 到 Heroku 上.
TODO
- 佈署到 Heroku 社交平常登入 ( FACEBOOK ) 異常，但本機測試 ( localhost ) 正常。
執行環境
- Python 3.9
Reference
Donation
文章都是我自己研究內化後原創，如果有幫助到您，也想鼓勵我的話，歡迎請我喝一杯咖啡
License
MIT license