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

2024-05-16 11:04:00

前言

有朋友可能会好奇，既然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端应该是一个不错的方案。

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

electron 微信扫码登录（第三方登录）相关推荐

electron微信扫码登录
[踩坑记]在electron中使用webview加载第三方登录页面,若页面重定向的网址非我们想要的,如何拉起浏览器去加载?_Wonder233的学习博客-程序员宅基地 - 程序员宅基地 electro ...
网站通过手机微信扫码关注直接登录系统--java版
一.场景 1.有自己的一个网站: 2.点击登录按钮后,弹出公司公众号二维码: 3.用户扫码后,若之前没有关注公众号,需要点击关注公众号,然后直接登录系统: 4.若用户扫码后,之前已经关注过公众号,则直 ...
PC 端微信扫码注册和登录
一.前言先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网 ...
wechat-0051,微信公众号，第三方登录—扫码绑定
声明:这边所谓的第三方登录,不是通过网页授权的方式,而是利用生成带参数的二维码,将微信号和平台账号绑定实现.如果你要做的是授权登录,请查看 https://blog.csdn.net/wrongyao ...
wechat-0052,微信公众号，第三方登录—扫码登录
声明:这边所谓的第三方登录,不是通过网页授权的方式,而是利用生成带参数的二维码,将微信号和平台账号绑定实现.如果你要做的是授权登录,请查看 https://blog.csdn.net/wrongyao ...
【网课平台】Day10.对接第三方：实现微信扫码登录
文章目录一.需求:微信扫码登录 1.接口文档 2.开发环境准备 3.接入分析 4.接口定义 5.申请令牌 6.查询用户信息 7.保存用户信息一.需求:微信扫码登录 (和第三方对接的流程) 1.接口 ...
第三方登录之微信扫码登录
文章目录 1. 申请微信接入: 2. 项目环境搭建: 3.后端Controller接口: 4.HTML页面代码: 5.测试结果: 6.补充说明: 小伙伴们有各种疑问可以去参考官方文档进行详细的学习下 ...
Vue+abp微信扫码登录
最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...
微信开放平台开发——网页微信扫码登录（OAuth2.0）
1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...
项目整合微信扫码登录功能
项目整合微信登录功能一.准备工作 https://open.weixin.qq.com 1.注册 2.邮箱激活 3.完善开发者资料 4.开发者资质认证准备营业执照,1-2个工作日审批.300元 5 ...

最新文章

热门文章