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,資料庫中的內容如下:

siteid


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

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

admin


設定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位置

login

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


美化版面

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

l1

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

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

把templates下的東西全部複製到自己的template目錄下,修改相關html後,就可以有自己想要的樣式了。備註:使用Bootstrap、Social Buttons for Bootstrap。

l2

附上一小段程式碼供參考


{% 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