django-allauthでLINEログインをする

**django-allauthの情報が少ない！**

特にLINEの情報は引くほど少ないです。
公式ドキュメントを見ても、[LINE Developers](https://developers.line.biz/ja/)へのリンクが張ってあるくらいでした。英語を頑張って読むことすら許されていません。
当然ながらハマったので、気をつけることをメモしておきます。

# モジュール周りのインストール
まずはモジュールをインストールしましょう。`django`と`django-allauth`をインストールします。

```bash
pip install django
pip install django-allauth
```

# djangoプロジェクトの作成

作成するプロジェクトの名前は`line`、ログインをするアプリケーションの名前は`login`にします。

```bash
django-admin startproject line
django-admin startapp login
```

アプリを作成したらとりあえずdjangoのスタートページにアクセスしてみましょう。

```bash
python manage.py runserver
```

これであとは、http://127.0.0.1:8000/ にアクセスすればこちらのページが表示されるはずです。
![2019-07-24-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376819/34553ead-d8ae-bfc9-70c9-8b4e50a3d804.png)


# プロジェクトの設定とか
ではここから、lineログインを実装していきます。

## settings.pyの設定
`settings.py`を開き、設定をします。
設定するのは以下の点です。

- 作成した`login`アプリケーションの登録
- django-allauth周りの設定
- login後、logout後のリダイレクトの設定
- 日本語化(いらないと思うけどねんのため)

```python:setting.py

(省略)

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites',                         #追加
    'login',                                        #追加
    'allauth',                                      #追加
    'allauth.account',                              #追加
    'allauth.socialaccount',                        #追加
    'allauth.socialaccount.providers.line',         #追加

]

(省略)

# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/

LANGUAGE_CODE = 'ja-JP'         #変更

TIME_ZONE = 'Asia/Tokyo'        #変更

USE_I18N = True

USE_L10N = True

USE_TZ = True

(省略　ここから下は全部追加)
######################################
# Authentication                     #
######################################

# Don't forget this little dude.
SITE_ID = 1

# ログインのリダイレクトURL
LOGIN_REDIRECT_URL = '/'

# ログアウトのリダイレクトURL
ACCOUNT_LOGOUT_REDIRECT_URL = '/'

AUTHENTICATION_BACKENDS = (
    'django.contrib.auth.backends.ModelBackend',
    "allauth.account.auth_backends.AuthenticationBackend",
)

SOCIALACCOUNT_PROVIDERS = {
    'line': {
        'SCOPE': ['profile','openid'],
    }
}

```

ここがハマったところなんですが、Lineログインをするには`scope`の設定が重要らしく、最後の`SOCIALACCOUNT_PROVIDERS`の設定がないとちゃんと動かなかったです。

## urlの追加
`line`プロジェクトにアクセスするurlを登録します。
`login`アプリと`allauth`のurls.pyをincludeします。
これで２つのアプリケーションのurlにアクセスすることができるようになります。

```python:line/urls.py
from django.contrib import admin
from django.urls import include,path            # includeを追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('auth/', include('allauth.urls')),     # 追加
    path('', include('login.urls')),             # 追加
]
```

## アクセス用のページの作成
`django-allauth`はlogin用のviewもtemplateも用意してくれるので、僕らはそれにアクセスればいいんですが、ログインしたことがわかるリダイレクトページとか作りたいのでそれを作ります。
### login/urls.pyの作成
urls.pyは`startapp`コマンドでは作られないので、ファイルを作成する必要があります。

```python:login/urls.py
from django.urls import path
from . import views

# set the application namespace
# https://docs.djangoproject.com/en/2.0/intro/tutorial03/
app_name = 'login'
 
urlpatterns = [
    # ex: /
    path('', views.top, name='top'),
 ]
```

### login/views.pyの変更
views.pyはすでにあるのでそのまま使います。

```python:login/views.py
from django.shortcuts import render

# Create your views here.

def top(request):
    """トップ画面"""
    return render(request,
                  'top.html')
```

### 表示するtemplatesを作成する
loginフォルダの下にtemplatesフォルダを作成して、その中にtop.htmlを作ります。
中身は簡単で構いません。

```html:top.html
<a href="{% url 'line_login' %}">lineでログイン</a>

{% if user.is_authenticated %}
<p>ログイン済</p>

<a href="{% url 'account_logout' %}">ログアウト</a>
{% endif %}
```

一応解説すると、はじめトップページはlineログイン用のリンクだけがあります。
ログインするとトップページにリダイレクトするようになっていて、トップページはユーザー認証済だと「ログイン済」と表示されて、ログアウト用のリンクが表示されるようになっています。

## DBを作成して、スーパーユーザーを作成する
マイグレーションをして、管理サイトにログインするスーパーユーザーを作成します。

```
python manage.py makemigrations
python manage.py migrate
python manage.py create
python manage.py createsuperuser
ユーザー名 (leave blank to use '*****'):
メールアドレス:
Password:
Password (again):
```

# LINE ログインを作る

次はLINEログインを作りましょう。
まずは次のページにアクセスして、LINEアカウントでログインしてください。

https://developers.line.biz/ja/

## プロバイダーの作成
ログインを進めていくと次の画面に来るので、「新規プロバイダー作成」を押してください。

![2019-10-05_４.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376819/5bf365e7-e12e-2775-08cd-0d8c3630887a.png)

プロバイダー名を入力して「確認する」を押します。
再確認がされるので、それもOKします。
![2019-10-05_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376819/4d4502ec-7366-6a11-3034-6b55178bcedc.png)

## 新規チャネルの作成
無事プロバイダーが作成されたら、新規チャネルを作成します。
今回やりたいのはLINEでのログインなので、**LINEログイン**を選択します。
![2019-10-05_2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376819/cc885ee0-8b95-0672-35f7-09f0d91b2100.png)

「任意」となっている箇所以外を埋めたら作成できます。
今回使うのはこちらの`Channel ID`と`Channel Secret`です。あとから使いますので覚えておいてください。
![2019-10-05_lsegjpoi4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376819/687ab722-f39d-a4a7-f5cf-88de30d0d172.png)

## Webログインのリダイレクト先の設定
次はWebログインのリダイレクト先を設定します。
作成したWebアプリからLINEログインをすると、LINEに処理が移るのですが、ログインを終了したあとにWebアプリ側に処理を戻すときのアクセス先の設定です。
今回は`localhost`にサーバーを建てるので、`http://127.0.0.1:8000/auth/twitter/login/callback/`に設定します。
![2019-10-05_５.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376819/6d07eabf-6e4f-3894-ca73-7ed85cf18415.png)

ここまで終われば、ひとまずLINEDeveloperでの設定は終わりです。

# LINEログインをDjangoの管理サイトに登録する。
さあ、最後の一息です。
[Djangoの管理サイト](http://127.0.0.1:8000/admin/)にアクセスして、外部アカウントの`Social applications`へアクセスします。

![2019-10-05_6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376819/fa8b7cec-07be-74bb-4202-0e55cf0227b5.png)

アクセスしたら右上にある楕円形の**SOCIAL APPLICATIONを追加**を選択して、新しいアプリケーションの選択画面を表示します。

![2019-10-05_7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376819/907f7318-2289-6513-3897-72a9d4ebf991.png)
プロバイダーのプルダウンから`Line`を選択します。
`Client id`にLINE Developersの`Channel ID`を、`Secret key`にLINE Developersの`Channel Secret`を設定します。

そして`Sites`の欄でexample.comを選択し、矢印を押して選択されたsitesに移動しましょう。(ちょうど画像のようにするイメージです)

# いざアクセス！
さあ準備は整いました！
まずは`runserver`コマンドで、localhostにサーバーを立てましょう。

```
python manage.py runserver
```

そしたらトップページにアクセスします。
![2019-10-05_8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376819/7ea3dcfd-9c52-2ba4-426e-e47156d150cf.png)

**lineでログイン**をクリックすると、LINEログインのページに飛ばされます。
![2019-10-05_9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376819/61fb8ef0-cad8-0090-b2f7-3c96dca56388.png)

ログインを押すと、もとのWebアプリにコールバックされて、`LOGIN_REDIRECT_URL`に設定したパス(ここではトップページにリダイレクトしています)に飛ばされます。

![2019-10-05_10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376819/6ebd653a-cef2-b1d2-09b2-e32b3bba60fc.png)

トップページが表示され、**ログイン済**の表示と、ログアウト用のリンクが表示されていると思います。

# おわり
ひとまずこれでdjango-allauthでLINEログインを実装することができました。
ぜひ自分で使っているWEBアプリに組み込んでみてください。