让Django应用支持通过Google登录

2 年 ago

清, 扬

6 minutes

你好。今天我要介绍如何在Django应用程序中使用Google等社交媒体帐户登录的方法。

我们可以通过使用本次使用的django-allauth库，在社交媒体上让用户进行注册。

请参阅这里以获取详细文档（虽然是英文）。

请参考此处（GitHub链接）以获取已完成的示例代码。

另外，Google云服务将会产生费用，所以在测试完成后请关闭付费选项。（如果您是首次注册，应该可获得免费额度。）

总览

简介

概要概览

Django是一个Python的网页框架，可以涵盖与数据库的连接以及创建API等功能的出色框架。本次的Django应用的认证是在Django应用中进行的，并不是使用Django的REST API。我们希望在未来介绍如何通过API进行社交媒体登录，请期待！

当下的环境

django-allauthライブラリ

django-allauth库

在GitHub上，django-allauth这个中等受欢迎程度的库已经获得了7.8k个星标。考虑到Django本身已经获得了69.1k个星标，我们可以说django-allauth是Django中受欢迎库之一吗？

以下是Django-allauth库的特点：

メールアドレスの証明のフローがあります。

以下是截至2023年3月时支持的供应商。详细信息可在文章底部找到。

（yahooなども追加されています。）

想要了解的详细特征值得注意

Facebook, Twitterなどのライクはデータベースでコンフィグできます。（SocialApp モデルを参照）

创建Django应用程序

那么，我们将使用以下命令来设置Django应用程序。

#オプショナルで仮想環境を作成
pip install virtualenv
virtualenv env
source env/bin/activate
#WIndows
env\Scripts\activate
python -m pip install Django
django-admin startproject authapp
#authappは自分でつけたアプリ名です。

一旦应用程序创建完成，您将移动到应用程序目录并创建数据库。

让我们直接创建超级用户（管理员账号）。

cd authapp/
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver

然后，使用最后的runserver命令启动测试服务器，尝试从浏览器中访问。

如果没有问题，请使用Ctrl+C临时停止服务器，然后继续进行。

Django-allauth的安装

然后安装主要的django-allauth库。

pip install django-allauth

当安装完成后，打开文本编辑器并编辑settings.py文件。

首先，请查看变量TEMPLATES。虽然您不需要修改它，但请知道allauth使用了’django.template.context_processors.request’。

TEMPLATES = [
   {
       'BACKEND': 'django.template.backends.django.DjangoTemplates',
       'DIRS': [],
       'APP_DIRS': True,
       'OPTIONS': {
           'context_processors': [
               # Already defined Django-related contexts here
               # `allauth` needs this from django
               'django.template.context_processors.request',
           ],
       },
   },
]

接下来，添加AUTHENTICATION_BACKENDS变量。

AUTHENTICATION_BACKENDS = [
   # Needed to login by username in Django admin, regardless of `allauth`
   'django.contrib.auth.backends.ModelBackend',
   # `allauth` specific authentication methods, such as login by e-mail
   'allauth.account.auth_backends.AuthenticationBackend',
]

‘django.contrib.auth.backends.ModelBackend’是用于设置Django本地帐户登录认证的模型后端。

“‘allauth.account.auth_backends.AuthenticationBackend’是在allauth中使用的身份验证后端。”

请查看INSTALLED_APPS。

在这里注册图书馆应用程序和必要的社交媒体应用程序。请删除不必要的内容。

