カスタムユーザー構築チュートリアル
自己紹介
プログラミング講師の飼鳥晴康(@hathle)です。
エンジニア歴は10年以上で海外(カナダ)就労も経験しています。
カナダでは、映画を作っていました。
現在は、独立して、Python、Djangoをメインにオンラインでマンツーマンレッスンをしています。
お問い合わせなどは、Twitter(@hathle)からお願いいたします。
プログラミングは人生を変えることができます。
目標に向かって、一緒に頑張っていきましょう！！
はじめに
カスタムユーザーを構築してみましょう。
デフォルトでは、ユーザー名でログインすることになりますが、メールアドレスでログインした方が都合がいい場合があります。
その場合、Userモデルをカスタマイズして、メールアドレスでログインする認証に変更します。
認証機能は、便利なallauthパッケージを使用します。
allauthとは？
Djangoのユーザー認証機能をそろえている便利なパッケージです。
カスタムユーザーを構築したプロジェクトは、他のアプリケーションのベースになりますので、すぐに使えるようにバックアップしておくとよいです。
他のチュートリアルでもこのプロジェクトを使用していますので、完成したらバックアップを取っておいて下さい。
Zenn
Zennのチュートリアルは見やすくなっています。
目標
下記を学習していきます。
・メールアドレスでログインする方法
・サインアップ時に名前などを入力する方法
・ログイン限定画面の作り方
・プロフィール画面の作り方
・プロフィール編集画面の作り方
・ユーザー情報に所属を追加する方法
機能
・サインアップ
・メールアドレスでログイン
・ログアウト
・プロフィール
・プロフィール編集
前提知識
Djangoを始める前に、下記の言語は学習しておいて下さい。
・Python
・HTML
・CSS
・JavaScript
ブログ構成チュートリアルでDjangoを詳しく説明していますので、まだ実施していない方は、実施して下さい。
では、始めて行きましょう！！
準備
開発の準備をします。
GitHub準備
GitHubのリポジトリを作成します。
.gitignore作成
記述されたファイルは、git管理下から除外されてコミットされなくなります。
.gitignore
myvenv
db.sqlite3
.vscode
__pycache__
*.pyc
.DS_Store仮想環境の作成
myvenvという名前で仮想環境を構築します。
$ python3 -m venv myvenv仮想環境の実行
sourceコマンドで仮想環境を実行します。
ターミナルを再起動したときなど、必ずこのコマンドを実行して、仮想環境に入って下さい。
仮想環境に入ると、ターミナルに(myvenv)という印が付きます。
これがあると、仮想環境に入っていることになります。
$ source myvenv/bin/activaterequirements.txt作成
開発で必要なパッケージを記載します。
requirements.txt
Django==3.1.4
django-allauth~=0.41.0
django-widget-tweaks~=1.4.8パッケージのインストール
このコマンドで、requirements.txtに記載されたパッケージがインストールされます。
(myvenv) ~$ pip3 install -r requirements.txtこれで、Djangoで開発する準備ができました。
プロジェクト作成
プロジェクトを作成します。
(myvenv) ~$ django-admin startproject mysite .環境設定変更
settings.pyを修正してプロジェクトの設定を変更します。
mysite/settings.py
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'データベースのセットアップ
migrateコマンドをすることでデータベースがセットアップされます。
(myvenv) ~$ python3 manage.py migrateWebサーバーを起動する
Djangoが起動できるか確認しましょう。
(myvenv) ~$ python3 manage.py runserverURLにアクセスすると、Webページが表示されます。
Webサーバーを停止するには、Ctrl + Cを同時に押すと停止します。
アプリケーション作成
アプリケーションを作成してきます。
今回は、メインコンテンツのappとアカウント用のaccountsを作成します。
(myvenv) ~$ python3 manage.py startapp app
(myvenv) ~$ python3 manage.py startapp accountsアプリケーションを使えるように設定
アプリケーションを使えるようにするには、プロジェクト設定にアプリケーションを追加する必要があります。
allauthパッケージとwidget_tweaksパッケージも同時に設定します。
mysite/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'widget_tweaks', # 追加
'app', # 追加
'accounts', # 追加
'django.contrib.sites', # 追加
'allauth', # 追加
'allauth.account', # 追加
'allauth.socialaccount' # 追加
]
SITE_ID = 1
LOGIN_REDIRECT_URL = '/'
ACCOUNT_LOGOUT_REDIRECT_URL = '/'
ACCOUNT_EMAIL_VERIFICATION = 'none'メインコンテンツ
メインコンテンツを作成していきます。
このチュートリアルは、認証メインのチュートリアルなので、メインコンテンツは簡易的なものにします。
プロジェクトURL
プロジェクトURLにappアプリケーションを指定します。
mysite/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('app.urls')),
]アプリケーションURL
アプリケーションURLにビューを指定します。
今回は、IndexViewにします。
逆引き名はindexです。
app/urls.py
from django.urls import path
from app import views
urlpatterns = [
path('', views.IndexView.as_view(), name='index'),
]ビュー
TemplateViewを使用して、固定ページにします。
テンプレート名は、app/index.htmlです。
app/views.py
from django.views.generic import TemplateView
class IndexView(TemplateView):
template_name = "app/index.html"テンプレート
ベースとなるテンプレートを作成します。
簡単にレイアウトをするため、Bootstrapを導入しています。
app/templates/app/base.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<title>カスタム認証チュートリアル</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">ホーム</a>
</li>
</ul>
</div>
</nav>
<main>
<div class="container">
{% block content %}
{% endblock %}
</div>
</main>
<footer class="py-2 bg-dark">
<p class="m-0 text-center text-white">Copyright © Django Startup 2020</p>
</footer>
{% block extra_js %}
{% endblock %}
</body>
</html>index.htmlの中は文字だけを記載しておきます。
app/templates/app/index.html
{% extends "app/base.html" %}
{% block content %}
<div class="my-5">
<h1>Hello World!!</h1>
</div>
{% endblock %}CSS
CSSも導入しておきます。
app/static/css/style.css
・{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #F1F1F1;
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
flex: 1;
}確認
メインコンテンツはこのような画面になります。
プロフィール画面
ログインしている人のプロフィール情報を記載する画面を作成します。
Webアプリケーションには必須の画面になります。
プロジェクトURL
プロジェクトURLにaccountsアプリケーションを指定します。
mysite/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('app.urls')),
path('accounts/', include('accounts.urls')),
]アプリケーションURL
アプリケーションURLにProfileViewを指定します。
逆引き名はprofileとします。
accounts/urls.py
from django.urls import path
from accounts import views
urlpatterns = [
path('profile/', views.ProfileView.as_view(), name='profile'),
]ここから先は
¥ 500
最後まで読んでいただきありがとうございました😃 サポートは、プログラミングチュートリアル開発の手助けとなります。 シェアもして頂くと嬉しいです。 Twitterのフォローもお願いします。 https://twitter.com/hathle