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 相关文章推荐
修改file按钮的默认样式实现代码
Apr 23 Javascript
js跳转页面方法总结
Jan 29 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
jQuery动态添加
Apr 07 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
Vue关于数据绑定出错解决办法
May 15 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
js实现二级联动简单实例
Jan 11 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 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数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
JavaScript:Array类型全面解析
2016/05/19 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Python内置函数locals和globals对比
2020/04/28 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
服装厂厂长职责
2013/12/16 职场文书
师德个人剖析材料
2014/02/02 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python