electron 微信扫码登录（第三方登录）

前言

  有朋友可能会好奇，既然electron的前端代码和web网页端的代码看起来大概是一样的，那应该是web端怎么写第三方登录，electron就怎么写。
  但是实际上electron的前端环境和web端有很大差异，比如集成了node环境和electron自带很多的原生能力。而笔者在写electron端的第三方登录时，也遇到了一个关键的问题，导致完成这个功能居然花了2天时间，故特此记录作为以后使用的一个参考。

遇到的问题

  前言中提到的关键问题，其实是在线上环境时，electron打包后的前端静态资源是在本地，而web端前端静态资源服务是在远程的。而以前我们在写web端第三方登录时，将静态资源部署到线上，然后在请求code值时，写入我们想要定向的地址，之后步骤也很简单。
  但是由于electron打包后的前端静态资源是在本地，在请求code值时，定向地址无法定向到前端服务。

解决的办法

  笔者在尝试了数种方式，得到了两种可行的方案。其中第一种是使用electron原生能力，捕获iframe定向地址，经过测试可行。

1、WebRequest 捕获定向地址

有关WebRequest 的介绍
https://www.electronjs.org/docs/latest/api/web-request/

  其实在内嵌的微信iframe网络请求时，可以在网络请求上看到在手机验证后，iframe发起了对授权域的get请求，而这个请求url上是带有code值的。

  而electron的session类的webRequest类提供了onBeforeSendHeaders接口，该接口可以在网络请求发送前捕获请求信息。所以利用这个功能，我们就可以捕获到url，然后利用正则表达式获取code值了，之后就无非是和web端差不多了。不过需要注意的是session需要在主进程中使用，并且需要在渲染进程的app-ready事件中调用。
  这个方法非常奇妙，因为甚至不需要部署远程的静态资源服务，发挥了pc端的特性。

2、使用iframe监听url变化

  这个方案是通过监听iframe的url变化去获取定向地址，但是需要部署远程服务，而因为无刷新，在web端应该是一个不错的方案。

如果有不懂得问题或者有更好的解决办法，请留言或者私信我。如果这篇为章对您有帮助的话，不妨点个赞吧~。