electron 微信扫码登录(第三方登录) 您所在的位置:网站首页 京东扫码登录后怎么取消授权 electron 微信扫码登录(第三方登录)

electron 微信扫码登录(第三方登录)

2024-07-17 09:38| 来源: 网络整理| 查看: 265

前言

  有朋友可能会好奇,既然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值的。 iframe发起了对授权域的get请求,而这个请求url上是带有code值的。

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

2、使用iframe监听url变化

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

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


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

      专题文章
        CopyRight 2018-2019 实验室设备网 版权所有