More than 3 years have passed since last update.

baby-degu

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

Last updated at 2021-05-25Posted at 2021-05-24

本記事は、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で、機能していることが分かります。

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

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

##翻訳協力

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

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

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up