国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

electron實現qq快捷登錄!

channg / 2814人閱讀

摘要:之前本來想不寫這個功能的結果客戶死活要登錄實在沒辦法就寫了順便寫個文章在寫之前有兩個問題打開授權頁面點擊頁面中的鏈接會又打開一個頁面授權之后是否成功很難去判斷不過腦海中有一個想法就是就是一個類似于瀏覽器一樣既然是瀏覽器那肯定可以阻止鏈接的點

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

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

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

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

言歸正傳 說qq登錄!

后端是使用PHP實現的 沒什么難度,主要的就是客戶端的一些處理!

演示

放置qq登錄按鈕


問題解決 點擊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] 這種寫法有點不喜歡 但是沒法子!

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98551.html

相關文章

  • 如何使用前端技術開發一個桌面跨端應用

    摘要:使用實現桌面應用實現離線可用很多方法,比如使用技術。還有一個好處,因為它完全基于來實現可以使用的一些新功能,那我們理論上可以在做桌面應用時順手把應用也做了。 本文將會講述一個完整的跨端桌面應用?代碼畫板?的構建,會涉及到整個軟件開發流程,從開始的設計、編碼、到最后產品成型、包裝等。 本文不僅僅是一篇技術方面的專業文章,更會有很多產品方面的設計思想和將技術轉換成生產力的思考,我將結合我自...

    shixinzhang 評論0 收藏0
  • electron仿制百度網盤客戶端2(登錄界面制作)

    摘要:效果預覽尺寸測量百度網盤客戶端的尺寸是主界面頂部開始制作下載安裝制作登錄界面首先將主界面隱藏掉只需要在主進程里面設置就可以了之后制作一個登錄界面創建一個在主進程之中引入代碼創建路由創建登錄界面樣式代碼微軟雅黑圖標下載去阿里 效果預覽 showImg(https://segmentfault.com/img/bVbizN2?w=1512&h=622); 尺寸測量 百度網盤客戶端的尺寸是:...

    劉東 評論0 收藏0
  • electron 仿制QQ登錄界面

    摘要:首先來看看的登錄界面準備開發制作一個窗口先主進程代碼暫時調用界面基本布局我們先大概做一個這樣的界面頁面代碼樣式代碼取消全部的外邊距和內邊距設置窗口的樣式設置手型加一個邊框調試樣式最后要刪除或者更改設置寬度必須要和主進程中設置的一樣不能大于主 首先來看看qq的登錄界面:showImg(https://segmentfault.com/img/bVbiu16?w=483&h=458); 準...

    youkede 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<