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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 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
8个出色的WordPress SEO插件收集
2011/02/26 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
Javascript模块模式分析
2008/05/16 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
python取均匀不重复的随机数方式
2019/11/27 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
自我管理的活动方案
2014/08/25 职场文书
社区综治工作汇报
2014/10/27 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
会议主持词开场白
2015/05/28 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Python List remove()实例用法详解
2021/08/02 Python
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技
MySQL索引失效场景及解决方案
2022/07/23 MySQL