如何强制React应用在设备原生浏览器而非内嵌浏览器中打开

Google OAuth 出于安全规则限制，已经全面禁止所有内嵌WebView（即各类App内置浏览器，不受操作系统、宿主App类型影响）环境下的授权流程，你在iOS端Facebook Messenger内置浏览器中遇到的登录失效问题属于该规则下的通用报错，并非代码逻辑错误。
相关报错参考截图：

你可以通过环境检测+跳转引导的方式实现对应按钮，核心逻辑如下：

• 首先做内嵌环境识别：通过User Agent特征判断当前访问环境是否为App内置WebView，常见的特征字段包括FBAN/FBAV（Facebook系App）、MicroMessenger（微信）、wv（安卓通用WebView标识）等，仅在检测到内嵌环境时展示唤起按钮，普通移动端浏览器、PC端浏览器下直接隐藏按钮即可。
• 按钮点击后的唤起逻辑：不存在能100%强制唤起系统浏览器的前端API，目前兼容性最高的实现是协议跳转+手动引导兜底，React下的基础实现代码参考：

import { useEffect, useState } from 'react';

// 内嵌环境检测逻辑，可根据需要补充更多App的UA特征
const checkIsInAppBrowser = () => {
  const ua = navigator.userAgent.toLowerCase();
  return /fban|fbav|micromessenger|wv/.test(ua);
};

export default function OpenSystemBrowserButton() {
  const [showGuide, setShowGuide] = useState(false);
  const currentPageUrl = window.location.href;
  const isInApp = checkIsInAppBrowser();

  const handleClick = () => {
    // 尝试通过协议唤起Chrome（系统默认浏览器会响应这类协议请求）
    window.location.href = currentPageUrl.replace(/^https?:/, 'googlechromes:');
    // 2秒后如果还在当前页，说明协议唤起被拦截，展示手动操作引导
    setTimeout(() => {
      setShowGuide(true);
    }, 2000);
  };

  if (!isInApp) return null;

  return (
    <>
      <button 
        onClick={handleClick}
        style={{ padding: '12px 24px', fontSize: '16px' }}
      >
        点击在系统浏览器中打开完成登录
      </button>
      {showGuide && (
        <div className="guide-mask">
          <p>无法自动唤起浏览器，请点击页面右上角「···」菜单，选择在系统浏览器中打开当前页面</p>
        </div>
      )}
    </>
  );
}

• 关键注意点：
  • 部分宿主App会在内嵌WebView中禁用跨应用跳转协议，这种场景下前端代码无法强制突破限制，手动引导用户操作是唯一合规的兜底方案，也是目前市面上所有接入Google OAuth的产品处理内嵌环境问题的通用做法。
  • 不要尝试通过修改UA、伪造环境标识等方式绕过Google的内嵌环境检测，这类操作违反Google OAuth服务条款，存在应用被下架、OAuth权限被收回的风险。

内容的提问来源于stack exchange，提问作者ablaszkiewicz1