electron實現(xiàn)qq快捷登錄的方法示例

更新時間：2018年10月22日 11:33:01 作者：李昊天

這篇文章主要介紹了electron實現(xiàn)qq快捷登錄的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

之前本來想不寫這個功能的,結(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 事件組織默認事件調(diào)用Shell利用默認瀏覽器打開就行了!

  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事件解釋:

當用戶或 page 想要開始導(dǎo)航的時候發(fā)出事件.它可在當 window.location 對象改變或用戶點擊 page 中的鏈接的時候發(fā)生.

當使用 api(如 webContents.loadURL 和 webContents.back) 以編程方式來啟動導(dǎo)航的時候，這個事件將不會發(fā)出.

它也不會在頁內(nèi)跳轉(zhuǎn)發(fā)生，例如點擊錨鏈接或更新 window.location.hash.使用 did-navigate-in-page 事件可以達到目的

did-get-response-details 事件解釋:

當有關(guān)請求資源的詳細信息可用的時候發(fā)出事件. status 標識了 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ù)從主進程返回給渲染進程
大概的數(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ù)器代碼生成的!

能得到這些就好辦了!

渲染進程拿到header中的token根據(jù) 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里面是一個數(shù)組這種寫法真是坑爹啊! 還要去寫一個 header.token[0] 這種寫法有點不喜歡但是沒法子!

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: