【Django】Googleアカウントログインを実装 - 簡単4ステップで実現！

# はじめに

近年、ソーシャルログインの需要が増えており、多くのWebサービスで採用されています。Djangoでも、ソーシャルログインを実現するための豊富なライブラリが提供されています。本記事では、DjangoでGoogleアカウントによるログインを実装する手順を紹介します！

## そもそもソーシャルログインとは？

ソーシャルログインとは、FacebookやTwitterなどのユーザーが普段利用しているSNSのアカウントを利用して、Webサイトにログインすることができる機能です。


## GitHub

この記事で紹介しているソースコードはGitHubで公開しています！

https://github.com/ryo-keima/django-social-auth-demo

## 参考記事

この記事は、以下の記事を参考にさせていただきました。

https://www.codesnail.com/google-authentication-in-django/

# 手順

## 環境

MacOS 13.2.1
Python 3.10.3
Django 4.1.7


## 開発環境構築

Google認証にフォーカスした記事となりますので、Djangoプロジェクトのセットアップ等の説明は省きますが、GitHubのソースコードや私が記述した以下の記事を参考にアプリケーションを作成してみてください。

https://qiita.com/ryo-keima/items/e6ce42bb4c11432ea829

## Googleソーシャルログインを実装

### 1. パッケージのインストール

Djangoには様々なソーシャルログイン用のライブラリがリリースされていますが、今回は`django-allauth`を使用します。
django-allauthは、Djangoで簡単にソーシャルログイン（Google、Facebook、Twitterなど）やメールアドレス・パスワード認証を実装できるパッケージです。

```
pip install django-allauth
```

### 2. django-allauthをセットアップ

settings.pyのINSTALLED_APPSにdjango-allauthの設定を追加します。

```python:project/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'django.contrib.sites', # 追加
    'allauth', # 追加
    'allauth.account', # 追加
    'allauth.socialaccount', # 追加
    'allauth.socialaccount.providers.google', # 追加

    'accounts'
]
```

また、settings.pyの下部に以下の設定を追加します。

```python:project/settings.py
SITE_ID = 1

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
]
```

設定項目について補足します。

- SITE_ID
`SITE_ID`は、django-allauthアプリケーションに関連するDjangoプロジェクト内のサイトを識別するために使用されます。
SITE_IDは後ほどDjango管理画面で作成するサイトオブジェクトのIDを設定します。

- AUTHENTICATION_BACKENDS
認証方法を複数登録できます。デフォルトでは、djangoのModelBackendですが、今回のように`allauth.account.auth_backends.AuthenticationBackend`を追加すると、メールとパスワードを使用した認証も行うことができます。


urls.pyにallauth用のurlを追加します。

```python:project/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('social-auth/', include('allauth.urls')),
    path('', include("accounts.urls"))
]

```

### 3. GoogleAPIの設定

Googleのソーシャルログインを実装するためには、GoogleAPIの設定を行い、Cliend IDと、Client Secretを取得する必要がありますので、一緒にやっていきましょう！

