DjangoでラクラクTwitterログイン認証機能作ってみた

## 背景
自分の作成中のwebアプリにTwitter連携したログイン機能が欲しかったので導入してみました。

## 環境
- Python==3.7
- Django==2.2.5 
- django-allauth==0.41.0


## 最初に悩んだこと
pythonでDjangoにTwitter認証機能を導入するには主に2パターンです。

```
django-allauth
social-auth-app-django
```
のどちらかを導入することでお手軽できます。

しかしそれぞれの良い点悪い点もありまして、


|  | django-allauth | social-auth-app-django |
|---|---|---|
|TwitterのAPI Keyの場所  |データベース  |settingファイル読込  |
|ログイン用テンプレート  | ある | ない |


こんな感じになっています。

特にAPI Key
DB管理だと非常にお手軽なものの、DBを作り直したとき再度登録する手間がありますからね。


ただ今回はとにかく早く実装を試してみたかったのもあり、テンプレートがある**django-allauth**を選択しました。


## やり方
### 事前準備 APIKey入手
まずは事前に[Twitter] (https://developer.twitter.com/)にてAPIKeyを取得します。

基本情報登録(認証に何日かかかるのはガマン)
→アプリ登録
という流れの通りにすすめていくのですが、注意点として**CallbackUrl**を正しく設定する必要があります。

#### CallbackUrlとは
簡単に言うと
「ログインしたあとの遷移先」
です

<img width="590" alt="スクリーンショット 2020-03-01 15.58.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367399/d3239dc6-09a5-c224-01f7-b2e90ff7f01a.png">


これがないとTwitterのAPIはリダイレクト先を失ってエラーを出してしまいます。
ここでは

```CallbackUrl
http://127.0.0.1:8000/accounts/twitter/login/callback/
```

と入力してあげると問題ないでしょう。

ここで、手に入れたAPIKey、APISecretを用いて今後の作業を進めて行きます。

### 実装
まずは

```
pip install django-allauth
```

でモジュール追加。
その後settings.pyに情報を追加していきます

```settings.py
INSTALLED_APPS = [
# 既存のものはそのまま
'django.contrib.sites',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.twitter',
]

SITE_ID = 1
LOGIN_REDIRECT_URL = 'home'
ACCOUNT_LOGOUT_REDIRECT_URL = '/accounts/login/'
```

特に今回はコイツが大事

```
'allauth.socialaccount.providers.twitter',
```

これでTwitterが認証に使えるようになります。今回は解説しませんが、他にも

```
'allauth.socialaccount.providers.github',
```

と追加するとgithubログイン認証で使えるようになります。お手軽ぅ❗



### admin情報追加

```
python manage.py migrate #DBマイグレート
python manage.py createsuperuser #admin用ユーザ作成
```

でDBの準備をした後は自分の環境で
http://127.0.0.1:8000/admin/
へログイン


すると
<img width="639" alt="スクリーンショット 2020-03-01 16.41.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367399/c90dc49a-da8d-2cfa-73e3-da251d81264a.png">

外部アカウントが出来ていますね。


Social applicationsからTwitterの情報を登録出来ます。

<img width="884" alt="スクリーンショット 2020-03-01 15.50.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367399/b62da964-9ba4-eaa4-07bb-9fd86c0ff7db.png">

Client idとSecret keyはTwitterデベロッパーで手に入れたものをコピペしましょう。

## ログインしてみよう

http://127.0.0.1:8000
にアクセス。

<img width="738" alt="スクリーンショット 2020-03-01 16.47.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367399/0230dffb-1e50-b40f-8bec-3cbd9ad9ad8d.png">

Sign in

<img width="789" alt="スクリーンショット 2020-03-01 16.48.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367399/7b4bacdd-cd48-06f1-b1d6-fb67334f291a.png">



このようにログイン画面が表示されるようになりました。
ここでTwitterを押すと



<img width="652" alt="スクリーンショット 2020-03-01 15.49.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367399/8d0abc66-27d8-a241-ebb0-6dd2ef64e1d2.png">



よく見る認証画面が出てきて



<img width="762" alt="スクリーンショット 2020-03-01 16.50.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367399/d2645b58-1bb2-2f2a-6127-effb0bd5c10e.png">

ログイン成功❗

さらにadminを確認すると

<img width="859" alt="スクリーンショット 2020-03-01 16.52.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367399/85299c4d-44f7-4ac5-91c7-1f99b61d8833.png">

※Token等は隠してます

Twitterのトークン情報を入手出来ているのが確認できました😆

## まとめ
このように案外シンプルに実装出来ます！
アプリなどにTwitter認証があるだけでユーザの登録の敷居が低くなりやすいので、興味が出た方はぜひお試しを！