摘要：之前本來(lái)想不寫這個(gè)功能的結(jié)果客戶死活要登錄實(shí)在沒(méi)辦法就寫了順便寫個(gè)文章在寫之前有兩個(gè)問(wèn)題打開(kāi)授權(quán)頁(yè)面點(diǎn)擊頁(yè)面中的鏈接會(huì)又打開(kāi)一個(gè)頁(yè)面授權(quán)之后是否成功很難去判斷不過(guò)腦海中有一個(gè)想法就是就是一個(gè)類似于瀏覽器一樣既然是瀏覽器那肯定可以阻止鏈接的點(diǎn)

之前本來(lái)想不寫這個(gè)功能的,結(jié)果客戶死活要qq登錄! 實(shí)在沒(méi)辦法就寫了,順便寫個(gè)文章!
在寫之前有兩個(gè)問(wèn)題:
1: 打開(kāi)qq授權(quán)頁(yè)面點(diǎn)擊頁(yè)面中的鏈接會(huì)又打開(kāi)一個(gè)頁(yè)面! .....
2: 授權(quán)之后是否成功很難去判斷

不過(guò)腦海中有一個(gè)想法就是,electron就是一個(gè)類似于瀏覽器一樣,既然是瀏覽器那肯定可以阻止鏈接的點(diǎn)擊 也可以判斷狀態(tài)!
就去啃文檔了!!!

推薦大家去w3c去看文檔 比較全 而且速度較快 文檔也比較新: https://www.w3cschool.cn/elec...

https://electronjs.org/docs 這里面的響應(yīng)速度比較慢 里面很多文檔都很久了 參數(shù)也有失效的!!!

言歸正傳 說(shuō)qq登錄!

后端是使用PHP實(shí)現(xiàn)的 沒(méi)什么難度,主要的就是客戶端的一些處理!

解決打開(kāi)qq授權(quán)頁(yè)面點(diǎn)擊頁(yè)面中的鏈接會(huì)又打開(kāi)一個(gè)窗口的問(wèn)題 使用webContents 的 new-window 事件 組織默認(rèn)事件 調(diào)用Shell利用默認(rèn)瀏覽器打開(kāi)就行了!

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

到這個(gè)問(wèn)題后我就想到一個(gè)詞 那就是 Response 和 code 然后就去搜索了嘛 結(jié)果在 webContents找到了! did-get-redirect-request 事件 !
但是我們不能直接使用他 要在點(diǎn)擊授權(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 想要開(kāi)始導(dǎo)航的時(shí)候發(fā)出事件.它可在當(dāng) window.location 對(duì)象改變或用戶點(diǎn)擊 page 中的鏈接的時(shí)候發(fā)生.
當(dāng)使用 api(如 webContents.loadURL 和 webContents.back) 以編程方式來(lái)啟動(dòng)導(dǎo)航的時(shí)候，這個(gè)事件將不會(huì)發(fā)出.
它也不會(huì)在頁(yè)內(nèi)跳轉(zhuǎn)發(fā)生， 例如點(diǎn)擊錨鏈接或更新 window.location.hash.使用 did-navigate-in-page 事件可以達(dá)到目的

did-get-response-details 事件解釋:
當(dāng)有關(guān)請(qǐng)求資源的詳細(xì)信息可用的時(shí)候發(fā)出事件. status 標(biāo)識(shí)了 socket鏈接來(lái)下載資源.

拿到這兩個(gè)之后我們就可以寫代碼啦!
在點(diǎn)擊授權(quán)之后授權(quán)頁(yè)面會(huì)跳轉(zhuǎn)到我們服務(wù)器的一個(gè)回調(diào)地址 在里面做一個(gè)操作 比如獲取用戶token亂七八糟的! 之后將生成的token返回給客戶端!

但是要注意這里服務(wù)端返回的數(shù)據(jù)客戶端不能解析 大家可以使用:findInPage 去查詢返回的內(nèi)容!
但是我沒(méi)去這么做

因?yàn)?did-get-response-details 事件返回了:
status,newURL,originalURL,httpResponseCode,requestMethod,referrer,headers 八個(gè)參數(shù)
最后我們只需要判斷httpResponseCode 是200的時(shí)候 將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獲取用戶信息這之后就簡(jiǎ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里面是一個(gè)數(shù)組 這種寫法真是坑爹啊! 還要去寫一個(gè) header.token[0] 這種寫法有點(diǎn)不喜歡 但是沒(méi)法子!