“使用 Google 登录”按钮的 data-login

问题描述

我正在尝试实现“使用 Google 登录”按钮，如此处所述： https://developers.google.com/identity/gsi/web/guides/display-button

我对 data-login_uri 的期望感到困惑，如下图所示（取自上面链接的文档）：

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-auto_prompt="false">
</div>

我已正确配置应用的客户端 ID，并且可以通过 Google 弹出窗口提供的大部分登录/身份验证流程。但是，一旦弹出窗口关闭，它就会尝试 POST 到我指定为 data-login_uri 的任何 URI。

这让我相信我们需要一个后端端点来做...某事...但我无法找到关于这个端点应该如何表现的任何文档，因此，我不确定要与我的后端开发人员沟通什么要求。

我错过了什么？

解决方法

此处data-login_uri 描述了 POST 内容，并在 Verify the Google ID token on your server side 中描述了您在后端执行的预期操作。

还强烈建议为每个请求生成一个 nonce 并在后端确认预期值，以避免重放攻击（与 CSP nonce 不同，以防止跨站点脚本）。

TL;DR 您的服务器上需要一个后端进程（用 PHP、Python、Node 等编写），该进程可以将 token_id（从您引用的 div 接收）中继到 Google 进行验证。

为什么？

Google 的文档说：

警告：不要在后端服务器上接受普通用户 ID，例如您可以通过 GoogleUser.getId() 方法获取的用户 ID。修改后的客户端应用程序可以向您的服务器发送任意用户 ID 以模拟用户，因此您必须使用可验证的 ID 令牌来安全地获取服务器端登录用户的用户 ID。

详情

data-auto_prompt 参数的值应指向 API 的端点或后端的可执行 CGI 进程。

假设您的域名是“example.com”。需要有一个端点，或者该端点处的可执行 cgi 脚本能够捕获 POST 请求，并使用 application/x-www-form-urlencoded 编码。它可能是这样的：https://www.example.com/login。

在这个端点，脚本/路由应该能够提取'tokenid'

Google 的文档在两个地方描述了后端必须做的事情：

在您的服务器端验证 Google ID 令牌：

这是一个使用 Flask 框架的“登录”路由的 Python 代码片段：（建议使用虚拟环境，并且需要安装两个 google api 的 pip。）

在命令行：pip install --upgrade google-api-python-client google-auth-httplib2 google-auth-oauthlib

# Required imports from google API
from google.oauth2 import id_token
from google.auth.transport import requests

@bp.route('/login',methods=['POST'])
def login():

    # Supplied by g_id_onload
    tokenid = request.form['credential']

    # Hardcoded client ID. Substitute yours.
    clientid = XXXXX

    # Display the encrypted credential
    current_app.logger.debug(f"Token = {tokenid}")
   
    try:
        idinfo = id_token.verify_oauth2_token(tokenid,requests.Request(),clientid)

        # Display the verified user information
        current_app.logger.debug(f"idinfo = {idinfo}")
    
        # jsonify returns a response object
        user_data = jsonify({
                'username': idinfo['email'],'name': idinfo['name'],'id': idinfo['sub']
            })
        return  user_data

    except:
        return Response(status=404)

authentication google-account google-authentication google-client-login google-signin

“使用 Google 登录”按钮的 data-login_uri 属性如何使用？

问题描述

解决方法