Python

【Python】DjangoでTwitterログイン

  • このエントリーをはてなブックマークに追加

事前準備

アプリの作成をする前に、TwitterAPiの利用権限を取得する必要があります。

  • Consumer Key
  • Consumer Secret

の2つを取得するのが目的です。

Twitter Developerアカウントを作成

Twitterログイン機能を使うために
Twitter Developerアカウントを作成してアプリを登録する必要があります。
https://developer.twitter.com/
ここから、Twitter Developerアカウントを作成します。
Twitterへアプリを登録する必要があります。

アプリを登録

https://developer.twitter.com/en/apps/create
からアプリを作成します。
アプリの名の登録、アプリの説明を書いていきます。
ここは、ログインする前に表示される画面で表示されます。
「このアプリを信用しますか?」みたいな画面です。
また、Callback URLs

  • http://127.0.0.1:8000/accounts/complete/twitter/
  • http://localhost:8000/accounts/complete/twitter/

の2つを追加しておきましょう。

Tell us how this app will be used
の説明を英語で適当に入力します。
わたしは、日本語でアプリの説明を書いてGoogle翻訳で作成しました。
APIのクエリ回数が少ない場合は、適当でも大丈夫っぽいです。
Twitterログインのテストに利用する
程度だったら特に適当に入力すれば良いと思います。

Consumer Key,Consumer Secretを取得

Keys and tokensのタブへ移動して、

  • Consumer Key
  • Consumer Secret

の2つが取得できれば準備完了です。

Django2.1.3とsocial-auth-app-djangoをインストール

今回は、Django2.1.3を利用します。

pip install Django==2.1.3

djangoでOAuthを利用する場合、
social-auth-app-djangoを使うのが一般的です。

pip install social-auth-app-django

Djangoプロジェクトの作成

sample_projectという名前でプログラムを作成します。

django-admin startproject sample_project

ログイン機能用にuser_authアプリを作成します。

cd dample_project
python manage.py startapp user_auth

プロジェクトの設定

プロジェクトの設定を行います。
sample_project/sample_project/settings.py
social-auth-app-djangoに関わる設定もここで行います。


...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'user_auth',# 追記
    'social_django',# 追記
]
...
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'social_django.context_processors.backends',# 追記
                'social_django.context_processors.login_redirect',# 追記
            ],
        },
    },
]
...
# Twitter Auth Config(以下を追記)
AUTHENTICATION_BACKENDS = [
    'social_core.backends.twitter.TwitterOAuth',
    'django.contrib.auth.backends.ModelBackend',
]
SOCIAL_AUTH_TWITTER_KEY = '[Consumer Keyの値]'
SOCIAL_AUTH_TWITTER_SECRET = '[Consumer Secretの値]'
SOCIAL_AUTH_LOGIN_REDIRECT_URL = '/accounts/top/'# ログイン後のリダイレクト先

ルーティングの設定

urlのルーティング設定を行います。
sample_project/sample_project/urls.py

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('user_auth.urls')),
    path('accounts/', include('social_django.urls')),
]

sample_project/user_auth/urls.py

from django.urls import path
from django.contrib.auth.views import LoginView, LogoutView
from . import views
urlpatterns = [
    path('top/', views.top_page, name="top"),
    path('login/', LoginView.as_view(template_name='login.html')),
    path('logout/', LogoutView.as_view(template_name='logout.html')),
]

Viewに処理を追加

sample_project/user_auth/views.py

from django.shortcuts import render
from django.contrib.auth.decorators import login_required
from social_django.models import UserSocialAuth
@login_required
def top_page(request):
    user_auth = UserSocialAuth.objects.get(user_id=request.user.id)
    print('access_token:%s' % user_auth.access_token['oauth_token'])
    print('access_token_secret:%s' % user_auth.access_token['oauth_token_secret'])
    return render(request, 'top.html', {'user_name': user_auth.user.username})

テンプレートの作成

Twitterボタンの外観を作成するためにスタイルシートをcdnで取得しています。

  • bootstrap (定番のデザインフレームワーク)
  • font-awesome (定番のフォントフレームワーク)
  • bootstrap-social (SNSの外観を再現するCSS)

sample_project/user_auth/templates/login.html

<html>
  <head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.css" rel="stylesheet">
    <title>ログイン</title>
  </head>
  <body>
    <h1>ログインページ</h1>
    <a class="btn btn-block btn-social btn-twitter"
       href='{% url 'social:begin' 'twitter' %}'>
      <span class="fa fa-twitter"></span>Twitterでログイン
    </a>
  </body>
</html>

sample_project/user_auth/templates/logout.html

<html>
  <head>
    <title>ログアウト</title>
  </head>
  <body>
    <h1>ログアウトページ</h1>
    <div><a href="/accounts/login/">ログインページ</a></div>
  </body>
</html>

sample_project/user_auth/templates/top.html

<html>
  <head>
    <title>TOP</title>
  </head>
  <body>
    <h1>ようこそ{{ user_name }}さん</h1>
    <div><a href="/accounts/logout">ログアウト</a></div>
  </body>
</html>

マイグレーション

python manage.py migrate

動作確認

http://127.0.0.1:8000/accounts/login/
にアクセスしてログインボタンが表示されます。
ログインボタンを押してログインができるか確認してみましょう。

  • このエントリーをはてなブックマークに追加