electron实现qq快捷登录的方法示例


Posted in Javascript onOctober 22, 2018

之前本来想不写这个功能的,结果客户死活要qq登录! 实在没办法就写了,顺便写个文章!

在写之前有两个问题:

1: 打开qq授权页面点击页面中的链接会又打开一个页面! .....
2: 授权之后是否成功很难去判断

不过脑海中有一个想法就是,electron就是一个类似于浏览器一样,既然是浏览器那肯定可以阻止链接的点击 也可以判断状态!
就去啃文档了!!!

推荐大家去w3c去看文档 比较全 而且速度较快 文档也比较新:https://www.w3cschool.cn/electronmanual/

https://electronjs.org/docs 这里面的响应速度比较慢 里面很多文档都很久了 参数也有失效的!!!

言归正传 说qq登录!

后端是使用PHP实现的 没什么难度,主要的就是客户端的一些处理!

演示

electron实现qq快捷登录的方法示例

放置qq登录按钮

<template>
  <div>

    <button @click="qqLogin">qq登录</button>
  </div>
</template>

<script>
  export default {
    name: "home",
    mounted() {
      this.$electron.ipcRenderer.on('reply', (e, data) => {
        console.log(data)
        let httpCode = data.request_code[0];
        if (httpCode === '1') {
          alert(data.token[0])
        }
      })
    },
    methods: {
      qqLogin() {
      //请求服务器获取授权页面和参数
        this.$http.get('xxxxx')
          .then((result) => {
            if (result.data.status === 1) {
              this.$electron.ipcRenderer.send('qqLogin', {url: result.data.data});
            }
          })
          .catch()
      },
    }
  }
</script>

问题解决

点击a链接会打开一个新窗口

解决打开qq授权页面点击页面中的链接会又打开一个窗口的问题 使用webContents 的 new-window 事件 组织默认事件 调用Shell利用默认浏览器打开就行了!

loginWindow.webContents.on('new-window', (event, url) => {
    event.preventDefault();
    shell.openExternal(url);
  });

授权后是否成功很难去判断

到这个问题后我就想到一个词 那就是 Response 和 code 然后就去搜索了嘛 结果在 webContents找到了! did-get-redirect-request 事件 !

但是我们不能直接使用他 要在点击授权之后再去使用他

loginWindow.webContents.on('will-navigate', (e, url,) => {
    content.on('did-get-response-details', (e, status, url, originalURL, httpResponseCode, requestMethod, referrer, header) => {
      if (httpResponseCode === 200) {
        event.sender.send('reply', header);
        // loginWindow.close();
      }
    })
  });

will-navigate事件解释:

当用户或 page 想要开始导航的时候发出事件.它可在当 window.location 对象改变或用户点击 page 中的链接的时候发生.

当使用 api(如 webContents.loadURL 和 webContents.back) 以编程方式来启动导航的时候,这个事件将不会发出.

它也不会在页内跳转发生, 例如点击锚链接或更新 window.location.hash.使用 did-navigate-in-page 事件可以达到目的

did-get-response-details 事件解释:

当有关请求资源的详细信息可用的时候发出事件. status 标识了 socket链接来下载资源.

拿到这两个之后我们就可以写代码啦!

在点击授权之后授权页面会跳转到我们服务器的一个回调地址 在里面做一个操作 比如获取用户token乱七八糟的! 之后将生成的token返回给客户端!

但是要注意这里服务端返回的数据客户端不能解析 大家可以使用:findInPage 去查询返回的内容!

但是我没去这么做

因为 did-get-response-details 事件返回了:

status,newURL,originalURL,httpResponseCode,requestMethod,referrer,headers 八个参数
最后我们只需要判断httpResponseCode 是200的时候 将header里面的参数从主进程返回给渲染进程
大概的数据是这样的:

access-control-allow-credentials:["true"]
access-control-allow-headers:["token,Origin, X-Requested-With, Content-Type, Accept"]
access-control-allow-methods:["POST,GET,DELETE,PUT"]
cache-control:["no-store, no-cache, must-revalidate"]
connection:["Keep-Alive"]
content-type:["application/json; charset=utf-8"]
date:["Sun, 21 Oct 2018 14:02:20 GMT"]
expires:["Thu, 19 Nov 1981 08:52:00 GMT"]
keep-alive:["timeout=5, max=100"]
request_code:["1"]
msg:["登录成功"]
token:["xxxxxxxx"]
pragma:["no-cache"]
server:["Apache/2.4.23 (Win32) OpenSSL/1.0.2j mod_fcgid/2.3.9"]
set-cookie:["PHPSESSID=6b0esq5jd8vloess2c96ove86s; path=/; HttpOnly"]
transfer-encoding:["chunked"]
x-powered-by:["PHP/7.2.1"]

以上参数中 msg request_code token为自定义参数 是服务器代码生成的!

能得到这些就好办了!

渲染进程拿到header中的token根据 token获取用户信息这之后就简单的很了!!!

主进程代码:

import {ipcMain, BrowserWindow, shell} from 'electron'

ipcMain.on('qqLogin', (event, data) => {
  const loginWindow = new BrowserWindow({
    width: 750,
    height: 450,
    resizable: false,
    minimizable: false,
    maximizable: false,
    webPreferences: {
      devTools: false,
    }
  });

  loginWindow.setMenu(null);

  loginWindow.loadURL(data.url);
  
  loginWindow.webContents.on('new-window', (event, url) => {
    event.preventDefault();
    shell.openExternal(url);
  });
  const content = loginWindow.webContents;

  content.on('will-navigate', (e, status, url,) => {
    content.on('did-get-response-details', (e, status, url, originalURL, httpResponseCode, requestMethod, referrer, header) => {
      if (httpResponseCode === 200) {
        event.sender.send('reply', header);
        loginWindow.close();
      }
    })
  });
});

注意点

返回的header里面是一个数组 这种写法真是坑爹啊! 还要去写一个 header.token[0] 这种写法有点不喜欢 但是没法子!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
javascript:以前写的xmlhttp池,代码
May 18 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
vue环境搭建简单教程
Nov 07 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 #Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 #Javascript
vue 配置多页面应用的示例代码
Oct 22 #Javascript
微信小程序引用iconfont图标的方法
Oct 22 #Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 #Javascript
js异步上传多张图片插件的使用方法
Oct 22 #Javascript
js实现动态添加上传文件页面
Oct 22 #Javascript
You might like
php代码架构的八点注意事项
2016/01/25 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Python实现保证只能运行一个脚本实例
2015/06/24 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
django中cookiecutter的使用教程
2020/12/03 Python
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
简历自我评价模版
2014/01/31 职场文书
篮球比赛口号
2014/06/10 职场文书
节水口号标语
2014/06/19 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
自荐信怎么写
2015/03/04 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
个人催款函范文
2015/06/24 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python