How does electron implement QQ quick login?

The content of this article is about how electron can realize QQ quick login? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I originally thought not to write this function, but the customer had to log in via QQ! I just had no choice but to write it, and by the way, I wrote an article!
There are two questions before writing:
1: Open the qq authorization page and click the link on the page to open another page! .....
2: It is difficult to judge whether the authorization is successful

But there is an idea in my mind, Electron is similar to a browser. Since it is a browser, it can definitely prevent link clicks and determine the status!
Let’s go read the documentation!!!

I recommend everyone to go to w3c to see the document comparison It is complete and fast and the documentation is relatively new

https://electronjs.org/docs The response speed here is relatively slow. Many of the documents are very old and the parameters are also invalid!!!

Let’s get back to the legend of qq login!

The backend is implemented using PHP, which is not difficult. The main thing is some processing on the client side.

Place the qq login button

<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>

Problem Solving

Clicking a link will open a new window

Solve the problem of opening the qq authorization page and clicking the link in the page will open another window using webContents The new-window event organizes the default event to call Shell and open it with the default browser!

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

It is difficult to judge whether it is successful after authorization

After seeing this problem, I I thought of a word that was Response and code, and then I searched for it and found it in webContents! did-get-redirect-request event!
But we can’t use it directly and we have to click Authorize before using it

     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 event explanation:
The event is emitted when the user or page wants to start navigation. It can occur when the window.location object changes or when the user clicks a link in the page.
When This event will not be emitted when using the API (such as webContents.loadURL and webContents.back) to initiate navigation programmatically.
It will also not occur when jumping within the page, such as clicking an anchor link or updating the window. location.hash. The purpose can be achieved using the did-navigate-in-page event

did-get-response-details Event explanation:
The event is emitted when detailed information about the requested resource is available. status identification Get the socket link to download the resource.

After getting these two, we can write code!
After clicking Authorize, the authorization page will jump to a callback address of our server and perform an operation there. For example, getting the user token is messy! Then return the generated token to the client!

But please note that the data returned by the server cannot be parsed by the client. You can use: findInPage to query the returned content!
But I didn't do it

Because the did-get-response-details event returned:
status, newURL, originalURL, httpResponseCode, requestMethod, referrer, headers eight parameters
In the end we only need When it is judged that httpResponseCode is 200, the parameters in the header are returned from the main process to the rendering process
The approximate data is as follows:

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"]

Among the above parameters, msg request_code token is a custom parameter generated by the server code !

It’s easy to get these!

The rendering process gets the token in the header and gets the user information based on the token. After that, it’s very simple!!!

Main process code:

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();
            }
        })
    });
});

Notes

The returned header contains an array. This way of writing is really cheating! You have to write a header.token[0] I don’t like this way of writing but I can’t help it

The above is the detailed content of How does electron implement QQ quick login?. For more information, please follow other related articles on the PHP Chinese website!