使用 Django Allauth 套件

Django本身有一個帳號管理系統，不過較為陽春，想要有其他功能需要自己動手實作。俗話說的好，我們要站在巨人的肩膀上看世界，用這個 Django-allauth 套件就能解決許多事啦！已經幫我們做好登入/註冊介面、寄驗證信與第三方登入，絕的版型不好看，還可以覆蓋掉原本的模板，非常好用。

安裝

$ pip install django-allauth

設定 allauth

• 設定 settings.py

1. 引入 django.contrib.sites、allauth 與 allauth.account
2. 想要使用哪個社交軟體登入，加入相對應的 socialaccount.providers
3. 記得要加入 SITE_ID。這是用來指名 domain name 與 name 的連結。如果不知道的話，可以在資料庫中查看 ID 值，在 django_site 這個資料表中。例如筆者的 SITE_ID 為 2，資料庫中的內容如下：

INSTALLED_APPS = (
    # Django sites framework is required
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.facebook',
    'allauth.socialaccount.providers.google',
    'allauth.socialaccount.providers.twitter',
)

SITE_ID = 2

• 設定 urls.py

urlpatterns = [
    …
    url(r'^accounts/', include('allauth.urls')),
    …
    ]
)

設定完後，執行以下指令

$ python manage.py makemigrations
$ python manage.py migrate

進入管理頁面，就會看到新的欄位：網站、電子郵件、社群帳號。

設定 email 寄信

設定完後就可以使用了，不過寄驗證信的地方會卡住，原因是沒有設定 email 信箱。筆者使用 Gmail 的信箱來寄信，在 settings.py做以下設定

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
# TLS Port
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_HOST_USER = 'xxxx@gmail.com'
# Application Key
EMAIL_HOST_PASSWORD = 'xxxx'

設定第三方登入

想要使用第三方登入，除了在 settings.py 中加入 socialaccount.providers 外，還需要在 admin 頁面下新增社群應用程式。

社群帳號 › 社群應用程式 › 新增 社群應用程式

提供者：第三方登入帳號，如 Facebook Client ID 與 Secret Key：第三方平台提供的 ID 與密碼 Sites：加入可以登入的 Site，本例為筆者的 Server 位置

使用第三方帳號登入，我們就可以得到使用者在該平台上的一些資料。以 Facebook 來說，可以得到 email 信箱、姓名、性別、大頭貼等等，非常方便。

美化版面

原本的頁面時分簡潔，如果想要美化版面，我們可以透過覆寫 template 達成

筆者使用虛擬環境開發，allauth 的目錄為

/venv/lib/python2.7/site-packages/allauth/templates

把 templates 下的東西全部複製到自己的 template 目錄下，修改相關 HTML 後，就可以有自己想要的樣式了。

備註：使用 Bootstrap、Social Buttons for Bootstrap。

附上一小段程式碼供參考

{% extends "account/base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
{% load staticfiles %}
<!– Bootstrap –>
<link rel="stylesheet" href="{% static "css/bootstrap-social.css" %}" media="screen">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div class="container ">

    <div class="well col-md-4 col-md-offset-4">

    {% load socialaccount %}
    {% providers_media_js %}

    <a class="btn btn-block btn-social btn-facebook" href="{% provider_login_url "facebook" %}">
    <span class="fa fa-facebook"></span> 使用 Facebook 登入
    </a>
    <a class="btn btn-block btn-social btn-google">
    <span class="fa fa-google"></span> 使用 Google 登入
    </a>

    <hr size="1" color="#DDDDDD" border="0" height="1px">

        <form class="login form-horizontal" method="POST" action="{% url 'account_login' %}">
        {% csrf_token %}

        {{ form.non_field_errors }}

        <div class="form-group">
        {{ form.login.errors }}
        <label for="inputDefault" class="col-lg-3 control-label">帳號</label>

        <div class="col-lg-9">
        <input class="form-control" autofocus="autofocus" id="id_login" maxlength="30" name="login" placeholder="帳號" type="text" />
        </div>

        </div>

        <div class="form-group">
        {{ form.password.errors }}
        <label for="inputDefault" class="col-lg-3 control-label">密碼</label>

        <div class="col-lg-9">
        <input class="form-control" id="id_password" name="password" placeholder="密碼" type="password" />
        </div>

        </div>

        <div class="form-group">
        {{ form.remember.errors }}
        <label for="inputDefault" class="col-lg-3 control-label"></label>

        <div class="col-lg-9">
        <input id="id_remember" name="remember" type="checkbox" /> 記住我
        </div>

        </div>

        {% if redirect_field_value %}
        <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
        {% endif %}

        <div class="form-group">

        <div class="col-lg-9 col-lg-offset-3">
        <button class="primaryAction btn btn-default btn-primary" type="submit">{% trans "Sign In" %}</button>
        <a class="button btn btn-primary" href="{% url ‘account_reset_password’ %}">{% trans "Forgot Password?" %}</a>
        </div>
        </div>
        </form>
    </div>
</div>
{% endblock %}

自訂 Email 訊息

email 訊息與其他的 message 都在 templates 下，將 template 覆寫掉即可。

/templates/account/email/email_confirmation_message.txt
/templates/account/email/email_confirmation_subject.txt

參考資料

• django-allauth doc
• django-allauth SITE_ID error
• the-missing-django-allauth-tutorial