전자는 QQ 빠른 로그인을 어떻게 구현합니까?

이 글의 내용은 전자가 어떻게 QQ 빠른 로그인을 실현할 수 있는지에 관한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

원래는 이 기능을 안쓰려고 했는데 결과적으로 QQ로 로그인을 해야해서 쓸 수 밖에 없어서 글을 쓰게 되네요!
질문이 2가지 있습니다. 작성 전:
1: QQ 승인 페이지를 열고 해당 페이지를 클릭하면 링크가 다른 페이지로 열립니다 .....
2: 승인 후에는 성공 여부를 판단하기 어렵습니다

근데 내 마음속에 있는 아이디어 하나 전자는 브라우저와 비슷하기 때문에 괜찮을 것입니다. 링크 클릭을 차단하는 것도 상태를 확인할 수 있습니다!
문서로 가보세요!!! 문서를 읽는 것이 더 완전하고 빠릅니다. 문서가 비교적 새롭습니다

https://electronjs.org/docs입니다. 응답 속도가 상대적으로 느리고 매개변수가 잘못되었습니다. !!

정확히 말하면 QQ로그인이라고 하네요!

백엔드는 PHP를 사용하여 구현됩니다. 중요한 것은 클라이언트에서 일부 처리하는 것입니다.

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() {
            //请求服务器获取授权页面和参数
                this.$http.get('xxxxx')
                    .then((result) => {
                        if (result.data.status === 1) {
                            this.$electron.ipcRenderer.send('qqLogin', {url: result.data.data});
                        }
                    })
                    .catch()
            },
        }
    }
</script>

문제 해결

링크를 클릭하면 새 창이 열립니다

qq 인증 페이지가 열리는 문제를 해결하고 해당 페이지의 링크를 클릭하면 다른 창이 열립니다. webContents의 새 창 이벤트를 사용하여 정리하세요. 기본 이벤트 호출 기본 브라우저로 Shell을 열면 됩니다!

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

인증 성공 여부를 판단하기 어렵습니다

이 문제를 보고 Response와 code라는 단어가 생각났는데, webContents에서 검색해서 찾았습니다! 하지만 직접 사용할 수는 없습니다. 인증을 클릭한 후 사용해야 합니다.

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

이벤트 설명:
이벤트가 발생합니다. 사용자 또는 페이지가 탐색을 시작하려고 할 때 window.location 객체가 변경되거나 사용자가 페이지의 링크를 클릭할 때 발생할 수 있습니다.

이 이벤트는 API(예: webContents.loadURL 및 webContents)를 사용할 때 발생하지 않습니다. .back)을 사용하여 프로그래밍 방식으로 탐색을 시작합니다.

It 앵커 링크를 클릭하거나 window.location.hash를 업데이트하는 등 페이지 내로 이동하지 않습니다. did-navigate-in-page 이벤트를 사용하면 목적을 달성할 수 있습니다

did- get-response-details 이벤트 설명:
요청이 관련된 경우 리소스의 세부 정보를 사용할 수 있을 때 이벤트를 내보냅니다. 상태는 리소스를 다운로드할 수 있는 소켓 링크를 식별합니다.

이 두 가지를 얻은 후 코드를 작성할 수 있습니다.
인증을 클릭하면 인증 페이지가 서버의 콜백으로 이동합니다. 주소는 사용자 토큰 획득과 같은 작업을 수행합니다. 그러면 생성된 토큰이 클라이언트에 반환됩니다!

하지만 데이터가 반환된다는 점에 유의하세요. 서버에서는 클라이언트가 구문 분석할 수 없습니다. findInPage를 사용하여 반환된 콘텐츠를 쿼리할 수 있습니다!
하지만 저는 그렇게 하지 않았습니다

did-get-response-details 이벤트가 반환되었기 때문에:
status, newURL, originalURL, httpResponseCode, requestMethod,referrer,header8개의 매개변수

결국 우리는 httpResponseCode가 200일 때만 판단하고 헤더를 설정하면 됩니다. 내부 매개변수는 메인 프로세스에서 렌더링 프로세스로 반환됩니다

대략적인 데이터는 다음과 같습니다:

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 토큰은 서버 코드에 의해 생성되는 커스텀 매개변수입니다!
이런 것들은 쉽게 얻을 수 있습니다!

Rendering 프로세스는 헤더에서 토큰을 가져오고 토큰을 기반으로 사용자 정보를 가져옵니다. 아주 간단합니다!!!

주요 프로세스 코드:

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

Note반환된 헤더에 배열이 포함되어 있습니다. 이런 방식은 정말 속임수입니다. ] 이런 식의 글은 싫지만 어쩔 수가 없어요

위 내용은 전자는 QQ 빠른 로그인을 어떻게 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!