使用social-auth-app-django库实现Google OAuth2登录认证

2 年 ago
宇, 华
3 minutes

首先

由于希望使用Google账号进行登录功能，因此我创建了这个功能。
我会感激地使用social-auth-app-django库，听说用它可以轻松创建。

这次的重点是创建使用Google账户进行登录的功能，因此并不太注重REST等方面的内容。

    • Document

 

    DocumentのDjangoのページ

事先了解的知識

social-auth-app-django是什么？

    • DjangoでOAuth認証を行う時に使うサードパーティ製のパッケージ

 

    Google, Twitter, Facebook などのプロバイダーのアカウントを使って認証処理ができる

环境

    • python 3.7.4

 

    django 3.0.3

开始做作业

安装social-auth-app-django。

$ pip install social-auth-app-django

应用程序的注册

在settings.py的INSTALLED_APP中新增social_django。


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'social_django',# これを追加した
]

由于Django ORM是默认使用的，所以如果想使用Mongo ORM，则需要另外进行处理。
参考：有关使用Mongo ORM的情况。

数据库

一旦将social_django注册到INSTALLED_APPS中，然后进行迁移操作，同步数据库，并构建必要的模型。

$ ./manage.py migrate

注册认证后端

接下来，我们将注册认证后端。
在settings.py中定义AUTHENTICATION_BACKENDS，并添加您希望使用的认证后端。

AUTHENTICATION_BACKENDS = (
    'social_core.backends.open_id.OpenIdAuth',
    'social_core.backends.google.GoogleOAuth2',
    'social_core.backends.google.GoogleOAuth',
    'social_core.backends.twitter.TwitterOAuth',
    'social_core.backends.yahoo.YahooOpenId',
    'django.contrib.auth.backends.ModelBackend',
)

如果忘记了最后一行的”django.contrib.auth.backends.ModelBackend”，那么使用django.contrib.auth进行身份验证将无法正常工作。如果无法登录，请检查是否漏掉了这一项。

在这一部分中，您需要根据要使用的认证提供商注册认证后端。
支持的提供商有：

注册Context_Processors

在 settings.py 的 TEMPLATES 中添加 context_processor。


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        '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', # 追加
            ],
        },
    },
]

在后端上下文处理器中，包含了以下的三个信息，它们以字典型式被包含在其中。

associated : 現在ログインしているユーザーに関連するUserSocialAuthのインスタンスのリスト(ユーザーがいない場合は空)

not_associated : 現在ログインしているユーザーに関連付けされていない利用可能なバックエンド名のリスト

backends : 利用可能なすべてのバックエンド名のリスト

设置URL

我会创建一个URL，通过以下流程可实现访问：首页（任何人都可见）→登录页面→主页（必须登录才能看到）。

from django.contrib import admin
from django.urls import path
from django.urls.conf import include
from django.contrib.auth.views import LoginView, LogoutView
from . import views

urlpatterns = [
    path('', views.toppage, name='toppage'),
    path('admin/', admin.site.urls),
    path('auth/', include('social_django.urls', namespace='social')), # これが重要
    path('login/', LoginView.as_view(), name='login'),
    path('logout/', LogoutView.as_view(), name='logout'),
    path('home/', views.home, name='home'),
]

登录之后无法退出会让用户感到困扰，所以我们也要确保可以退出登录。
最后，我们指定LOGIN_URL和LOGIN_REDIRECT_URL。

LOGIN_URL = 'login'
LOGIN_REDIRECT_URL = 'home'

获取客户端ID和密钥

前往Google API控制台，创建一个新项目并生成认证信息。

    • 承認済みの JavaScript 生成元

 

    承認済みのリダイレクト URI

因为每个人都会被问到。

已經承認的 JavaScript 來源

http://localhost:8000

已验证的重定向URI

http://localhost:8000/auth/complete/google-oauth2/
http://127.0.0.1:8000/auth/complete/google-oauth2/

请进行以上设置，并保存。
由于这次是在本地运行，所以这样没有问题，
但是，如果在正式环境中使用，请改变域名部分。

当获取到客户端ID和秘钥时，将其分别记录在settings.py文件中。

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = 'hogehoge' # クライアントID
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET 'hugahuga' # シークレットキー

如果不想硬编码的话，可以考虑将其保存为环境变量。

编辑 views.py

from django.contrib.auth.decorators import login_required
from django.shortcuts import render


def toppage(request):
    return render(request, 'toppage.html')


@login_required
def home(request):
    return render(request, 'home.html')

这是一个简单的函数，用于渲染HTML。

创建模板

我将在templates中创建HTML文件，这里不详细解释。

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
  </head>
  <body>
      {% block content %}
      {% endblock %}
  </body>
</html>

{% extends 'base.html' %}

{% block content %}
  <h1>Hello World!!</h1>
  <a href="{% url 'login' %}">ログイン</a>
{% endblock %}

{% extends 'base.html' %}

{% block content %}
{% if user.is_authenticated %}
  <h1>ログイン成功！！</h1>
  <h2>{{ user.username }}がログイン中</h2>
  <p>is_authenticated : {{ user.is_authenticated }}</p>
  <p>user_name : {{ user.username }}</p>
  <p>backends: {{ backends }}</p>
{% endif %}
<a href="{% url 'logout' %}">ログアウト</a>

{% endblock %}

在home.html页面，验证已成功，但为了确保，我们使用is_authenticated来确认是否已经验证成功。

接下来，我们将创建登录页面和登出页面。按照LoginView和LogoutView的规范，在模板中创建一个名为registration的文件夹，并在其中创建login.html和logged_out.html文件。

以下是模板的结构。

模板/
┣ 注册/
┃ ┣ 登录.html
┃ ┗ 退出登录.html
┣ 基础.html
┣ 主页.html
┗ 顶部页面.html

{% extends 'base.html' %}

{% block content %}
  <h2>ログインに使用するサービスを選択してください
    <ul>
        <li><a href="{% url 'social:begin' 'google-oauth2' %}">Googleアカウントでログイン</a></li>
    </ul>
{% endblock %}

<li><a href="{% url 'social:begin' 'google-oauth2' %}">Googleアカウントでログイン</a></li>

这部分会将您转到身份验证页面。

{% extends 'base.html' %}

{% block content %}
  <h2>ログアウトしました</h2>
  <ul>
      <li><a href="{% url 'landing' %}">ランディングページへ</a></li>
      <li><a href="{% url 'login' %}">ログインページへ</a></li>
  </ul>
{% endblock %}

由于已经做好了准备，让我们实际操作一下吧。

确认操作

スクリーンショット 2021-02-21 13.48.29.png
スクリーンショット 2021-02-21 13.48.34.png
IMG_0216.png
スクリーンショット 2021-02-21 13.50.20.png

你的行为看起来是有意为之的！

最后
使用social-auth-app-django可以如此轻松地创建登录功能！
我有些惊讶。
若这篇文章对某人有所帮助，我则感到幸福！

这里写的并不是绝对正确的事情！！如果有任何错误或建议，还请在评论中指出！?‍♂️

bannerAds