INSTALLED_APPS = [
   ...
   # The following apps are required:
   'django.contrib.auth',
   'django.contrib.messages',
   'django.contrib.sites',
   'allauth',
   'allauth.account',
   'allauth.socialaccount',
   # ... include the providers you want to enable:
   'allauth.socialaccount.providers.agave',
   'allauth.socialaccount.providers.amazon',
   'allauth.socialaccount.providers.amazon_cognito',
   'allauth.socialaccount.providers.angellist',
   'allauth.socialaccount.providers.apple',
   'allauth.socialaccount.providers.asana',
   'allauth.socialaccount.providers.auth0',
   'allauth.socialaccount.providers.authentiq',
   'allauth.socialaccount.providers.azure',
   'allauth.socialaccount.providers.baidu',
   'allauth.socialaccount.providers.basecamp',
   'allauth.socialaccount.providers.battlenet',
   'allauth.socialaccount.providers.bitbucket',
   'allauth.socialaccount.providers.bitbucket_oauth2',
   'allauth.socialaccount.providers.bitly',
   'allauth.socialaccount.providers.box',
   'allauth.socialaccount.providers.cern',
   'allauth.socialaccount.providers.cilogon',
   'allauth.socialaccount.providers.clever',
   'allauth.socialaccount.providers.coinbase',
   'allauth.socialaccount.providers.dataporten',
   'allauth.socialaccount.providers.daum',
   'allauth.socialaccount.providers.digitalocean',
   'allauth.socialaccount.providers.dingtalk',
   'allauth.socialaccount.providers.discord',
   'allauth.socialaccount.providers.disqus',
   'allauth.socialaccount.providers.douban',
   'allauth.socialaccount.providers.doximity',
   'allauth.socialaccount.providers.draugiem',
   'allauth.socialaccount.providers.drip',
   'allauth.socialaccount.providers.dropbox',
   'allauth.socialaccount.providers.dwolla',
   'allauth.socialaccount.providers.edmodo',
   'allauth.socialaccount.providers.edx',
   'allauth.socialaccount.providers.eventbrite',
   'allauth.socialaccount.providers.eveonline',
   'allauth.socialaccount.providers.evernote',
   'allauth.socialaccount.providers.exist',
   'allauth.socialaccount.providers.facebook',
   'allauth.socialaccount.providers.feedly',
   'allauth.socialaccount.providers.figma',
   'allauth.socialaccount.providers.fivehundredpx',
   'allauth.socialaccount.providers.flickr',
   'allauth.socialaccount.providers.foursquare',
   'allauth.socialaccount.providers.frontier',
   'allauth.socialaccount.providers.fxa',
   'allauth.socialaccount.providers.gitea',
   'allauth.socialaccount.providers.github',
   'allauth.socialaccount.providers.gitlab',
   'allauth.socialaccount.providers.globus',
   'allauth.socialaccount.providers.google',
   'allauth.socialaccount.providers.gumroad',
   'allauth.socialaccount.providers.hubic',
   'allauth.socialaccount.providers.instagram',
   'allauth.socialaccount.providers.jupyterhub',
   'allauth.socialaccount.providers.kakao',
   'allauth.socialaccount.providers.keycloak',
   'allauth.socialaccount.providers.lemonldap',
   'allauth.socialaccount.providers.line',
   'allauth.socialaccount.providers.linkedin',
   'allauth.socialaccount.providers.linkedin_oauth2',
   'allauth.socialaccount.providers.mailchimp',
   'allauth.socialaccount.providers.mailru',
   'allauth.socialaccount.providers.mediawiki',
   'allauth.socialaccount.providers.meetup',
   'allauth.socialaccount.providers.microsoft',
   'allauth.socialaccount.providers.naver',
   'allauth.socialaccount.providers.nextcloud',
   'allauth.socialaccount.providers.odnoklassniki',
   'allauth.socialaccount.providers.openid',
   'allauth.socialaccount.providers.openid_connect',
   'allauth.socialaccount.providers.openstreetmap',
   'allauth.socialaccount.providers.orcid',
   'allauth.socialaccount.providers.patreon',
   'allauth.socialaccount.providers.paypal',
   'allauth.socialaccount.providers.persona',
   'allauth.socialaccount.providers.pinterest',
   'allauth.socialaccount.providers.pocket',
   'allauth.socialaccount.providers.quickbooks',
   'allauth.socialaccount.providers.reddit',
   'allauth.socialaccount.providers.robinhood',
   'allauth.socialaccount.providers.salesforce',
   'allauth.socialaccount.providers.sharefile',
   'allauth.socialaccount.providers.shopify',
   'allauth.socialaccount.providers.slack',
   'allauth.socialaccount.providers.snapchat',
   'allauth.socialaccount.providers.soundcloud',
   'allauth.socialaccount.providers.spotify',
   'allauth.socialaccount.providers.stackexchange',
   'allauth.socialaccount.providers.steam',
   'allauth.socialaccount.providers.stocktwits',
   'allauth.socialaccount.providers.strava',
   'allauth.socialaccount.providers.stripe',
   'allauth.socialaccount.providers.telegram',
   'allauth.socialaccount.providers.trainingpeaks',
   'allauth.socialaccount.providers.trello',
   'allauth.socialaccount.providers.tumblr',
   'allauth.socialaccount.providers.twentythreeandme',
   'allauth.socialaccount.providers.twitch',
   'allauth.socialaccount.providers.twitter',
   'allauth.socialaccount.providers.twitter_oauth2',
   'allauth.socialaccount.providers.untappd',
   'allauth.socialaccount.providers.vimeo',
   'allauth.socialaccount.providers.vimeo_oauth2',
   'allauth.socialaccount.providers.vk',
   'allauth.socialaccount.providers.wahoo',
   'allauth.socialaccount.providers.weibo',
   'allauth.socialaccount.providers.weixin',
   'allauth.socialaccount.providers.windowslive',
   'allauth.socialaccount.providers.xing',
   'allauth.socialaccount.providers.yahoo',
   'allauth.socialaccount.providers.yandex',
   'allauth.socialaccount.providers.ynab',
   'allauth.socialaccount.providers.zoho',
   'allauth.socialaccount.providers.zoom',
   'allauth.socialaccount.providers.okta',
   'allauth.socialaccount.providers.feishu',
   ...
]

