Djangoでソーシャルログイン機能を実装する

## 目次
1. 共通の設定
2. Googleアカウントでの認証機能
3. Facebookアカウントでの認証機能

## 1. 共通の設定
ライブラリをインストールします。

```bash
$ pip install social-auth-app-django
```
settings.pyを編集します。

```python:settings.py
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = '[クライアントID]'  👈これを追加。
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = '[クライアント シークレット]' 👈これを追加。

INSTALLED_APPS = [
    ...省略...
    'social_django',  👈これを追加。
]

MIDDLEWARE_CLASSES = [
    ...省略...
    'social_django.middleware.SocialAuthExceptionMiddleware',  👈これを追加。
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            PROJECT_DIR.child('templates'),
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                ...省略...
                'social_django.context_processors.backends',  👈これを追加。
                'social_django.context_processors.login_redirect', 👈これを追加。
            ]
        },
    },
]
```
マイグレーションを実行します。

```bash
$ python manage.py migrate

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions, social_django
Running migrations:
  Applying social_django.0001_initial... OK
  Applying social_django.0002_add_related_name... OK
  Applying social_django.0003_alter_email_max_length... OK
  Applying social_django.0004_auto_20160423_0400... OK
  Applying social_django.0005_auto_20160727_2333... OK
  Applying social_django.0006_partial... OK
...
```
プロジェクト全体を管理する、urls.pyを編集します。

```python:urls.py
urlpatterns = [
    ...省略...
    path('oauth/', include('social_django.urls', namespace='social')),   👈これを追加
]
```

## 2. Googleアカウントでの認証機能
クライアントキーとクライアントシークレットを取得する為、[Goolge Developers Console](https://console.developers.google.com/apis/library?project=_)へアクセスし「プロジェクトを作成」を選択します。
<img width="1434" alt="スクリーンショット 2020-06-27 16.26.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/8e70f704-22c4-0825-6cb4-853e9f68717c.png">
「プロジェクト名」に適当な名称を入力し、「作成」を押下します。
<img width="1434" alt="スクリーンショット 2020-06-27 16.30.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/2954fb55-28da-397f-5d22-eb8dd902104d.png">
「認証情報」を選択します。
<img width="1434" alt="スクリーンショット 2020-06-27 16.37.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/57bee0be-c9cc-e7aa-711a-089637098ad6.png">
「同意画面を構成」を選択します。
<img width="1434" alt="スクリーンショット 2020-06-27 16.39.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/7914bd6f-72fb-2aef-0286-b2d0c6d63b9a.png">
UserTypeを「内部」又は「外部」を選択し、「作成」をクリックします。
テスト環境では「内部」、本番環境では「外部」がいいかと思います。（特に理由はないです笑）
<img width="1434" alt="スクリーンショット 2020-06-27 16.41.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/38373473-3c10-d486-e28e-7eff3ba1880b.png">
「アプリケーション名」に適当な値を入力し、「作成」をクリックします。
<img width="1434" alt="スクリーンショット 2020-06-27 16.46.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/23870b5c-57c7-4755-2ab4-b41cb09c642e.png">
<img width="1434" alt="スクリーンショット 2020-06-27 16.47.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/8ec5450b-f206-e5e6-aa8c-e271cdcc99d3.png">
「認証情報を作成」をクリックし、「OAuthクライアントID」を選択します。
<img width="1434" alt="スクリーンショット 2020-06-27 16.50.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/bcb411f0-10e6-1c77-c1f9-1c0bb722ce6d.png">
「アプリケーションの種類」から「ウェブアプリケーション」を選択します。
※使用用途によって適当なアプリケーションを選択します。
<img width="1434" alt="スクリーンショット 2020-06-27 16.54.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/09bafa18-cc9c-4fe0-18f5-7e3fa47c1a3a.png">
「名前」に適当な値を入力、承認済みのリダイレクトURIに以下のURLを追加し、「作成」をクリックします。
・http://127.0.0.1:8000/oauth/complete/google-oauth2/
・http://localhost:8000/oauth/complete/google-oauth2/
<img width="1434" alt="スクリーンショット 2020-06-27 16.59.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/90a7333d-4705-481d-9562-8809e1fc3113.png">
<img width="1434" alt="スクリーンショット 2020-06-27 17.03.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/83af04a1-b590-ba95-d6e6-2c1e9c3e604a.png">
「クライアントID」と「クライアントシークレット」を、settings.pyに設定します。
<img width="1434" alt="スクリーンショット 2020-06-27 17.07.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620216/8f5f2dd6-d70c-9b3b-c0b8-1ca9fb80b56f.png">

```python:settings.py
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = ''  👈ここにクライアントIDを追加。
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = '' 👈ここにクライアントシークレットを追加。
...省略...
AUTHENTICATION_BACKENDS = (
    'social_core.backends.open_id.OpenIdAuth',  👈これを追加。
    'social_core.backends.google.GoogleOpenId',　　👈これを追加。
    'social_core.backends.google.GoogleOAuth2',　　👈これを追加。
    'django.contrib.auth.backends.ModelBackend',　　👈これを追加。
)
```
htmlでの、ログインリンクは以下のように作成することができます。

```html:login.html
...省略...
<a href="{% url 'social:begin' 'google-oauth2' %}">Googleでログイン</a>
...省略...
```

## 3. Facebookアカウントでの認証機能
現在、作成中。（実装中の為、後に追加します）