如何使用 Django all-auth 在 Django Web 应用程序上正确使用“使用 Google 登录”按钮

Question

在我的 Django Web 应用程序中（当前未投入生产），我想使用 all-auth 来使用 Google 帐户登录用户，并且可以使用以下社交帐户表单来实现这一点。

//templates/socialaccount/login.html

{% extends "socialaccount/base.html" %}
{% load i18n %}
<h1 class="display-4">{% blocktranslate with provider.name as provider %}Sign In Via {{ provider }}{% endblocktranslate %}</h1>

<p>{% blocktranslate with provider.name as provider %}You are about to sign in from {{ provider }}.{% endblocktranslate %}</p>
{% endif %}

<form method="post">
  {% csrf_token %}
    
        <button class="btn btn-outline-info" type="submit">{% translate "Sign In" %}</button>
    
</form>

点击登录按钮后，它会打开新的网址，例如 -

https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?client_id=5649........apps.googleusercontent.com&redirect_uri=http%3A%2F%2F127.0.0.1%3A8000%2Faccounts%2Fgoogle%2Flogin%2Fcallback%2F&scope=profile&response_type=code&state=ch...kO&access_type=online&service=lso&o2v=2&flowName=GeneralOAuthFlow

这要求我选择 Google 帐户，在我选择帐户后，它会让我登录并重定向到 django 应用程序的主页。

正在按预期工作， 但在阅读了 Google 品牌指南后，我知道我们应该使用符合其指南的“通过 google 登录”按钮 就像他们的文档一样 - https://developers.google.com/identity/gsi/web/guides/personalized-button

那么我如何使用该按钮来遵守 Google 的登录指南，并且不会干扰登录和身份验证流程。

我使用 Google 按钮生成器创建用于登录的按钮并在登录模板中使用 但这似乎不起作用。

//templates/socialaccount/login.html

<form method="post">
  {% csrf_token %}
    {% if provider.name == 'Google' %}
    
<div id="g_id_onload"
     data-client_id="105.......apps.googleusercontent.com"
     data-context="signin"
     data-ux_mode="redirect"
     data-login_uri="http://127.0.0.1:8000/accounts/google/login/"
     data-auto_prompt="false">
</div>

<div class="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     data-theme="outline"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left">
</div>

    
    {% else %}
    
    <button class="btn btn-outline-info" type="submit">{% translate "Sign In" %}</button>
    {% endif %}
    
</form>
<script src="https://accounts.google.com/gsi/client" async defer></script>

使用此我可以看到“使用 Google 登录”按钮，但它不起作用。 那么我如何在开发服务器和生产服务器中正确设置它？

作为参考，您可以看到- https://developers.google.com/identity/gsi/web/reference/html-reference

在我的项目settings.py文件中

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        },
    }
}


SITE_ID = 1

LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'

LOGIN_URL = '/accounts/google/login/'


SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = '564.....apps.googleusercontent.com'  
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = 'GOC....'


ACCOUNT_MAX_EMAIL_ADDRESSES = 1 


ACCOUNT_EMAIL_VERIFICATION = 'none'

Answer 1

也搜索了一段时间的解决方案。我最终采用了以下方法：

• 从 Google 获取样式“代码”Google 品牌指南
• 创建一个 custom.css 文件并添加上面的 css 部分
• 从allauth存储库获取模板文件并将其复制到

  templates/socialaccount/login.html

• 删除了这个

  {% include "socialaccount/snippets/provider_list.html" with process="login" %}

  并添加了来自 google 的 HTML 片段。
• 在按钮周围添加了

  <a href="{% provider_login_url 'google' %}">

这样，每个额外的登录源 (IDP) 也必须添加到

login.html

中。这种权衡应该是可以接受的，因为无论如何每个新的 IDP 都需要它自己的按钮，因此需要手动操作。