详解从Django Allauth中进行登录改造小结

下面我将详细讲解“详解从Django Allauth中进行登录改造小结”的完整攻略。

1.什么是Django Allauth

Django Allauth是一个开源的Django扩展，提供了一系列默认的认证和授权视图及模板，可以快速地实现用户认证、社交账号登录、第三方授权等功能。

2.登录改造的需求及目标

在使用Django Allauth提供的默认登录页面时，登录页的UI与主题风格与网站一致需要良好的用户体验，同时在登录成功后可以进行跳转至指定的页面等。

3.登录改造的实现步骤

3.1. 安装依赖

一般情况下，可以通过pip命令安装Django Allauth及其他相关依赖包。

pip install django-allauth Pillow Social-Auth-Posterous

当然，也可以通过requirements.txt文件进行相关依赖的安装。

3.2. 配置Django设置

在settings.py文件中添加以下配置：

# settings.py

INSTALLED_APPS = [
    # ...
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # ...
]

SITE_ID = 1

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

# 发送邮件配置，用于邮件激活账户
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.qq.com'
EMAIL_PORT = 465
EMAIL_USE_TLS = False
EMAIL_USE_SSL = True
EMAIL_HOST_USER = 'example@qq.com'
EMAIL_HOST_PASSWORD = '*****'
DEFAULT_FROM_EMAIL = 'example@qq.com'
ACCOUNT_EMAIL_CONFIRMATION_EXPIRE_DAYS = 7    # 激活邮件有效期为7天

以上配置需要根据实际情况进行修改，主要配置项说明如下：

INSTALLED_APPS：添加allauth相关应用
SITE_ID：指定站点ID，用于后续处理
AUTHENTICATION_BACKENDS：指定身份认证的后端（支持ModelBackend与Allauth）
EMAIL_BACKEND：指定使用SMTP协议发送电子邮件
EMAIL_HOST：SMTP服务器域名
EMAIL_PORT：SMTP服务端口号
EMAIL_USE_TLS：是否启用TLS加密
EMAIL_USE_SSL：是否启用SSL加密
EMAIL_HOST_USER：SMTP邮件账户
EMAIL_HOST_PASSWORD：SMTP邮件密码
DEFAULT_FROM_EMAIL：发件人邮箱
ACCOUNT_EMAIL_CONFIRMATION_EXPIRE_DAYS：账户激活邮件有效期

3.3. 创建登录视图

在views.py文件中创建登录视图，同时指定登录成功后的跳转页面。

# views.py

from django.shortcuts import render

from allauth.account.views import LoginView

class MyLoginView(LoginView):
    template_name = 'login.html'
    success_url = '/'

以上代码中，我们可以指定使用login.html作为模板文件，成功登录后跳转到‘/’路径。

3.4. 配置URL

在urls.py文件中添加路由。

# urls.py

from django.urls import path
from .views import MyLoginView

urlpatterns = [
    # ...
    path('accounts/login/', MyLoginView.as_view(), name='account_login'),
    # ...
]

以上代码中，我们可以指定accounts/login/登录路径，使用MyLoginView视图函数进行授权。

4. 示例

假如现在我们进行一个社交认证的实例，以Github账号为例。那么我们需要执行以下步骤：

4.1. 配置settings.py

在settings.py文件中添加以下配置：

# settings.py

# 第三方认证支持
SOCIALACCOUNT_PROVIDERS = {
    'github': {
        'APP': {
            'client_id': 'your client id',
            'secret': 'your client secret',
            'key': '',
        },
        'SCOPE': ['read:user'],
        'AUTH_PARAMS': {'access_type': 'online'},
        'METHOD': 'oauth2',
        'LOCALE_FUNC': lambda request: 'zh_CN',
    }
}

以上的配置中，我们指定了Github的认证方式为OAuth2.0，同时在Github官方申请的API中得到client_id与client_secret用于后续使用。

4.2. 修改模板及视图

在login.html模板文件中添加Github认证的按钮。

<!--login.html-->

{% extends 'base.html' %}

{% block content %}
  {% load socialaccount %}
  <h2>Login</h2>
  {% if form.errors %}
    <p>The username and password you specified are incorrect.</p>
  {% endif %}
  <form method="post" action="{% url 'account_login' %}">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Login</button>
  </form>
  <hr>

  {% providers_media_js %}
  {% for provider in providers %}
    <a href="{% provider_login_url provider.id %}">{{ provider.name }}</a>
  {% endfor %}
{% endblock content %}

在views.py文件中添加github_login视图。

# views.py

from allauth.socialaccount.providers.github.views import GitHubOAuth2Adapter
from allauth.socialaccount.providers.oauth2.views import OAuth2LoginView

class GithubLoginView(OAuth2LoginView):
    adapter_class = GitHubOAuth2Adapter
    callback_url = 'http://localhost:8000/accounts/github/callback/'
    client_class = OAuth2Client
    redirect_uri_protocol = 'http'

    def get_client_secret(self):
        return "your client secret"

    def get_client_id(self):
        return "your client id"

以上代码中，我们通过OAuth2LoginView类进行Github认证，并制定回调路径。同时，由于在settings.py中已经添加了Github的认证方式，因此我们可以使用provider_login_url进行链接。

最后在urls.py文件中添加路由。

# urls.py

from django.urls import path
from .views import MyLoginView, GithubLoginView

urlpatterns = [
    # ...
    path('accounts/login/', MyLoginView.as_view(), name='account_login'),
    path('accounts/github/login/', GithubLoginView.as_view(), name='socialaccount_signin_github'),
    path('accounts/github/callback/', GithubLoginView.as_view(), name='socialaccount_callback_github'),
    # ...
]