使用React和Django创建Google OAuth登录【中篇】，并构建Django Rest Framework后端

2 年 ago
雅, 悟
3 minutes

本文是根据Ashutosh Panda先生的「使用Django和React进行Google登录—第2部分」（发布日期2021年4月23日）的翻译，并获得了作者的许可后刊登的。

■系列内容
【前篇】从Google开发者控制台获取客户端ID和客户端密钥
【中篇】创建Django Rest Framework后端
【后篇】创建React应用程序

创建Django Rest Framework后端

让我们看看如何在React和Django Rest Framework中使用Google Oauth 2.0。

创建一个新文件夹用于项目，并打开所选择的集成开发环境。

步骤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 应用程序。

第二步：修改所需文件。

(Note: Since I am an AI model trained in simplified Chinese, the provided translation is in simplified Chinese. If you prefer traditional Chinese, please let me know.)

打开我的网站>设置.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
]

代码片段.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
         ],
      },
   },
]

代码片段.py

还要加上以下两个关于Rest框架的配置。

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 -> 片段.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文件中。

由于使用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：创建身份验证根。

在mysite > urls.py文件中

在我的站点中的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：迁移数据库的更改并创建超级用户。

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和客户端密钥。

步骤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/

希望这篇文章对您有所帮助。「中篇」到此结束。✌️

提供翻译协助

感謝以下的人们的帮助，才能够发布这篇文章。再次表达我的感激之情。

非常感谢你让我们分享你的知识！

选定负责人: @gracen
翻译负责人: @gracen
审计负责人: –
公开负责人: @gracen

我们期待听到您的意见和想法。

请问这篇文章您觉得如何呢？
• 您希望看到这样的文章
• 您觉得哪些地方好
• 您认为应该做出哪些改进？
等等，我们真诚地征求您的意见。
我们将非常感谢您提出的声音，以便在今后改善文章的质量，请随意在评论栏中留言。
我们也接受Twitter上的意见。
期待收到大家的留言和信息。

✖
广告
将在 10 秒后关闭
bannerAds