【绝对能做到！】谷歌登录按钮的实现【2/6】

2 年 ago
宇, 华
3 minutes

绝对能办到！Google登录按钮的实现【2/6】

本文介绍了在React × DjangoRESTFramework中实现Google登录按钮的教程，这是其中的第二部分。如果要从第一部分开始阅读，请点击这里。導入偏的部分0请点击这里。

第二部分：创建后端

0. 对环境变化的理解

这段的流程如下所示。

    1. 创建虚拟环境

 

    1. 安装库

 

    1. 创建Django项目

 

    1. 更改项目设置

 

    1. 创建变量设置文件

 

    1. 创建URL

 

    1. 首次迁移，创建超级用户

 

    1. 创建django-social-oauth应用程序

 

    确认DRF（Django Rest Framework）的使用情况

1. 创建虚拟环境

$ python -m venv tutorial
$ source tutorial/bin/activate
$ pip install --upgrade pip

2. 安装必要的库文件

    requirements.txtに記入
$ vi requirements.txt

django
djangorestframework
drf_social_oauth2
python-decouple
django-cors-headers

drf_social_oauth2 : 使用DRF进行社交登录功能时所需
python_decouple : 从.env文件中提取数据时所需
django-cors-headers : 在React和Django之间进行CORS跨域通信时所需

    install実行
$ pip install -r requirements.txt

$ pip list
Package                Version
---------------------- --------
Django                 3.2.11
django-cors-headers    3.10.1
django-oauth-toolkit   1.7.0
djangorestframework    3.13.1
drf-social-oauth2      1.2.1
python-decouple        3.5

3. 创建项目

$ django-admin startproject backend
$ cd backend

4. 项目设定

    INSTALLED_APPS に ライブラリを追加
# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # 以下追加
    'rest_framework',
    'drf_social_oauth2',
    'social_django',
    'oauth2_provider',
    'corsheaders',
]
    MIDDLEWARE にも追加
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',
]
    CORS 設定追記
# React との CORS の設定

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000" # Reactはport:3000を利用
]
    TEMPLATES を以下の通り追加
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',
                'social_django.context_processors.login_redirect',
            ],
        },
    },
]
    REST framework 設定を追加
# REST framework 設定

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'oauth2_provider.contrib.rest_framework.OAuth2Authentication',
        'drf_social_oauth2.authentication.SocialAuthentication',
    ),
}

AUTHENTICATION_BACKENDS = (
    # Google OAuth2 の認証バックエンド
    'social_core.backends.google.GoogleOAuth2',

    # Django REST framework の認証バックエンド
    'drf_social_oauth2.backends.DjangoOAuth2',

    # Django の認証バックエンド
    'django.contrib.auth.backends.ModelBackend',
)
    さらに、Google OAuth 関連設定追加
# decouple から config をインポート
from decouple import config

# Google から取得した鍵情報

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = config("SOCIAL_AUTH_GOOGLE_OAUTH2_KEY")
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = config("SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET")

# アクセススコープの設定

SOCIAL_AUTH_GOOGLE_OAUTH2_SCOPE = [
    'https://www.googleapis.com/auth/userinfo.email',
    'https://www.googleapis.com/auth/userinfo.profile',
]
    (オプション)言語設定

由于易于理解，所以事先将其翻译成日语。

# Internationalization
# https://docs.djangoproject.com/en/3.2/topics/i18n/

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

5. 创建变量设置文件

我们将Google Cloud获得的认证信息的ID和密钥保存为变量。请创建.env文件。

※将其创建在项目的根目录下（与manage.py文件在同一层）。

$ vi .env

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY="499058585498-xxxxxxxxxxxx.apps.googleusercontent.com"
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET="GOCSxxxxxxxxxxxxnn3rV"

6. 网址的配置

from django.contrib import admin
from django.urls import path, include # include追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('auth/', include('drf_social_oauth2.urls', namespace='drf')), # 追加
]

7. 迁移，建立超级用户

$ python manage.py migrate
$ python manage.py createsuperuser --email=your.email@gmail.com --username=admin

8. 管理页面设置

    サーバ起動
$ python manage.py runserver

请使用创建的管理员用户登录到 http://127.0.0.1:8000/admin。

    创建应用程序
create-application-1.png

添加 Django OAuth Toolkit 的应用程序

    设定
create-application-2.png

Client id , Client secret の値は自動で作成されています 後ほど利用するのでどこかメモ帳に控えておきましょう(※値を変更しないよう注意してください)
その他以下の通り設定し、保存

User : 1
Client type : Confidental
Authorization grant type : Resource owner password-based
Name : 適当に入力(自分はGoogle OAuthにしました)

9. 確認DRF

尝试访问 http://127.0.0.1:8000/auth/convert-token，如果出现以下页面，则表示暂时OK！

create-application-3.png

第二部分结束

辛苦了，请在下一部分进行前端设置。

bannerAds