接下来，我们需要添加SITE_ID。

SITE_ID = 1

最后可以选择性地为每个社交媒体提供商添加详细设置。

这次就省略了，参考的代码就是这个。

# Provider specific settings
SOCIALACCOUNT_PROVIDERS = {
   'google': {
       # For each OAuth based provider, either add a ``SocialApp``
       # (``socialaccount`` app) containing the required client
       # credentials, or list them here:
       'APP': {
           'client_id': '123',
           'secret': '456',
           'key': ''
       }
   }
}

然后在urls.py中添加accounts的URL。

from django.urls import path, include
urlpatterns = [
   ...
   path('accounts/', include('allauth.urls')),
   ...
]

通过这个，能够实现以下事项。

不需要使用django.contrib.auth.urls提供的本地Django帐户的登录和登出URL。

相反地，你可以使用allauth库提供的account_login、account_logout和account_set_password的URL。

当安装完成后，我们将创建用于allauth的数据库表。

python manage.py migrate
#サーバーを起動します。
python manage.py runserver

可用的URL

让我们查看在allauth库中已经设置好的URL。从浏览器中访问http://127.0.0.1:8000/accounts/。accounts/是由django-allauth指定的URL。

那么您就可以确认以下默认可用的URL。

admin/
accounts/ signup/ [name='account_signup']
accounts/ login/ [name='account_login']
accounts/ logout/ [name='account_logout']
accounts/ password/change/ [name='account_change_password']
accounts/ password/set/ [name='account_set_password']
accounts/ inactive/ [name='account_inactive']
accounts/ email/ [name='account_email']
accounts/ confirm-email/ [name='account_email_verification_sent']
accounts/ ^confirm-email/(?P<key>[-:\w]+)/$ [name='account_confirm_email']
accounts/ password/reset/ [name='account_reset_password']
accounts/ password/reset/done/ [name='account_reset_password_done']
accounts/ ^password/reset/key/(?P<uidb36>[0-9A-Za-z]+)-(?P<key>.+)/$ [name='account_reset_password_from_key']
accounts/ password/reset/key/done/ [name='account_reset_password_from_key_done']
accounts/ google/