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 相关文章推荐
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
vue+canvas实现移动端手写签名
May 21 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/11/07 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
用Python实现读写锁的示例代码
2018/11/05 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
为什么说python更适合树莓派编程
2020/07/20 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
毕业生的自我评价分享
2013/12/18 职场文书
工艺员岗位职责
2014/02/11 职场文书
后勤主管岗位职责
2014/03/01 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
python实现剪贴板的操作
2021/07/01 Python