React Native WebView安卓端Google Sign In报错:无法登录 浏览器或应用不安全
React Native WebView Google Sign-In 登录失败解决方案
该错误是Google官方安全策略限制导致:自2021年起,Google Sign-In不再支持在嵌入式WebView环境中进行第三方登录验证,嵌入式WebView会被Google识别为未认证的不安全环境,直接拦截登录请求,因此会弹出对应报错。LinkedIn没有同类安全限制,所以可以正常在WebView中完成登录。
无法完成登录,当前浏览器或应用可能不安全。可尝试更换浏览器,若您已使用受支持的浏览器,可重新尝试登录。
可用解决方案
- 方案1(长期最优):使用官方原生Google Sign-In SDK替代WebView实现登录功能
推荐集成第三方社区维护的@react-native-google-signin/google-signin库,分别适配安卓和iOS端的原生登录流程,完全绕开WebView环境,完全符合Google的安全策略要求,登录成功率最高,是生产环境的首选方案。 - 方案2(临时应急):修改WebView的User-Agent标识伪装独立浏览器
给WebView组件添加userAgent属性,将UA设置为当前系统Chrome/Safari等独立浏览器的UA字符串,临时绕过Google的环境检测,参考代码如下:
注意:该方案存在被Google后续安全策略更新识别拦截的风险,不建议长期在生产环境使用<WebView source={{ uri: 你的登录页面地址 }} // 安卓端Chrome UA示例,iOS可替换为对应Safari的UA userAgent="Mozilla/5.0 (Linux; Android 13; SM-G998B Build/TP1A.220624.014) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36" /> - 方案3(体验折中):使用系统级身份验证组件替代WebView
采用iOS的ASWebAuthenticationSession、安卓的Custom Tabs这类系统提供的身份验证专用组件打开登录页面,这类组件会被Google识别为可信环境,不会触发不安全拦截,同时可以共享系统浏览器的已登录状态,用户体验优于原生SDK登录,可以通过react-native-inappbrowser-reborn库快速实现该方案。
内容的提问来源于stack exchange,提问作者Akshay M
相关产品推荐
相关产品推荐

