Comment Electron implémente-t-il la connexion rapide QQ ?

Le contenu de cet article explique comment Electron peut réaliser une connexion rapide QQ ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Je ne voulais pas écrire cette fonction avant, mais le client devait se connecter via QQ. Je n'avais pas d'autre choix que de l'écrire, et j'ai d'ailleurs écrit un article ! >Il y a deux questions avant d'écrire :
1 : Ouvrez la page d'autorisation qq et cliquez sur le lien sur la page pour ouvrir une autre page.....
2 : Il est difficile de juger si l'autorisation est réussie ! ou pas

Mais il y a une idée dans mon esprit, Electron est similaire à un navigateur puisqu'il s'agit d'un navigateur, il peut définitivement empêcher le clic du lien et déterminer le statut

C'est parti ! lisez le document !!!

Je recommande à tout le monde d'aller sur w3c pour voir la comparaison des documents. Elle est complète et rapide La documentation est également relativement nouvelle

https://electronjs.org/. docs. La vitesse de réponse ici est relativement lente. Beaucoup de documents sont très anciens et les paramètres sont également invalides !!!

Plus près de chez nous, on dit que QQ login ! le backend est implémenté en PHP. Ce n'est pas difficile. L'essentiel est un certain traitement sur le client

Placez le bouton de connexion QQ

. Problème résolu

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

Cliquer sur un lien ouvrira une nouvelle fenêtre

Résoudre le problème d'ouverture de la page d'autorisation QQ et cliquer sur un lien sur la page ouvrira une autre fenêtre. L'événement window de webContents organise l'événement par défaut pour appeler Shell et l'ouvrir avec le navigateur par défaut

Il est difficile de juger si l'autorisation est réussie ou non

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

à ceci Après avoir posé la question, j'ai pensé à un mot, qui est Réponse et code, puis je l'ai recherché. Le résultat a été trouvé dans l'événement did-get-redirect-request Mais nous pouvons. Nous devons cliquer sur Autoriser avant de l'utiliser. Il

explication de l'événement de navigation :

L'événement est émis lorsque l'utilisateur ou la page souhaite démarrer la navigation. être utilisé lorsque l'objet window.location change ou lorsque l'utilisateur clique sur un lien dans la page Se produit.

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

Cet événement ne sera pas émis lors de l'utilisation de l'API (telle que webContents.loadURL et webContents.back) pour lancer la navigation par programme.

Cela ne se produira pas non plus lorsque vous sauterez dans la page, par exemple en cliquant sur le lien d'ancrage ou en mettant à jour window.location.hash. Utilisez l'événement did-navigate-in-page pour atteindre l'objectif

did-get. -explication de l'événement réponse-détails :
Lorsque les détails sur la ressource demandée sont disponibles, les événements sont émis le moment venu, le statut identifie le lien de socket pour télécharger les ressources.

Après avoir obtenu ces deux éléments, nous pouvons écrire du code. !
Après avoir cliqué sur Autoriser, la page d'autorisation passera à un rappel sur notre serveur. L'adresse y effectue une opération, comme l'obtention du jeton utilisateur ! Ensuite, le jeton généré est renvoyé au client !

Mais veuillez noter que les données renvoyées par le serveur ne peuvent pas être analysées par le client. Vous pouvez utiliser : findInPage pour interroger le contenu renvoyé !
Mais je ne l'ai pas fait

Parce que le did-get- L'événement de détails de réponse renvoyé :
status, newURL, originalURL, httpResponseCode, requestMethod, referrer, headers huit paramètres

Enfin, il nous suffit de déterminer quand le httpResponseCode est 200 et de renvoyer les paramètres dans l'en-tête du processus principal à le processus de rendu

Les données approximatives sont comme ceci :


Parmi les paramètres ci-dessus, le jeton msg request_code est Les paramètres personnalisés sont générés par le code du serveur

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

C'est facile à faire ! récupérez-les !

Le processus de rendu récupère le jeton dans l'en-tête et obtient les informations utilisateur en fonction du jeton !!

Code du processus principal :

Remarque :

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

L'en-tête renvoyé contient un tableau. Cette méthode d'écriture est vraiment de la triche. De plus, je dois écrire un header.token[0]. Je n'aime pas cette façon d'écrire mais je n'y arrive pas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!