初めに[Google Cloud](https://console.cloud.google.com/)にアクセスし、新しいプロジェクトを作成します。

今回は、`django-social-auth-demo`というプロジェクトにします。
![Screenshot 2023-04-02 at 12.48.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/01ead138-d5cf-9cdf-29cf-a95353c90ac7.png)

プロジェクトが作成されましたら、サイドバーから
APIとサービス > OAuth同意画面
を選択します。

![Screenshot 2023-04-02 at 12.51.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/a1eb162f-42f2-09ba-67b4-1a53279051c3.png)

User Typeは外部を選択し、「作成」を押下します。

![Screenshot 2023-04-02 at 12.59.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/6df1a999-446b-69e3-5cf3-c3c2de76f75d.png)

続いて、アプリ情報を入力していきます。

アプリ名と、ユーザーサポートメール、デベロッパーの連絡先情報を設定し、「保存して次へ」を押下します。

![Screenshot 2023-04-02 at 13.03.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/04de7af3-77af-014a-ee6b-9aa228aa82de.png)

![Screenshot 2023-04-02 at 13.03.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/edab8417-6724-e7ca-ba52-34222c1a118d.png)

スコープは設定せず「保存して次へ」を押下します。

![Screenshot 2023-04-02 at 13.04.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/f4bf12b8-b639-4fa6-b228-5e35c21a71d2.png)

何もせず「保存して次へ」を押下します。

![Screenshot 2023-04-02 at 13.05.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/a80987ef-0c31-e3a0-c42e-93a2f0fc0fd6.png)

確認画面です。
確認ができましたら、「ダッシュボードに戻る」を押下します。

![Screenshot 2023-04-02 at 13.05.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/b16ecaf9-8632-3c8f-e814-b19f91d30f6d.png)
ダッシュボードに戻るを押下します。

続いて、OAuthのクライアントIDを作成していきます。
サイドバーから「認証情報」を押下してください。

![Screenshot 2023-04-02 at 13.16.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/1492e845-c9d3-1c71-9665-1f1ed02d5d4f.png)

認証情報を作成 > OAuthクライアントIDを押下します。

![Screenshot 2023-04-02 at 13.21.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/95424f84-8abe-b817-8b33-9cf724abe506.png)

アプリケーションの種類: ウェブアプリケーション
承認済みのJavaScript生成元: http://127.0.0.1:8000
承認済みのリダイレクトURI: http://127.0.0.1:8000/social-auth/google/login/callback/

をそれぞれ設定し、「作成」を押下します。

![Screenshot 2023-04-02 at 13.24.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/0252f6ef-e2f1-2a82-9512-438cfcb92c46.png)

Client IDとClient Secretが生成されましたのでコピーしておきましょう。
ついでにJSONファイルもダウンロードしておきましょう🙆‍♂️

![Screenshot 2023-04-02 at 13.27.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/cfcb48ef-7dce-c367-eab3-8b5d759bf272.png)

### 4. ソーシャルアプリをDjangoに設定

Django管理画面を操作し、ソーシャルアプリの設定を行います。
始めにdjango-allauthに関連するテーブル作成のためマイグレートします。

```
python manage.py migrate
```

Django管理画面にログインするため、スーパーユーザーを作成します。

```
python manage.py createsuperuser
```

開発用サーバーを実行します。
```
python manage.py runserver
```

管理画面にログインし、example.comの設定を変更します。
ドメイン名を127.0.0.1:8000にし、保存します。
![Screenshot 2023-04-02 at 14.30.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/4a30c378-3c50-a047-0458-ec18734da0b0.png)


続いて、サイドバーから「ソーシャルアプリケーション」を押下し、設定をしていきます。

![Screenshot 2023-04-02 at 14.34.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/907aef2f-86a8-cdf6-bdb7-cb6ae967f08a.png)

プロバイダー: Google
名前: google auth(任意の名称)
ユーザーID: GoogleAPIのClient ID
シークレット: GoogleAPIのClient Secret
Sites: 127.0.0.1:8000を「選択された sites」にセットします

上記内容を変更したら、「保存」ボタンを押下し登録します。

最後にGoogleログイン画面に移動するためのボタンをテンプレートに作成します。

```html:templates/accounts/login.html
{% extends 'base.html' %}
{% load socialaccount %}

{% block title %}
<div class="h1">Login</div>
{% endblock %}
{% block content %}
<form method="post">
    {% csrf_token %}
    {{ form.non_field_errors }}
    {% for field in form %}
    {{ field.label }}
    {{ field }}
    {{ field.errors }}
    <br>
    {% endfor %}
    <div class="mt-3">
        <button type="submit" class="btn btn-primary">Login</button>
        <!-- 以下のボタンを追加 -->
        <a href="{% provider_login_url 'google'%}?next=/" class="btn btn-primary">Login with Google</a>
        <a href="{% url 'accounts:index' %}" class="btn btn-secondary">Back</a>
    </div>

</form>
{% endblock %}
```

## 実践

では、Googleログインが機能するか確認してみます！

[http://127.0.0.1:8000/login](http://127.0.0.1:8000/login)にアクセスします。

![Screenshot 2023-04-02 at 15.04.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/1609e529-7b5b-53ec-e1d2-8f6b3126821a.png)

「Login with Google」を選択します。

![Screenshot 2023-04-02 at 15.10.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/f31f0ef7-c86a-7b5b-7607-c3ee524a12a6.png)

「続ける」を押下します。

![Screenshot 2023-04-02 at 15.20.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/32b31a98-55db-1843-46a8-dbf18e159db0.png)

メールアドレス、パスワードを入力します。


![Screenshot 2023-04-02 at 15.21.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/446d8b6d-4ec0-70bf-32ad-4813b033195b.png)


ログインができました🎉
![Screenshot 2023-04-02 at 15.23.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951524/50927a2d-6407-dbf9-ff51-9a3c2fa0a44c.png)


# まとめ

今回、Djangoでのソーシャルログインを実現するためには、django-allauthライブラリを使用して実装しました。
ソーシャルログインはユーザーにとって利便性が高く、Webサービスの成長にもつながります。Djangoでの実装は簡単であり、多くのWebサービスにとって必要な機能であるため、積極的に導入していきましょう！🙋‍♂️

# 紹介記事

https://qiita.com/ryo-keima/items/e6ce42bb4c11432ea829

https://qiita.com/ryo-keima/items/2bb55c05a79929ec9e71

https://qiita.com/ryo-keima/items/f66a8f3acc8006389661