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

有疑问请在杜赛的我的网站留言，我会尽快回复。
或Email私信我：dusaiphoto@foxmail.com
项目完整代码：Django_blog_tutorial