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

siteid - 使用 Django Allauth 套件

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 - 使用 Django Allauth 套件


設定 email 寄信

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

請支持《傑瑞窩在這》原創文章。原文標題:使用 Django Allauth 套件,原文網址:https://jerrynest.io/django-allauth/
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 - 使用 Django Allauth 套件

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


美化版面

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

l1 e1453118249475 - 使用 Django Allauth 套件

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

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

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

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

l2 - 使用 Django Allauth 套件

附上一小段程式碼供參考

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

參考資料

如果您覺得這篇文章有幫助,歡迎按個讚或分享出去唷:

樂於分享的軟體工程師,曾在新創與大型科技公司實習,獲得黑客松競賽冠軍,擔任資安研討會講者。長期熱衷於資訊安全、雲端服務、網路行銷等領域,希望將科技知識分享給更多人。內容轉載請來信:jlee58tw@gmail.com

6 個回應

  1. allauth 裝在雲端pythonanywhere 不能執行, 但 裝在ubuntu ,卻可正常執行~
    google了很久找不到哪裡出錯.. 出現如下:
    請教可以指點迷津嗎?

    : Error running WSGI application
    2017-06-12 08:14:00,783: ModuleNotFoundError: No module named ‘allauth’
    2017-06-12 08:14:00,783: File “/var/www/ianchen0311_pythonanywhere_com_wsgi.py”, line 12, in
    2017-06-12 08:14:00,783: application=get_wsgi_application()
    2017-06-12 08:14:00,783:
    2017-06-12 08:14:00,783: File “/usr/local/lib/python3.6/dist-packages/django/core/wsgi.py”, line 13, in get_wsgi_application
    2017-06-12 08:14:00,783: django.setup(set_prefix=False)
    2017-06-12 08:14:00,783:
    2017-06-12 08:14:00,784: File “/usr/local/lib/python3.6/dist-packages/django/__init__.py”, line 27, in setup
    2017-06-12 08:14:00,784: apps.populate(settings.INSTALLED_APPS)
    2017-06-12 08:14:00,784:
    2017-06-12 08:14:00,784: File “/usr/local/lib/python3.6/dist-packages/django/apps/registry.py”, line 85, in populate
    2017-06-12 08:14:00,784: app_config = AppConfig.create(entry)
    2017-06-12 08:14:00,784:
    2017-06-12 08:14:00,784: File “/usr/local/lib/python3.6/dist-packages/django/apps/config.py”, line 94, in create
    2017-06-12 08:14:00,784: module = import_module(entry)
    2017-06-12 08:14:00,785: ***************************************************
    2017-06-12 08:14:00,785: If you’re seeing an import error and don’t know why,
    2017-06-12 08:14:00,785: we have a dedicated help page to help you debug:
    2017-06-12 08:14:00,785: https://help.pythonanywhere.com/pages/DebuggingImportEr

    • 您好~

      看來在 pythonanywhere 找不到 allauth 這個套件
      代表上面沒有安裝
      可以用 terminal 介面安裝看看?注意他是 python3.6 要用 pip3 install 唷

    • 3.5 …裝了…也看到allauth 確實在python3.5裡..但也是出現一樣的錯誤.
      我是照某書本上教的,跟您的文章 的內容操作都一樣
      但我的還是出現錯誤, 搞到我快瘋了~~~
      真傷腦筋

    • 你應該是把 allauth 裝在3.5, 可是pythonanywhere 跑的是3.6
      外國人給的指令意思相同,在虛擬環境跑指定3.5版本路徑應該不會有問題才對

    • 大大您說的對.好像是,外國人說有一個路徑要設, 成一致:
      我再試試….謝謝您~~~

    • 某個外國人說這樣: 但我實在不太懂他的意思.下面是他講的.
      而且他說的指令我也看不懂;
      建虛擬機器不是virtualenv -p/usr/bin/python3.5 VENN 這樣嗎?
      外國人說mkvirtualenvmyenv –python=’which python3.5′ 這句話是什麼意思呢?

      mkvirtualenv myenv –python=`which python3.5`
      pip install allauth
      …then you need to make sure your web app is using the virtualenv that you created (myenv, in this case) and that it’s using the virtualenv’s Python version (3.5 in this case).

發表回應