Django搭建個人博客:用django-allauth實現第三方登錄

現在我們已經擁有一個可以進行用戶本地登錄的博客系統了。如果有人欣賞你的文章含懊,說不定就會注冊成為本地用戶身冬,并和你好好交流一番。

但頭疼的是岔乔,用戶可能每天都在互聯網上瀏覽很多非常棒的博客吏恭,如果每個博客都要去注冊才能評論,對用戶是個不小的負擔重罪。對個人博客這類草根網站,說不定用戶就懶得去注冊了哀九,你也就損失了一個潛在的”粉絲“剿配。

比較流行的解決方案是允許用戶通過第三方登錄,即可以通過GitHub阅束、微博這類知名社區(qū)的授權呼胚,從而登錄你的小站,免去了注冊的麻煩息裸。

本章會介紹一個強大的庫:Django-allauth蝇更,它不僅包含一整套的本地注冊沪编、登錄、管理的解決方案年扩,還支持GitHub蚁廓、Twitter、微博厨幻、微信甚至百度等幾十種第三方登錄方式相嵌,真的是當爹又當媽啊...

本地登錄

先看看django-allauth的本地登錄如何配置。

安裝django-allauth

(env) > pip install django-allauth

修改配置文件:

my_blog/settings.py

...


TEMPLATES = [
    {
        ...
        'OPTIONS': {
            'context_processors': [
                # allauth 啟動必須項
                'django.template.context_processors.request',
            ],
        },
    },
]


AUTHENTICATION_BACKENDS = (
    # Django 后臺可獨立于 allauth 登錄
    'django.contrib.auth.backends.ModelBackend',

    # 配置 allauth 獨有的認證方法况脆,如 email 登錄
    'allauth.account.auth_backends.AuthenticationBackend',
)


INSTALLED_APPS = [
    ...
    # allauth 啟動必須項
    'django.contrib.auth',
    'django.contrib.messages',
    'django.contrib.sites',

    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    
    # 可添加需要的第三方登錄
    'allauth.socialaccount.providers.github',
    'allauth.socialaccount.providers.weibo',
    ...
]

# 設置站點
SITE_ID = 1

# 登錄成功后重定向地址
LOGIN_REDIRECT_URL = '/article/article-list'

...

注意上面的配置中饭宾,有的內容是創(chuàng)建項目時本來就有的,檢查一下你的項目中是否包含格了;有的內容是完全新增的看铆,不要漏掉了。

django-allauth也是一個app盛末,因此需要分配給它url

my_blog/urls.py

...

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

最后一步是遷移數據:

(env) > python manage.py migrate

這就完成了弹惦!

輸入django-allauth的默認登錄頁面地址:

http://127.0.0.1:8000/accounts/login/

顯示頁面如下:

image

設置網站首頁

教程到現在,我們的博客都還沒有分配首頁地址满败。

博客網站的首頁通常就是文章列表本身肤频,因此把這個路由添加到my_blog/urls.py中:

my_blog/urls.py

...
from article.views import article_list

urlpatterns = [
    # home
    path('', article_list, name='home'),
    ...
]
...

再把登錄成功后的重定向地址改過來:

my_blog/settings.py

...
# 重定向 url
#LOGIN_REDIRECT_URL = '/article/article-list'
LOGIN_REDIRECT_URL = '/'

這樣就擁有地址為http://127.0.0.1:8000首頁啦。

美化模板

django-allauth自帶的模板是簡陋的算墨,需要覆寫為自己網站的風格才能使用宵荒。

還記得我們一直在使用的虛擬環(huán)境嗎?沒錯净嘀,所有項目運行所需的第三方庫都是保存在虛擬環(huán)境的文件夾中的报咳,在本教程中也就是env文件夾了。找到下面的路徑:

env\Lib\site-packages\allauth\templates\account\login.html

這個login.html就是原始的登錄模板文件了挖藏。雖然可以直接修改這個文件來優(yōu)化頁面暑刃,但是這樣做是很蠢的,因為每當你升級庫膜眠、或者換臺電腦部署時岩臣,模板又恢復回去了。

正確的做法是復制這個login.html到你自己項目的templates文件夾中去宵膨。即你需要在項目中創(chuàng)建一個完全相同的路徑

templates\account\login.html

Django會優(yōu)先在項目中尋找模板文件架谎,因此只要相對路徑相同,則可以達到覆寫的目的辟躏。

接下來就可以愉快的定制風格了谷扣。

參考代碼如下:

