Wie implementiert Electron die QQ-Schnellanmeldung?

Der Inhalt dieses Artikels befasst sich mit der Frage, wie Elektronen eine QQ-Schnellanmeldung realisieren können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Ich wollte diese Funktion vorher nicht schreiben, aber der Kunde musste sich über QQ anmelden. Ich hatte keine andere Wahl, als sie zu schreiben, und ich habe übrigens einen Artikel geschrieben! >Vor dem Schreiben gibt es zwei Fragen:
1: Öffnen Sie die QQ-Autorisierungsseite und klicken Sie auf den Link auf der Seite, um eine weitere Seite zu öffnen .....
2: Es ist schwierig zu beurteilen, ob die Autorisierung erfolgreich ist oder nicht

Aber es gibt eine Idee in meinem Kopf, Electron ähnelt einem Browser, er kann das Klicken des Links definitiv verhindern und den Status ermitteln

Los geht's! Lesen Sie das Dokument!!!

Ich empfehle jedem, zu w3c zu gehen, um den Dokumentenvergleich anzusehen. Es ist vollständig und schnell. Die Dokumentation ist auch relativ neu

https://electronjs.org/ Dokumente. Die Antwortgeschwindigkeit ist hier relativ langsam und die Parameter sind auch ungültig!!!

Näher zu Hause heißt es, dass QQ-Login!

Die Das Backend wird mit PHP implementiert und ist nicht schwierig. Die Hauptsache ist eine gewisse Verarbeitung auf dem Client.

Platzieren Sie den QQ-Anmeldebutton

<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 gelöst

Durch Klicken auf einen Link wird ein neues Fenster geöffnet

Wenn Sie das Problem lösen, die QQ-Autorisierungsseite zu öffnen und auf einen Link auf der Seite zu klicken, wird mithilfe des WebContents-Ereignisses „Neues Fenster“ Organisieren ein weiteres Fenster geöffnet das Standardereignis, um Shell aufzurufen und mit dem Standardbrowser zu öffnen!

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

Es ist schwierig zu beurteilen, ob die Autorisierung erfolgreich ist oder nicht

Nachdem ich dieses Problem gesehen habe, Ich habe an ein Wort gedacht, das Antwort und Code war, und dann habe ich danach gesucht und es in „did-get-redirect-request“ gefunden.

Aber wir können es nicht direkt verwenden und müssen auf „Autorisieren“ klicken bevor Sie es verwenden

     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-Ereigniserklärung:

Das Ereignis wird ausgegeben, wenn der Benutzer oder die Seite mit der Navigation beginnen möchte. Es kann auftreten, wenn sich das window.location-Objekt ändert oder wenn der Benutzer auf einen Link klickt in der Seite.
Wann Dieses Ereignis wird nicht ausgegeben, wenn die Navigation programmgesteuert über die API initiiert wird (z. B. webContents.loadURL und webContents.back).
Es tritt auch nicht bei Seitensprüngen auf, z. B. beim Klicken auf eine Ankerlink oder Aktualisierung des Fensters. location.hash.Verwenden Sie das Ereignis „did-navigate-in-page“, um den Zweck zu erreichen.

Erklärung zum Ereignis „did-get-response-details“:

Das Ereignis wird ausgegeben, wenn es detailliert ist Informationen zur angeforderten Ressource sind verfügbar. Rufen Sie den Socket-Link zum Herunterladen der Ressource ab.

Nachdem wir diese beiden erhalten haben, können wir Code schreiben!

Nachdem Sie auf „Autorisieren“ geklickt haben, springt die Autorisierungsseite zu einem Rückruf Geben Sie beispielsweise die Adresse unseres Servers ein und führen Sie dort eine Operation aus. Geben Sie dann das generierte Token an den Client zurück! Bitte beachten Sie, dass die vom Server zurückgegebenen Daten nicht analysiert werden können Client. Sie können: findInPage verwenden, um den zurückgegebenen Inhalt abzufragen!
Aber ich habe es nicht getan

Weil das Ereignis „did-get-response-details“ Folgendes zurückgegeben hat:
status, newURL, originalURL, httpResponseCode, requestMethod, Referrer, Header acht Parameter

Am Ende brauchen wir nur Wenn beurteilt wird, dass httpResponseCode 200 ist, werden die Parameter im Header vom Hauptprozess an den Renderprozess zurückgegeben

Die ungefähren Daten sind wie folgt Dies:

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

Unter den oben genannten Parametern ist msg request_code token ein benutzerdefinierter Parameter, der vom Servercode generiert wird!
Es wird einfach sein, wenn Sie diese erhalten können!

Der Rendering-Prozess ruft das Token im Header ab, um die Benutzerinformationen basierend auf dem Token abzurufen!!!

Hauptprozesscode:

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

AnmerkungenDer zurückgegebene Header ist ein Array. Diese Schreibweise ist wirklich Betrug! Sie müssen einen Header schreiben.token[0] Ich mag diese Schreibweise nicht, aber ich kann nicht helfen es

Das obige ist der detaillierte Inhalt vonWie implementiert Electron die QQ-Schnellanmeldung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!