在不打开新窗口/标签的情况下使用 Google 身份验证登录

Posted 2023-02-23

【中文标题】在不打开新窗口/标签的情况下使用 Google 身份验证登录

【英文标题】：Login using Google authentication without opening new window/tab

【发布时间】：2016-10-16 17:50:33

【问题描述】：

我想在我的网站中实现 Google 登录，就像在 堆栈交换、堆栈溢出等。 这意味着当用户选择使用 Google 身份验证登录时，该站点将重定向到一个页面，他可以在该页面中选择要使用的 Google 帐户，而无需打开新窗口/标签并重定向到该站点 你能帮我提供链接/文档吗？ 不要打开新标签/窗口非常重要。

我正在使用这个：https://developers.google.com/identity/sign-in/web/build-button

您可以看到，当您单击按钮时会打开一个新窗口，我想阻止这种情况。

提前致谢

【问题讨论】：

弹窗有什么问题？

有些浏览器会阻止它们，在移动浏览器中这种情况更成问题或不支持。

哪个浏览器阻止了他们？

我看到的是 iPhone 中的 Chrome，它不会阻止但不会打开新窗口/标签。所以最好为所有浏览器提供这种可用性。谢谢

我不知道 iPhone 上的 Chrome 有什么不同，但 Chrome 确实为我打开了新窗口。你可以在这个网站上试试，比如谷歌登录。 meta.discourse.org

【参考方案1】：

您可以尝试切换到 javascript 客户端身份验证并将 ux_mode 选项传递给 signIn() 函数选项。

ux_mode: "redirect"

这里的文档： https://developers.google.com/identity/sign-in/web/reference#googleauthsigninoptions

然后您可以像这样获取用户配置文件：

let googleUser = window.gapi.auth2.getAuthInstance().currentUser.get();

if (googleUser) 
    let profile = googleUser.getBasicProfile();

    if (profile) 
        this.state.google.firstname = profile.getGivenName();
        this.state.google.lastname = profile.getFamilyName();
        this.state.google.email = profile.getEmail();
    

这里和那里都有记录： https://developers.google.com/identity/sign-in/web/people

【讨论】：

这是正确的解决方案。这不会打开弹出窗口，但它也有几个限制：当登录过程成功时，您必须提供一个方式/链接。并且您无法获取用户名、电子邮件或图片

您可以，但您需要进行第二次交易。我将编辑答案。

@Maxine：我前段时间尝试使用该方法，但最终恢复为弹出方法，因为我无法获取用户名和图片。如果你能告诉我怎么做，我会很高兴。

编辑了我的答案并添加了文档链接。

【参考方案2】：

只需将 data-ux_mode="redirect" 添加到 Google 示例中的登录 div（如果您以编程方式呈现登录按钮，则添加到 .render 调用）

<div class="g-signin2" data-onsuccess="onSignIn" data-ux_mode="redirect"></div>