ReactとDjangoでGoogle OAuthログイン【中編】Django Rest Frameworkバックエンドを作成する

本記事は、Ashutosh Panda氏による「Google Login with Django & React --- Part 2」（2021年4月23日公開）の和訳を、著者の許可を得て掲載しているものです。

■シリーズ内容
【前編】Google Developer ConsoleからクライアントIDとクライアントシークレットを取得する
【中編】Django Rest Frameworkバックエンドを作成する
【後編】Reactアプリを作成する

Django Rest Frameworkバックエンドを作成する

ReactとDjango Rest FrameworkでGoogle Oauth 2.0を使う方法を確認してみよう。

ソースコード：https://github.com/aashutoshPanda/google-oauth-django-react

プロジェクト用の新しいフォルダを作成し、選択したIDEを開きます。

ステップ1：Django Rest Frameworkバックエンドを立ち上げ、実行する

バックエンド用の仮想環境を「env」という名前で作成します。

python3 -m venv env

起動します。

source env/bin/activate

要件ファイルを作成します。

touch requirements.txt

requirements.txtに以下を追加します。

Django==3.1.2
djangorestframework==3.12.1
drf_social_oauth2==1.0.9
python-decouple==3.4
django-cors-headers==3.7.0

要件をインストールします。

pip install -r requirements.txt
django-admin startproject mysite .

注：最後の「.」で、カレントディレクトリに Djangoアプリケーションを作成します。

ステップ2：必要なファイルを変更する

mysite > settings.pyファイルを開きます。

以下のサードパーティ製アプリを追加します。

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   # Third-Party Apps
   'rest_framework',
   'oauth2_provider',
   'social_django',
   'drf_social_oauth2',
   'corsheaders',
]

snippet.py

（ReactアプリでCORSを管理するため）ミドルウェアに以下を追加します。

MIDDLEWARE = [
   'django.middleware.security.SecurityMiddleware',
   'django.contrib.sessions.middleware.SessionMiddleware',
   'django.middleware.common.CommonMiddleware',
   'django.middleware.csrf.CsrfViewMiddleware',
   'django.contrib.auth.middleware.AuthenticationMiddleware',
   'django.contrib.messages.middleware.MessageMiddleware',
   'django.middleware.clickjacking.XFrameOptionsMiddleware',
   'corsheaders.middleware.CorsMiddleware',#add
   'django.middleware.common.CommonMiddleware',#add
]

snippet.py

Reactアプリがポート3000からリクエストを行えるように、以下を追加します。

CORS_ALLOWED_ORIGINS = [
   "http://localhost:3000",
]

snippet.py

テンプレートに以下を追加します。

TEMPLATES = [
   {
      'BACKEND': 'django.template.backends.django.DjangoTemplates',
      'DIRS': [],
      'APP_DIRS': True,
      'OPTIONS': {
         'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.contrib.messages.context_processors.messages',
            'social_django.context_processors.backends', #add
            'social_django.context_processors.login_redirect', #add
         ],
      },
   },
]

snippet.py

以下の2つのrest framework設定も追加します。

REST_FRAMEWORK = {
   'DEFAULT_AUTHENTICATION_CLASSES': (
      'oauth2_provider.contrib.rest_framework.OAuth2Authentication',
      'drf_social_oauth2.authentication.SocialAuthentication',
   ),
}
AUTHENTICATION_BACKENDS = (
   'drf_social_oauth2.backends.DjangoOAuth2',
   'django.contrib.auth.backends.ModelBackend',
)

snippet.py

Google OAuth認証を使用するには、以下を追加します。

AUTHENTICATION_BACKENDS = (
   # Google OAuth2
   'social_core.backends.google.GoogleOAuth2',
   # drf-social-oauth2
   'drf_social_oauth2.backends.DjangoOAuth2',
   # Django
   'django.contrib.auth.backends.ModelBackend',
)

# Google configuration
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = config("SOCIAL_AUTH_GOOGLE_OAUTH2_KEY")
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = config("SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET")

# Define SOCIAL_AUTH_GOOGLE_OAUTH2_SCOPE to get extra permissions from Google.
SOCIAL_AUTH_GOOGLE_OAUTH2_SCOPE = [
   'https://www.googleapis.com/auth/userinfo.email',
   'https://www.googleapis.com/auth/userinfo.profile',
]

snippet.py

注：クライアントシークレットとクライアントIDを公開するのは良くないので、.envファイル内に入れておきます。

env変数の取得にはdecoupleを使用しているので、settings.pyファイルの先頭にimport文を追加します。

from decouple import config

ステップ3：環境変数を作成する

manage.pyファイルが存在するディレクトリに.envファイルを作成し、以下を追加します。

注：「=」記号の前後にスペースがないことを確認してください。

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY="458276157074-n3mk96a65qov0f538dg4ci4djjdf1s11.apps.googleusercontent.com"
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET="tSRiinTrp4LMeTE0Wtbc17c_"

.env

注：クライアントIDとクライアントシークレットは、このチュートリアルで使っているキーではなく、自分のものを使用してください。

ステップ4：認証用ルートを作成する。

In the mysite > urls.py

mysite > urls.pyに。

from django.contrib import admin
from django.urls import path,include
urlpatterns = [
   path('admin/', admin.site.urls),
   path('auth/',include('drf_social_oauth2.urls',namespace='drf')) #add this
]

snippet.py

ステップ5：DBの変更を移行し、スーパーユーザーを作成する

python manage.py migrate
python manage.py createsuperuser

ユーザー名、メールアドレス、パスワードを入力して、スーパーユーザー（admin）を作成します。

ステップ6：Django AdminでOAuthアプリケーションを作成する

python manage.py runserver

http://127.0.0.1:8000/admin/で、スーパーユーザー（admin）の認証情報を入力します。

Django管理パネル

クライアントIDとクライアントシークレットを以下のステップで作成します。

• Django OAuth Toolkitセクションの「アプリケーション」をクリックします。
• 「アプリケーションの追加」をクリックします。
• クライアントIDとクライアントシークレットをどこかにコピーします（Reactアプリで使用します）。
• 検索アイコンをクリックして作成したスーパーユーザーを選択し、ユーザーを設定します。
• クライアントタイプをconfidentialにします。
• グラントタイプをリソースオーナーのパスワードベースにします。
• 名前は自由に設定して構いません。例：Google Oauth
• 保存します。

ステップ7：テストする！

http://127.0.0.1:8000/auth/convert-tokenで、機能していることが分かります。

このチュートリアルで使用されているパッケージは以下の通りです。

• https://github.com/wagnerdelima/drf-social-oauth2
• https://pypi.org/project/django-cors-headers/
• https://pypi.org/project/python-decouple/

これで「中編」は終わりです。
この記事が少しでもお役に立てれば嬉しいです✌️

翻訳協力

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: Ashutosh Panda
Original Article: Google Login with Django & React --- Part2
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

ご意見・ご感想をお待ちしております

今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。
皆様のメッセージをお待ちしております。