您现在的位置是：首页 >技术交流 >【微前端】记录一次使用react及京东micro-app实现谷歌auth2授权登录的流程 及所遇到的问题排查及最终解决方式网站首页技术交流

首先，谷歌授权登录需要到google clound上创建一个项目，创建完成后需要创建凭证，之后需要创建web形式的谷歌同意登录屏幕。

背景

我们的项目是建立在electron的基础上搭配micro-app微前端（基座）嵌入各个模块子应用（react脚手架创建的web应用）的搭配模式。

同意按钮使用的第三方插件是react-google-login（用来对接谷歌登录api以及提供统一的登录按钮样式的组件），gapi-script（谷歌的api包）需要初始化。

奇怪的现象

我们的应用是起一个微服务基座对接electron（客户端）的内容，同时再起一个本地子应用服务去实现的谷歌登录按钮（内嵌点击成功和失败回调等api），单独在子应用的服务里加载react-google-login组件按钮，可以正常点击，但是在基座+electron应用服务内（合称桌面客户端）按钮是置灰的，经过多次排查，发现是京东micro-app微前端的沙箱导致的该问题，验证方法是关闭沙箱代理可复现。

定位原因

写了个微前端demo，通过查看发现，点击登录同意按钮后，会自发地异步调用google的多个资源接口，包括字体、JS文件等等。其中有2个js文件是有依赖的，前者的执行依赖后者，且js文件中有多处对window进行了修改，我们知道基座通过proxy代理的方式把全局对象管控了，因此无法直接修改window，与此同时子应用是在沙箱环境中点击的按钮触发请求资源。所以这个时候有依赖的js文件之间获取到的window是undefined，因此报错。

但是我们项目是需要沙箱的，这要怎么办呢？

这边有个前提，我们登录获得同意后，可以拿到部分用户信息例如邮箱、accessToken等信息，这个时候我们还需要通知桌面客户端人员帮我们进行数据处理，他需要拿着这个accessToken去获取谷歌的其他权限。

为了跳过沙箱的限制，我们有以下方案：

1、在桌面端打开一个窗体（electron方式），跳过基座的对子应用的沙箱隔离，这种方式的缺陷是，会导致新开窗体的进程无法被管控，也就是进程无法被kill
2、使用iframe，但是这种方式会丢失全局桥接的对象jsbridge，需要使用类似postMessage消息通知的方式重新获取全局桥接对象
3、采用window.open方式打开一个新的页面（这种方式同样会丢失全局对象，所以需要后续的操作），再以请求或者客户端的协议地址方式进行访问，通知到接口或者协议拦截模块，如果是接口，则创建前端轮询，查到数据就断开链接，关闭轮询。如果是走的客户端协议地址访问的，则由这些拦截模块帮助我们进行调用桌面端特定的方法进行传递用户授权参数给到桌面端的同学。（为什么这么绕呢？因为我们打开的啥新的窗体，他不在桌面容器中，没有宿主容器的同时，也缺少全局桥接对象jsbridge，所以我们需要想办法传参给桌面端）。