如何从 React 中的 Web 视图内部在浏览器中打开链接？

Question

我在 React 中制作了一个具有 Google OAuth 的应用程序，但由于 webview 不支持它，因此在应用程序浏览器中打开时出现“错误 403：不允许的用户代理”。

无论如何，当我从 web 视图中单击链接时，我可以在浏览器中打开一个链接（这样当 userAgent 被检测为 web 视图时我可以添加一个重定向链接）？

当 userAgent 是 webView 时我尝试了这段代码

<div className="webview-div">Detected you are using a webview. Google does not support OAuth in WebViews. Please open the link in a browser.
<a href="link-to-my-site.com" onclick="window.open(this.href, '_blank')"> LINK </a>
</div>

但它只是在网络视图本身中打开，我又回到了同一页面。

Answer 1

你可以试试这个：

import React from 'react';

function MyComponent() {
  const isWebView = /WebView/.test(navigator.userAgent);

  const handleAuthClick = () => {
    if (isWebView) {
      // Open authorization URL in external browser
      window.open('https://your-oauth-authorization-url.com', '_blank');
    } else {
      // Handle authorization flow within the app
      // (e.g., initiate OAuth flow with your library of choice)
    }
  };

  return (
    <div>
      {isWebView && (
        <div className="webview-div">
          Detected you are using a webview. Google does not support OAuth in WebViews.
          Please open the link in a browser.
          <button onClick={handleAuthClick}>Authorize</button>
        </div>
      )}
      {!isWebView && (
        <div>
          {/* Render authorization button or link for non-webview environments */}
          <button onClick={handleAuthClick}>Authorize</button>
        </div>
      )}
    </div>
  );
}

export default MyComponent;

希望对你有帮助！！