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


參考資料