【Django】实现Google账号登录 – 仅需4个简单步骤！

3 年 ago

清, 宇

2 minutes

首先

近年来，社交登录的需求增加，许多网络服务都采用了社交登录。在Django中，也提供了丰富的库来实现社交登录。本文将介绍在Django中实现通过Google账户登录的步骤！

首先，什么是社交登录？

社交登录是一种功能，用户可以使用他们平时使用的社交媒体账户（如Facebook或Twitter）来登录网站。

GitHub

这篇文章中介绍的源代码已经在GitHub上公开发布了！

提及的文章

本文是根据以下文章进行参考的。

操作步骤

环境

MacOS 13.2.1
Python 3.10.3
Django 4.1.7

苹果操作系统13.2.1
Python 3.10.3
Django 4.1.7

搭建开发环境

请参考GitHub的源代码以及我撰写的文章，来创建应用程序。由于本文侧重于Google认证，所以省略了关于Django项目设置等的说明。

在中国本土实施Google社交登录

1. 安装软件包

在Django中，有许多用于实现社交登录的库可供使用，但这次我们将使用django-allauth。
django-allauth是一个可以在Django中轻松实现社交登录（如Google、Facebook、Twitter等）和电子邮件地址密码认证的软件包。

pip install django-allauth

2. 安装django-allauth

在settings.py文件的INSTALLED_APPS中添加django-allauth的配置。

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

    'django.contrib.sites', # 追加
    'allauth', # 追加
    'allauth.account', # 追加
    'allauth.socialaccount', # 追加
    'allauth.socialaccount.providers.google', # 追加

    'accounts'
]

此外，我们还需要在settings.py文件的底部添加如下配置。

SITE_ID = 1

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
]

关于设置项目，我会补充说明。

SITE_ID
SITE_IDは、django-allauthアプリケーションに関連するDjangoプロジェクト内のサイトを識別するために使用されます。
SITE_IDは後ほどDjango管理画面で作成するサイトオブジェクトのIDを設定します。

AUTHENTICATION_BACKENDS
認証方法を複数登録できます。デフォルトでは、djangoのModelBackendですが、今回のようにallauth.account.auth_backends.AuthenticationBackendを追加すると、メールとパスワードを使用した認証も行うことができます。

在urls.py文件中添加用于allauth的url。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('social-auth/', include('allauth.urls')),
    path('', include("accounts.urls"))
]

3. 谷歌API的设置

为了实现Google的社交登录功能，需要进行Google API的设置，并获取客户端ID和客户端密钥，让我们一起来完成吧！

首先，请访问Google Cloud并创建一个新的项目。

在项目创建后，从侧边栏选择API和服务 > OAuth同意页面。

选择”外部用户类型”，然后点击”创建”按钮。

接下来，我们将输入应用程序信息。

设定应用名称、用户支持邮件和开发者联系信息，然后点击“保存并继续”。

在设置时不要选择范围，只需点击“保存并下一步”。

按下“保存并下一步”按钮而不做任何其他操作。

请确认屏幕。
确认后，请按“返回仪表盘”。

接下来，我们将创建OAuth客户端ID。
请点击侧边栏中的“认证信息”。

创建认证信息 > 点击OAuth客户端ID。

应用类型：Web应用程序
已授权的JavaScript来源：http://127.0.0.1:8000
已授权的重定向URI：http://127.0.0.1:8000/social-auth/google/login/callback/

请分别设置以上选项，然后点击“创建”。

由于已生成了客户端ID和客户端密钥，请记得将其复制保存。同时，也请下载JSON文件保留备用?‍♂️

4. 将社交应用程序配置为Django。

我会操作Django的管理界面，并进行社交应用程序的设置。
首先，我会执行迁移操作以创建与django-allauth相关的数据表。

python manage.py migrate

为了登录Django管理界面，请创建超级用户。

python manage.py createsuperuser

执行开发服务器。

python manage.py runserver

接下来，点击侧边栏上的”社交应用程序”，然后进行设置。

供应商：谷歌
名称：谷歌身份验证（可选名称）
用户ID：GoogleAPI的客户端ID
秘钥：GoogleAPI的客户端密钥
网站：将127.0.0.1:8000设置为”选择的站点”

当您修改以上内容后，请点击“保存”按钮进行注册。

我們將在模板中創建一個按鈕，以便最終跳轉到Google登錄頁面。

{% extends 'base.html' %}
{% load socialaccount %}

{% block title %}
<div class="h1">Login</div>
{% endblock %}
{% block content %}
<form method="post">
    {% csrf_token %}
    {{ form.non_field_errors }}
    {% for field in form %}
    {{ field.label }}
    {{ field }}
    {{ field.errors }}
    <br>
    {% endfor %}
    <div class="mt-3">
        <button type="submit" class="btn btn-primary">Login</button>
        <!-- 以下のボタンを追加 -->
        <a href="{% provider_login_url 'google'%}?next=/" class="btn btn-primary">Login with Google</a>
        <a href="{% url 'accounts:index' %}" class="btn btn-secondary">Back</a>
    </div>

</form>
{% endblock %}