electron實現(xiàn)qq快捷登錄的方法示例
之前本來想不寫這個功能的,結(jié)果客戶死活要qq登錄! 實在沒辦法就寫了,順便寫個文章!
在寫之前有兩個問題:
1: 打開qq授權(quán)頁面點擊頁面中的鏈接會又打開一個頁面! .....
2: 授權(quán)之后是否成功很難去判斷
不過腦海中有一個想法就是,electron就是一個類似于瀏覽器一樣,既然是瀏覽器那肯定可以阻止鏈接的點擊 也可以判斷狀態(tài)!
就去啃文檔了!!!
推薦大家去w3c去看文檔 比較全 而且速度較快 文檔也比較新:https://www.w3cschool.cn/electronmanual/
https://electronjs.org/docs 這里面的響應(yīng)速度比較慢 里面很多文檔都很久了 參數(shù)也有失效的!!!
言歸正傳 說qq登錄!
后端是使用PHP實現(xiàn)的 沒什么難度,主要的就是客戶端的一些處理!
演示
放置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() {
//請求服務(wù)器獲取授權(quán)頁面和參數(shù)
this.$http.get('xxxxx')
.then((result) => {
if (result.data.status === 1) {
this.$electron.ipcRenderer.send('qqLogin', {url: result.data.data});
}
})
.catch()
},
}
}
</script>
問題解決
點擊a鏈接會打開一個新窗口
解決打開qq授權(quán)頁面點擊頁面中的鏈接會又打開一個窗口的問題 使用webContents 的 new-window 事件 組織默認(rèn)事件 調(diào)用Shell利用默認(rèn)瀏覽器打開就行了!
loginWindow.webContents.on('new-window', (event, url) => {
event.preventDefault();
shell.openExternal(url);
});
授權(quán)后是否成功很難去判斷
到這個問題后我就想到一個詞 那就是 Response 和 code 然后就去搜索了嘛 結(jié)果在 webContents找到了! did-get-redirect-request 事件 !
但是我們不能直接使用他 要在點擊授權(quán)之后再去使用他
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事件解釋:
當(dāng)用戶或 page 想要開始導(dǎo)航的時候發(fā)出事件.它可在當(dāng) window.location 對象改變或用戶點擊 page 中的鏈接的時候發(fā)生.
當(dāng)使用 api(如 webContents.loadURL 和 webContents.back) 以編程方式來啟動導(dǎo)航的時候，這個事件將不會發(fā)出.
它也不會在頁內(nèi)跳轉(zhuǎn)發(fā)生， 例如點擊錨鏈接或更新 window.location.hash.使用 did-navigate-in-page 事件可以達(dá)到目的
did-get-response-details 事件解釋:
當(dāng)有關(guān)請求資源的詳細(xì)信息可用的時候發(fā)出事件. status 標(biāo)識了 socket鏈接來下載資源.
拿到這兩個之后我們就可以寫代碼啦!
在點擊授權(quán)之后授權(quán)頁面會跳轉(zhuǎn)到我們服務(wù)器的一個回調(diào)地址 在里面做一個操作 比如獲取用戶token亂七八糟的! 之后將生成的token返回給客戶端!
但是要注意這里服務(wù)端返回的數(shù)據(jù)客戶端不能解析 大家可以使用:findInPage 去查詢返回的內(nèi)容!
但是我沒去這么做
因為 did-get-response-details 事件返回了:
status,newURL,originalURL,httpResponseCode,requestMethod,referrer,headers 八個參數(shù)
最后我們只需要判斷httpResponseCode 是200的時候 將header里面的參數(shù)從主進(jìn)程返回給渲染進(jìn)程
大概的數(shù)據(jù)是這樣的:
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"]
以上參數(shù)中 msg request_code token為自定義參數(shù) 是服務(wù)器代碼生成的!
能得到這些就好辦了!
渲染進(jìn)程拿到header中的token根據(jù) token獲取用戶信息這之后就簡單的很了!!!
主進(jìn)程代碼:
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里面是一個數(shù)組 這種寫法真是坑爹啊! 還要去寫一個 header.token[0] 這種寫法有點不喜歡 但是沒法子!
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在瀏覽器地址欄中輸入一行代碼：data:text/html, <html contenteditable> ，回車即可把瀏覽器變臨時編輯器（需要瀏覽器支持 HTML5 屬性 contenteditable）2013-11-11
這篇文章主要給大家介紹了關(guān)于基于three.js編寫的一個項目類的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
js eval函數(shù)使用,js對象和字符串互轉(zhuǎn)實例
下面小編就為大家?guī)硪黄猨s eval函數(shù)使用,js對象和字符串互轉(zhuǎn)實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
下面小編就為大家?guī)硪黄昝澜鉀QIE9瀏覽器出現(xiàn)的對象未定義問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-09-09
uniapp中scroll-view實現(xiàn)自動滾動到最底部的方法
這篇文章主要給大家介紹了關(guān)于uniapp中scroll-view實現(xiàn)自動滾動到最底部的相關(guān)資料,在uniapp日常開發(fā)的過程中經(jīng)常會有局部滾動的需求，而scroll-view組件正好可以滿足這一需求,需要的朋友可以參考下2023-10-10
今天一朋友問我 點擊一按鈕彈出一個DIV，然后要求點擊頁面其它地方隱藏這個DIV2012-07-07
前端實現(xiàn)文本超出指定行數(shù)顯示"展開"和"收起"效果詳細(xì)步驟
本文介紹如何使用JavaScript原生代碼實現(xiàn)文本折疊展開效果,并提供方法指導(dǎo)如何在Vue或React等框架中修改實現(xiàn),詳細(xì)介紹了創(chuàng)建整體框架、設(shè)置樣式及利用JS控制元素的步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
分享12個Webpack中常用的Loader(小結(jié))
這篇文章主要介紹了分享12個Webpack中常用的Loader(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JavaScript面向?qū)ο蟪绦蛟O(shè)計中對象的定義和繼承詳解
這篇文章主要介紹了JavaScript面向?qū)ο蟪绦蛟O(shè)計中對象的定義和繼承,結(jié)合實例形式詳細(xì)分析了javascript面向?qū)ο蟪绦蛟O(shè)計中對象定義、繼承、屬性、方法、深拷貝等相關(guān)概念與操作技巧,需要的朋友可以參考下2019-07-07
JavaScript利用crypto模塊實現(xiàn)加解密
crypto模塊提供了加密功能，包含對 OpenSSL 的哈希、HMAC、加密、解密、簽名、以及驗證功能的一整套封裝。本文將利用它實現(xiàn)加解密算法，需要的可以參考一下2023-02-02