この記事ではDjangoのログインやアカウント作成を簡単に実装できる「django-allauth」の導入の仕方を確認していきます。
ログイン周りの機能は自分で実装することも可能ですが、最初のうちは「django-allauth」に頼って問題なと思います。
「DjnagoでTodoリストを作成する」シリーズの続きとして作成していきたいと思います。
「DjnagoでTodoリストを作成する」シリーズをみていない方はぜひ「Todoリスト」を作成してからログイン機能の方を実装してください。
前回までの記事。
では早速みていきましょう。
django-allauthのインストール
まずは「django-allauth」をインストールしましょう。
pip install django-allauthこれでインストールできます。
Anacondaで環境を構築している方は、念のため「conda」でインストールしましょう。
pip uninstall django-allauth
conda install -c conda-forge django-allauthこれでインストールは完了です。
settings.pyの編集
それでは「settings.py」を編集していきましょう。
「INSTALLED_APPS」に次のように追記してください。
INSTALLED_APPS = [
・
・
・
# dajngo-allauth
'django.contrib.sites',
'allauth',
'allauth.account',
'allauth.socialaccount',
]これはDjango側に「django-allauth」の設定を伝えています。
次に以下を「settings.py」の末尾に追加してください。
# sitesフレームワーク用のサイトID
SITE_ID = 1
# 認証バックエンドを設定
AUTHENTICATION_BACKENDS = (
'allauth.account.auth_backends.AuthenticationBackend',
'django.contrib.auth.backends.ModelBackend',
)
# 認証方式を 「メールアドレスとパスワード」 に変更
ACCOUNT_AUTHENTICATION_METHOD = 'email'
# ユーザー名は使用しない
ACCOUNT_USERNAME_REQUIRED = False
# ユーザー登録確認メールは送信しない
ACCOUNT_EMAIL_VERIFICATION = 'mandatory'
# メールアドレスを必須項目にする
ACCOUNT_EMAIL_REQUIRED = True
# ログイン時のリダイレクト先
LOGIN_REDIRECT_URL = 'todo:todo_list'
# ログアウト時のリダイレクト先
ACCOUNT_LOGOUT_REDIRECT_URL = '/accounts/login/'
ACCOUNT_LOGOUT_ON_GET = True
# メール送信の設定
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'「django-allauth」の細かい設定です。
urls.pyに追記
次にプロジェクト(config)の「urls.py」に次のように追記してください。
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('todo.urls')),
path('accounts/', include('allauth.urls')),
]これで認証機能への繋ぎ込みができました！
実はこれで最低限の設定は完了です。
「django-allauth」は少ない設定で実装できるので魅力的です。
ログイン機能の確認
早速実装できているか確認してきましょう。
「terminal」で「manage.py」が配下にあるディレクトリで次のコマンドを実行してください。
python manage.py migrate
python manage.py runserver「runserver」できたら下記のURLにアクセスしてください。
http://127.0.0.1:8000/accounts/signup/
こんな画面が表示されているはずです。
上記のように入力して「ユーザー登録」を押してください。
このような画面が表示されるので、先ほど「runserver」した「terminal」を確認してください。
このように出力されているので、青くなっている部分をクリックするかコピペでブラウザにアクセスしてください。
ここで「確認する」を押してください。
そうするとログイン画面に飛ぶので、先ほど登録した「メールアドレス」と「パスワード」を入力してください。
入力できたら「ログイン」を押してください。
todoの一覧画面が表示されていれば完璧です！
では本当にユーザーが登録できているか確認しましょう。
下記のURLにアクセスしてください。
管理画面に入れるのですが、もし管理ユーザーを作成していない場合は次のコマンドで作成してください。
python manage.py createsuperuser
ユーザー名 (leave blank to use 'xxxxx'): admin
メールアドレス: 何も入力せずに、Enter押してください。
Password:
Password (again):
このパスワードは ユーザー名 と似すぎています。
このパスワードは短すぎます。最低 8 文字以上必要です。
このパスワードは一般的すぎます。
Bypass password validation and create user anyway? [y/N]: y
Superuser created successfully.
python manage.py runserver作成できたら先ほどのURLをクリックして、管理画面に入りましょう。
「ユーザー」をクリックしてください。
先ほど作成したユーザーと管理者ユーザーがちゃんと登録されていますね。
作成されたうユーザーは「スタッフ権限」がバツになっているので、管理画面などにログインすることができないようになっています。
これで完了です！
と言いたいところなのですが、正直ログイン画面にいくためにURLに直うちはちょっと嫌ですよね...。
なので、HTMLファイルに追記して画面をクリックしてログイン画面などにいけるようにしましょう。
base.htmlの編集
「templates」配下の「base.html」を編集していきます。
「base.html」を以下のように編集してください。（変更点が多いので、コピペで良いです。)
{% load static %}
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
{% block header %}
{% endblock header %}
<title>Todo App</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'todo:todo_list' %}">Todo</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item active">
<a class="nav-link" href="{% url 'account_logout' %}">Log Out</a>
</li>
{% else %}
<li class="nav-item active">
<a class="nav-link" href="{% url 'account_signup' %}">Sign Up</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'account_login' %}">Log In</a>
</li>
{% endif %}
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% block content %}
{% endblock content %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>「Bootstrap」の「Navbar」というものを追加しました。
「Navbar」とはメニューバーのことです。
その中で、ユーザーがログインしていれば、「Log Out」を表示して、ログインしていなければ「Log In」と「Sign Up」を表示するように指定しています。
実行できるか確認
早速クリックで飛べるか確認しましょう。
以下のURLにアクセスしてください。
上の方に「Log Out」と表示されているのを確認できますね。
では「Log Out」を押してみましょう。
ログイン画面に移動しましたね！
それでは「Todo」を押してみましょう。
ログインしていないので先ほど「Log Out」があった部分に「Sign Up」と「Log In」がありますね。
問題なく実行できました！
今回はこれで終了です！
最後に
今回はDjangoのログインやアカウント作成を簡単に実装できる「django-allauth」の導入の仕方を確認していきます。
結構簡単にできるので驚いたと思います。
自分で調べてみながら実装していくともっと「django-allauth」の理解が深まると思います。
また、「django-allauth」を使わず、一から認証周りの機能も作れるようになるとなお良いですね！
次回は「django-allauth」を使用して、「GitHub」と「Google」からログインできるようにしていきたいと思います！
何か質問などがあれば下のTwitterのDMか、ここのコメントで聞いてください！
それでは！