templates\account\login.html


{% extends "base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% block title %}登錄{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-12">
            <br>
            {% get_providers as socialaccount_providers %}
            {% if socialaccount_providers %}
            <p>
                {% blocktrans with site.name as site_name %}請登錄已有本地賬號或<a href="{{ signup_url }}">注冊</a>新賬號。
                也可以通過第三方登錄:{% endblocktrans %}
            </p>

            <div class="socialaccount_ballot">
                <h5 class="mb-2 mt-4">第三方登錄:</h5>
                <ul class="socialaccount_providers">
                  {% include "socialaccount/snippets/provider_list.html" with process="login" %}
                </ul>
                <h5 class="mb-2 mt-4">本地登錄:</h5>
            </div>

            {% include "socialaccount/snippets/login_extra.html" %}

            {% else %}
            <p>{% blocktrans %}If you have not created an account yet, then please
            <a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
            {% endif %}
            <div class="col-6">
                <form class="login" id="login_form" method="POST" action="{% url 'account_login' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="id_login">賬號: </label>
                        <input type="text" name="login" placeholder="請輸入用戶名或Email" autofocus="autofocus" required
                            id="id_login" class="form-control" />
                        <small class="form-text text-muted ml-1">
                            還沒有賬號捎琐?
                            <a href="{% url 'account_signup' %}" style="color: cornflowerblue; ">
                                注冊新賬號
                            </a>
                        </small>
                    </div>
                    <div class="form-group mb-1">
                        <label for="id_password">
                            密碼:
                        </label>
                        <input type="password" name="password" placeholder="請輸入密碼" required id="id_password"
                            class="form-control" />
                        <small class="form-text text-muted ml-1">
                            <a class="secondaryAction layui-text" href="{% url 'account_reset_password' %}">
                                忘記密碼?
                            </a>
                        </small>
                    </div>
                    <div class="custom-control custom-checkbox mb-2">
                        <input type="checkbox" name="remember" id="id_remember" checked class="custom-control-input" />
                        <label for="id_remember" class="custom-control-label">
                            保持登錄
                        </label>
                    </div>
                    <button class="primaryAction btn btn-primary" type="submit" hidden id="submit_login">確認</button>
                    <button class="primaryAction btn btn-primary" type="button" id="on_submit_login">確認</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

實際效果如下:

image

除了登錄頁面以外会涎,其他的所有頁面裹匙,如注冊、郵箱認證頁面及郵件末秃、第三方登錄頁面等都可以用這種方法進行覆寫概页。教程中就不再贅述,讀者請自行嘗試蛔溃。

注冊

接下來看看注冊頁面绰沥。

點擊注冊按鈕,則看到如下頁面:

image

需要注意的是郵箱這一項如果你填了贺待,那么站點會自動向填寫的郵箱發(fā)送認證郵件徽曲。因此前面章節(jié)中講過的關于郵箱的配置一定要正確,否則就會得到一個ConnectionRefusedError的錯誤麸塞。相關的配置項如下:

my_blog/settings.py

# SMTP服務器
EMAIL_HOST = 'your smtp'
# 郵箱名
EMAIL_HOST_USER = 'your email'
# 郵箱密碼
EMAIL_HOST_PASSWORD = 'your password'
# 發(fā)送郵件的端口
EMAIL_PORT = 25
# 是否使用 TLS
EMAIL_USE_TLS = True
# 默認的發(fā)件人
DEFAULT_FROM_EMAIL = 'your email'

記得修改為你自己的郵箱配置秃臣。

另外需要注意的是django-allauth所注冊的賬號與django內置的本地賬號是通用的,也就是說通過內置User創(chuàng)建的賬號哪工,是可以通過django-allauth登錄的奥此。

有了django-allauth,之前教程中寫的用戶登錄雁比、注冊以及密碼重置模塊統統都可以不要了稚虎。那既然如此,博主繞了這么大個彎不是坑人嗎偎捎?這個嘛蠢终,學習就是要變著法折騰..

GitHub登錄

搞定了本地登錄,接下來的第三方登錄才是重點茴她。

由于GitHub的第三方登錄是最容易的寻拂,因此作為例子來講解。

作為合格的程序員丈牢,怎么能沒有GitHub賬號祭钉!

GitHub注冊OAuth

創(chuàng)建第三方登錄的第一步,是需要在GitHub網站上創(chuàng)建OAuth應用己沛。登錄GitHub賬號慌核,然后進入地址:

https://github.com/settings/applications/new

不排除以后這個地址會變,如果不對就麻煩讀者在個人主頁的settings里找一找OAuth的設置了申尼。

進入頁面后遂铡,填寫一下內容:

image

填寫的是本地IP,以后部署在線上再修改成實際的域名晶姊。

注意callback URL填寫的內容。點擊確定后伪货,就得到了應用的信息:

image

其中的Client IDClient Secret就是要用到的憑證们衙。

Django后臺配置

然后對Django后臺進行設置钾怔。

進入后臺,你會發(fā)現多了幾個欄目:

image

打開Sites蒙挑,將example.com修改為博客域名宗侦。開發(fā)時則修改為本地IP:

image

然后進入Social applications,添加一條applications如下:

image

注意最下面的Sites一定要把剛才添加的站點選擇到右邊去忆蚀。

回到django-allauth的登錄頁面矾利,點擊github登錄:

image

實現了GitHub登錄。

allauth配置項

挑幾個比較重要的講一下馋袜。

ACCOUNT_EMAIL_VERIFICATION = 'optional' / 'mandatory' / 'none':當其為mandatory時男旗,本地注冊的用戶必須先驗證郵箱才可以登錄。optionalnone都不要求驗證郵箱欣鳖,區(qū)別是optional仍然會發(fā)送驗證郵件察皇,而none連認證郵件都不會發(fā)送。

SOCIALACCOUNT_EMAIL_VERIFICATION = 'optional' / 'mandatory' / 'none':同理泽台,但是作用于第三方賬號的注冊什荣。

ACCOUNT_AUTHENTICATION_METHOD = 'username_email' / 'user' / 'email':指定登錄方法,即通過用戶名怀酷、郵箱進行登錄稻爬,或者兩者均可。

ACCOUNT_EMAIL_REQUIRED = True / False:注冊本地用戶時蜕依,是否必須填寫郵箱桅锄。

除此之外還有很多配置項,詳細了解請查閱官方文檔笔横。

總結

本章學習了通過django-allauth實現本地及GitHub登錄的功能竞滓。微博、微信的登錄方式大致都遵循這個流程吹缔;本章雖然加載了微博的接口商佑,但是限于篇幅并沒有配置,請讀者查閱官方文檔去實現厢塘。需要注意的是國內的第三方登錄多半需要一兩天時間去申請茶没、審核,要更加麻煩一些晚碾。

另外還剩下寫入口抓半、刪除舊功能等收尾工作,就交給讀者自己去完成了格嘁。

提示一下笛求,登錄的逆向解析地址為{% url 'account_login' %},注冊為{% url 'account_signup' %}。這些在原始模板文件或官方網站都能查到探入。


?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末蜂嗽,一起剝皮案震驚了整個濱河市苗膝,隨后出現的幾起案子,更是在濱河造成了極大的恐慌植旧,老刑警劉巖辱揭,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異病附,居然都是意外死亡问窃,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門胖喳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來泡躯,“玉大人,你說我怎么就攤上這事丽焊〗咸辏” “怎么了?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵技健,是天一觀的道長写穴。 經常有香客問我,道長雌贱,這世上最難降的妖魔是什么啊送? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮欣孤,結果婚禮上馋没,老公的妹妹穿的比我還像新娘。我一直安慰自己降传,他們只是感情好篷朵,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著婆排,像睡著了一般声旺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上段只,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天腮猖,我揣著相機與錄音,去河邊找鬼赞枕。 笑死澈缺,一個胖子當著我的面吹牛坪创,可吹牛的內容都是我干的。 我是一名探鬼主播姐赡,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼误堡,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了雏吭?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤陪踩,失蹤者是張志新(化名)和其女友劉穎杖们,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體肩狂,經...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡摘完,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了傻谁。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片孝治。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖审磁,靈堂內的尸體忽然破棺而出谈飒,到底是詐尸還是另有隱情,我是刑警寧澤态蒂,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布杭措,位于F島的核電站,受9級特大地震影響钾恢,放射性物質發(fā)生泄漏手素。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一瘩蚪、第九天 我趴在偏房一處隱蔽的房頂上張望泉懦。 院中可真熱鬧,春花似錦疹瘦、人聲如沸崩哩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽琢锋。三九已至,卻和暖如春呢灶,著一層夾襖步出監(jiān)牢的瞬間吴超,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工鸯乃, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留鲸阻,地道東北人跋涣。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像鸟悴,于是被迫代替她去往敵國和親陈辱。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內容