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

本記事は、[Ashutosh Panda](https://iamashutoshpanda.medium.com/)氏による「[Google Login with Django & React --- Part 2](https://iamashutoshpanda.medium.com/google-login-with-django-react-part-2-2dc41b499861)」（2021年4月23日公開）の和訳を、著者の許可を得て掲載しているものです。

■シリーズ内容
【前編】[Google Developer ConsoleからクライアントIDとクライアントシークレットを取得する](https://qiita.com/baby-degu/items/1f011e97b98f9b0fcf01)
【中編】Django Rest Frameworkバックエンドを作成する
【後編】[Reactアプリを作成する](https://qiita.com/baby-degu/items/6332e21453a9e835fee9)

#Django Rest Frameworkバックエンドを作成する
>ReactとDjango Rest FrameworkでGoogle Oauth 2.0を使う方法を確認してみよう。

![](https://miro.medium.com/max/1572/1*iNM_jKqNLxsr4JG2_vBlvA.png)
ソースコード：<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](https://gist.github.com/aashutoshPanda/81ce029ee1b29590cf124be38a0e8d85#file-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](https://gist.github.com/aashutoshPanda/7d5c649675fe3250e865f7c55d83ca49#file-snippet-py)

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

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

[snippet.py](https://gist.github.com/aashutoshPanda/f592ca4f4ac802f8885cafc98545f0ba#file-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](https://gist.github.com/aashutoshPanda/21b0bc2c77ffdf50ff303d0ee19d4923#file-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](https://gist.github.com/aashutoshPanda/3aa4b36ebcf5fa20a928493c8b6c6dcf#file-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](https://gist.github.com/aashutoshPanda/85ebad4ce048b583950846cdf888d212#file-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](https://gist.github.com/aashutoshPanda/6bf1377976d82bf1cb2a74c5b2f6bef2#file-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](https://gist.github.com/aashutoshPanda/2771c2cb3af2cee6171d591ec970c099#file-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/**](http://127.0.0.1:8000/admin/)で、スーパーユーザー（admin）の認証情報を入力します。

![](https://miro.medium.com/max/700/1*lRPBaOJilcIy5Z25E7--iw.png)
>Django管理パネル

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

-   Django OAuth Toolkitセクションの「アプリケーション」をクリックします。
-   「アプリケーションの追加」をクリックします。
![](https://miro.medium.com/max/700/1*bMN-WZ2N91YXajTUrxgaBQ.png)
-   クライアントIDとクライアントシークレットをどこかにコピーします（Reactアプリで使用します）。
![](https://miro.medium.com/max/700/1*FtlhqCw4NhBnZ2XatgxlLQ.png)
-   検索アイコンをクリックして作成したスーパーユーザーを選択し、ユーザーを設定します。
-   クライアントタイプをconfidentialにします。
-   グラントタイプをリソースオーナーのパスワードベースにします。
-   名前は自由に設定して構いません。例：Google Oauth
-   保存します。

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

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

![](https://miro.medium.com/max/700/1*K9QjwBrpJ6Smyz_LKBYudA.png)

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

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

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

##翻訳協力

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

Original Author: [Ashutosh Panda](https://iamashutoshpanda.medium.com/)
Original Article: [Google Login with Django & React --- Part2](https://iamashutoshpanda.medium.com/google-login-with-django-react-part-2-2dc41b499861)
Thank you for letting us share your knowledge!

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

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