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

Django で Google OAuth2 ソーシャルログインを実装します。Google アカウントでログインする、よく見るやつですね。

実装する方法は、いろいろありますが、今回は、様々なソーシャルログインをサポートしている、social-app-django という Python パッケージを使って実装したいと思います。

完成イメージ

環境とバージョン

Python 3.6.4
Django 2.0.3
Python Social Auth – Django 2.1.0

インストール

Python

$ sudo yum install -y https://centos7.iuscommunity.org/ius-release.rpm $ sudo yum install -y python36u python36u-libs python36u-devel python36u-pip

Python は IUS リポジトリの Python 3.6 をインストールします。CentOS 7 で Python3 を使う別の方法としては SCL もありますが、コマンドやパスが複雑になるので、私は、IUS リポジトリの Python を使います。

あと、SCL は、PyCharm のリモートデバッグ機能が使えなかったんです。（私がうまく設定できないだけかも）

Django

$ sudo pip install django

Django をインストールします。

Python Social Auth – Django

$ sudo pip install social-auth-app-django

今回の主役、Python Social Auth – Django をインストールします。

実装

プロジェクトとアプリケーションの作成

$ django-admin startproject social_auth
$ cd social_auth
$ python3.6 manage.py startapp login
$ python3.6 manage.py startapp account

Django プロジェクト雛形をおきまりのコマンドで生成します。

settings.py

...
ALLOWD_HOSTS = ['*']
INSTALLED_APPS = [
    ...
    'login.apps.LoginConfig',
    'account.apps.AccountConfig',
    'social_django',
]
...
TEMPLATES = [
    {
        ...
        'OPTIONS': {
            'context_processors': [
                ...
                'social_django.context_processors.backends',
                'social_django.context_processors.login_redirect',
            ],
        }
    }
]
...
LOGIN_REDIRECT_URL = '/account/'
AUTHENTICATION_BACKENDS = [
    'social_core.backends.open_id.OpenIdAuth',
    'social_core.backends.google.GoogleOpenId',
    'social_core.backends.google.GoogleOAuth2',
    'social_core.backends.google.GoogleOAuth',
    'social_core.backends.twitter.TwitterOAuth',
    'social_core.backends.yahoo.YahooOpenId',
    'django.contrib.auth.backends.ModelBackend',
]
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = 'Your Client ID'
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = 'Your Secret'

settings.py です。

外部のどこからアクセスできるよう、ALLOWED_HOSTS に ‘*’ を設定します。

INSTALLED_APPS は、ログインページ用と、Google から戻ってくる用ページの二つのアプリケーションと、social_django を追加します。

AUTHENTICATION_BACKENDS は、リファレンスのまま実装しています。Google OAuth2 だけで動作するかは未確認です。

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY と SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET は、後述する Google Could Platform で取得する値を実装します。

urls.py

from django.urls import path, include
from django.views.generic import TemplateView
urlpatterns = [
    path('login/', TemplateView.as_view(template_name='login/login.html')),
    path('account/', TemplateView.as_view(template_name='account/account.html')),
    path('social/', include('social_django.urls', namespace='social'))
]

urls.py は settings.py の INSTALLED_APPS と同様に、ログインページ用と、Google から戻ってくる用ページと social_django を実装します。

login.html（ログインページ）

<html>
  <head>
    <title>Django Google Auth</title>
  </head>
  <body>
    <h1>Django Google Auth</h1>
    <a href="{% url 'social:begin' 'google-oauth2' %}">Login with Google</a>
  </body>
</html>

ログインページ HTML です。シンプルに Google ログインへのリンクだけを実装しています。

account.html（Google ログインから戻ってくる用）

<html>
  <head>
    <title>Django Google Auth</title>
  </head>
  <body>
    <h1>Django Google Auth</h1>
    <table>
      <thead>
        <tr>
          <th>Username</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>E-mail</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ request.user.username }}</td>
          <td>{{ request.user.first_name }}</td>
          <td>{{ request.user.last_name }}</td>
          <td>{{ request.user.email }}</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Google ログインから戻ってくる用のページです。ログインに成功すれば、Google アカウントからユーザー名やメールアドレスを表示するようにしています。

tree コマンドでファイル構成を確認

$ tree
.
├── account
│   ├── __init__.py
│   ├── apps.py
│   └── templates
│       └── account
│           └── account.html
├── login
│   ├── __init__.py
│   ├── apps.py
│   └── templates
│       └── login
│           └── login.html
├── manage.py
└── sorial_auth
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

7 directories, 11 files

不要なファイルを削除し、最終的なファイル構成はこのようになりました。

Google Could Platform の設定

API とサービス

認証情報

OAuth 2.0 クライアント ID をウェブアプリケーションで作成し、承認済みリダイレクト URI に以下をセットします。

http://localhost:8000/social/complete/google-oauth2/

OAuth 同意画面

Google OAuth 同意画面を用意します。今回はテストなので、設定したのは、サービス名だけです。

Google+ API

Google+ API を有効にします。

VirtualBox の設定

ポートフォワーディング

名前: http
プロトコル: TCP
ホスト IP: 127.0.0.1
ホストポート: 8000
ゲスト IP: 何も入力しない
ゲストポート: 8000

いつもはこの設定をしないのですが、今回、Google Cloud Platform のリダイレクト設定で、IP アドレスを設定することができませんでしたので、VirtualBox のポートフォワーディングを設定し、ホスト（Mac）へのアクセスをゲストVM （CentOS）に転送しています。

動作確認

DB migrate

$ python3.6 manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions, social_django
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying sessions.0001_initial... OK
  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
  Applying social_django.0007_code_timestamp... OK
  Applying social_django.0008_partial_timestamp... OK

動作確認するために、DB の設定をします。今回はテストなので、デフォルトの SQLite を使用しています。