electron如何實現qq的快捷登入？

本篇文章帶給大家的內容是關於electron如何實現qq的快捷登入？有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

之前本來想不寫這個功能的,結果客戶死活要qq登入! 實在沒辦法就寫了,順便寫個文章!
在寫之前有兩個問題:
1: 打開qq授權頁面點擊頁面中的連結會又打開一個頁面! .....
2: 授權之後是否成功很難去判斷

#不過腦海中有一個想法就是, electron就是一個類似瀏覽器一樣,既然是瀏覽器那肯定可以阻止連結的點擊也可以判斷狀態!
就去啃文檔了!!!

推薦大家去w3c去看文件比較全而且速度較快文檔也比較新

https://electronjs.org/docs 這裡面的回應速度比較慢裡面很多文件都很久了參數也有失效的!!!

##言歸正傳說qq登入!

後端是使用PHP實現的沒什麼難度,主要的就是客戶端的一些處理.

放置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]這種寫法有點不喜歡但是沒辦法

以上是electron如何實現qq的快捷登入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！