Django搭建我的博客：用django-allauth實現第三方登陸

時間  2019-11-09
標籤 django 搭建 我的 博客 allauth 實現 第三方 登陸 欄目 Python 简体版
原文   原文鏈接

如今咱們已經擁有一個能夠進行用戶本地登陸的博客系統了。若是有人欣賞你的文章，說不定就會註冊成爲本地用戶，並和你好好交流一番。html

但頭疼的是，用戶可能天天都在互聯網上瀏覽不少很是棒的博客，若是每一個博客都要去註冊才能評論，對用戶是個不小的負擔。對我的博客這類草根網站，說不定用戶就懶得去註冊了，你也就損失了一個潛在的」粉絲「。python

比較流行的解決方案是容許用戶經過第三方登陸，便可以經過GitHub、微博這類知名社區的受權，從而登陸你的小站，免去了註冊的麻煩。git

本章會介紹一個強大的庫：Django-allauth，它不只包含一整套的本地註冊、登陸、管理的解決方案，還支持GitHub、Twitter、微博、微信甚至百度等幾十種第三方登陸方式，真的是當爹又當媽啊...程序員

本地登陸

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

安裝django-allauth：django

(env) > pip install django-allauth
複製代碼

修改配置文件：bash

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'

...
複製代碼

注意上面的配置中，有的內容是建立項目時原本就有的，檢查一下你的項目中是否包含；有的內容是徹底新增的，不要漏掉了。服務器

django-allauth也是一個app，所以須要分配給它url：微信

my_blog/urls.py

...

urlpatterns = [
    ...
    path('accounts/', include('allauth.urls')),
    ...
]
複製代碼

最後一步是遷移數據：app

(env) > python manage.py migrate
複製代碼

這就完成了！

輸入django-allauth的默認登陸頁面地址：

http://127.0.0.1:8000/accounts/login/
複製代碼

顯示頁面以下：

設置網站首頁

教程到如今，咱們的博客都尚未分配首頁地址。

博客網站的首頁一般就是文章列表自己，所以把這個路由添加到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自帶的模板是簡陋的，須要覆寫爲本身網站的風格才能使用。

還記得咱們一直在使用的虛擬環境嗎？沒錯，全部項目運行所需的第三方庫都是保存在虛擬環境的文件夾中的，在本教程中也就是env文件夾了。找到下面的路徑：

env\Lib\site-packages\allauth\templates\account\login.html
複製代碼

這個login.html就是原始的登陸模板文件了。雖然能夠直接修改這個文件來優化頁面，可是這樣作是很蠢的，由於每當你升級庫、或者換臺電腦部署時，模板又恢復回去了。

正確的作法是複製這個login.html到你本身項目的templates文件夾中去。即你須要在項目中建立一個徹底相同的路徑：

templates\account\login.html
複製代碼

Django會優先在項目中尋找模板文件，所以只要相對路徑相同，則能夠達到覆寫的目的。

接下來就能夠愉快的定製風格了。

參考代碼以下：

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 %}
複製代碼

實際效果以下：

除了登陸頁面之外，其餘的全部頁面，如註冊、郵箱認證頁面及郵件、第三方登陸頁面等均可以用這種方法進行覆寫。教程中就再也不贅述，讀者請自行嘗試。

註冊

接下來看看註冊頁面。

點擊註冊按鈕，則看到以下頁面：

須要注意的是郵箱這一項若是你填了，那麼站點會自動向填寫的郵箱發送認證郵件。所以前面章節中講過的關於郵箱的配置必定要正確，不然就會獲得一個ConnectionRefusedError的錯誤。相關的配置項以下：

my_blog/settings.py

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

記得修改成你本身的郵箱配置。

另外須要注意的是django-allauth所註冊的帳號與django內置的本地帳號是通用的，也就是說經過內置User建立的帳號，是能夠經過django-allauth登陸的。

有了django-allauth，以前教程中寫的用戶登陸、註冊以及密碼重置模塊通通均可以不要了。那既然如此，博主繞了這麼大個彎不是坑人嗎？這個嘛，學習就是要變着法折騰..

GitHub登陸

搞定了本地登陸，接下來的第三方登陸纔是重點。

因爲GitHub的第三方登陸是最容易的，所以做爲例子來說解。

做爲合格的程序員，怎麼能沒有GitHub帳號！

GitHub註冊OAuth

建立第三方登陸的第一步，是須要在GitHub網站上建立OAuth應用。登陸GitHub帳號，而後進入地址：

https://github.com/settings/applications/new
複製代碼

不排除之後這個地址會變，若是不對就麻煩讀者在我的主頁的settings裏找一找OAuth的設置了。

進入頁面後，填寫一下內容：

填寫的是本地IP，之後部署在線上再修改爲實際的域名。

注意callback URL填寫的內容。點擊肯定後，就獲得了應用的信息：

其中的Client ID和Client Secret就是要用到的憑證。

Django後臺配置

而後對Django後臺進行設置。

進入後臺，你會發現多了幾個欄目：

打開Sites，將example.com修改成博客域名。開發時則修改成本地IP：

而後進入Social applications，添加一條applications以下：

注意最下面的Sites欄必定要把剛纔添加的站點選擇到右邊去。

回到django-allauth的登陸頁面，點擊github登陸：

實現了GitHub登陸。

allauth配置項

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

ACCOUNT_EMAIL_VERIFICATION = 'optional' / 'mandatory' / 'none'：當其爲mandatory時，本地註冊的用戶必須先驗證郵箱才能夠登陸。optional和none都不要求驗證郵箱，區別是optional仍然會發送驗證郵件，而none連認證郵件都不會發送。

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' %}。這些在原始模板文件或官方網站都能查到。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程