如何避免来自第 3 方本机应用程序的 Web 应用程序中的 403 disallowed_useragent 错误

Question

我想让我的用户在我的 React Web 应用程序上使用 Google 登录（使用 Auth0 保护），即使他们来自本机应用程序。我确实在 auth0 仪表板中添加了 oauth 的社交连接，并且它在桌面上运行良好。但是 Google 从 2017 年开始的安全政策禁止在 webview 中使用 Oauth 请求，因此来自本机应用程序的用户尝试使用 Google 登录时会出现以下错误403: disallowed_userAgent

重现步骤 ：

1. 在 LinkedIn 中发送一条包含此链接stackoverflow.com的消息（或任何其他重定向到使用 Google 登录的网站的链接）
2. 在本机 LinkedIn 应用程序中，单击链接并通过 Google sso 登录（无论是登录还是注册）
3. 点击Google登录的连接按钮，看到出现错误

这可以在 Facebook、Messenger、Twitter 原生应用程序上重现。

当用户从社交本机应用程序导航时，任何想要使用 Google 登录的安全网站都必须遇到此问题。

到目前为止我找到的解决方案是：

• (A) Google 推荐：创建我自己的本机应用程序，然后进行完全集成的身份验证（完全符合 Google 政策）。但这样做确实很耗时，我现在不想创建一个本机应用程序。
• (B) 在网络视图上创建一个用户代理欺骗，但这意味着我可以控制它，但我对此没有任何权力，因为它是第三方应用程序（LinkedIn & co）
• (C) 如果 useragent 包含“android”或“iPhone”字符串，则隐藏 Google 登录。品特雷斯特做到了这一点。但这并不是一个非常令人满意的解决方案，因为很多用户更喜欢使用 Google 登录，但又不能。另外，我确信这可以通过 Auth0 实现。
• (D) 创建一个延迟深层链接，以从我的 React Web 应用程序中强制打开 chrome/safari 应用程序。但我仍然想注入一个 url 并稍后搜索它，就像 window.open(url) 那样。我找不到同时执行这两项操作的方法。有可能吗？

还有其他想法吗？也许其他服务比 Auth0 更好地处理这个问题？

我尝试过了：

• 使用 Chrome 应用程序及其其他变体强制打开 Chrome 应用程序中的链接window.open("chrome:https//example.com") ，但不起作用。
• 进行用户代理欺骗，但它似乎在导航器提示中发生了更改，然后当我从 Auth0 登录重定向到 Google 登录时再次设置。另外，用户代理应该是只读的，所以我认为这不是一个好的引导。但是，我注意到，在使用Solers.io从 LinkedIn 应用程序重定向的 iPhone 用户上，用户代理包含“LinkedInApp”，而 Android 用户则不包含“LinkedInApp”。因此，对于 LinkedIn 中 Solers.io 的这种特殊情况，只有 IOS 设备才会出现错误。这让我认为可能存在一个围绕用户代理欺骗的解决方案，但它不在我们手中（浏览器或社交本机应用程序或两者？）

Answer 1

当用户通过本机应用程序浏览时，无法让用户使用 Google SSO 登录。如果这样做，您将收到 403 disallowed_userAgent 错误。

\n

但我找到了一种方法，可以在用户浏览本机应用程序时禁用 Google SSO，以便使用 Auth0 不会出现错误。\n为此，请在您的租户中的 auth0 中创建 2 个应用程序，然后重定向到您自己的 Web 应用程序中的正确应用程序。仅在两个应用程序之一上授权 Google SSO。

\n

下面的代码将通过 Iphone 浏览的用户重定向到禁用 SSO 的应用程序，以便用户不会\xe2\x80\x99t 弹出错误（因为在我的情况下，此错误仅发生在 iPhone 上）。查看用户代理以使其符合您的情况。

\n

if (navigator.userAgent.match(/iPhone/i)) {\n    return process.env.REACT_APP_AUTH0_MOBILE_CLIENT_ID; // Google SSO is disabled\n  } else {\n    return process.env.REACT_APP_AUTH0_CLIENT_ID; // Google SSO is enabled\n}\n

\n