Chrome 확장된 Discord OAuth2 로그인

13018 단어 webdev javascript

Discord OAuth2를 사용하여 Chrome 확장에 로그인하여 확장이 필요하지 않습니다.

이 자습서는 Google Chrome 확장의 작동 방식을 알고 있다고 가정합니다.자세한 내용.

시작하자.

한 줄의 코드에 접근하기 전에 디스코드의 OAuth2 노드를 사용할 수 있도록 개발 작업 공간을 설정해야 합니다.
https://discord.com/developers/applications/로 이동하여 로그인합니다.
오른쪽 상단의 새 응용 프로그램 을 클릭합니다.
마음대로 말해.
이 창을 열어 두십시오. 잠시 후에 이 '고객 ID' 가 필요합니다.
탐색 대상chrome://extensionsChrome 확장이 로드되었는지 확인합니다.
확장된 ID를 복사하고 Discord 개발자 포털로 돌아갑니다.
왼쪽 사이드바에서 OAuth2 링크를 클릭합니다.
"리셋 방향 추가"를 누르고 URL을 추가합니다.https://.chromiumapp.org/이전에 복사한 확장 id는 어디에 있습니까?
변경 내용 저장을 클릭해야 합니다.

Discord OAuth2를 사용하여 Chrome 확장에 로그인할 수 있습니다.

실제 크롬 확장 작업을 시작하기 전에 웹 개발 작업을 해 봅시다.

로그인 페이지와 로그아웃 페이지 두 페이지를 만듭니다.별거 아니야.

/* popup-sign-in.html */
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                width: 300px;
                height: 600px;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }

            div {
                align-items: center;
                display: flex;
                width: 100%;
                height: 100%;
                justify-content: center;
                text-align: center;
                margin: auto;
                box-sizing: border-box;
                background-color: #fcee54;
            }

            button {
                font-size: 200%;
                background-color: #f5c2e0;
                border-radius: 5px;
                border: none;
                text-align: center;
                color: black;
                font-family: monospace;
                font-weight: bold;
                transition-duration: 0.3s;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div>
            <button type="submit">Sign In</button>
        </div>
        <script src="./popup-sign-in-script.js"></script>
    </body>
</html>

/* popup-sign-out.html */
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                width: 300px;
                height: 600px;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }

            div {
                align-items: center;
                display: flex;
                width: 100%;
                height: 100%;
                justify-content: center;
                text-align: center;
                background-color: #00ffa7;
                transition-duration: 0.5s;
            }

            button {
                font-size: 200%;
                background-color: #f5c2e0;
                border-radius: 5px;
                border: none;
                text-align: center;
                color: black;
                font-family: monospace;
                font-weight: bold;
                transition-duration: 0.3s;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div>
            <button type="submit">Sign Out</button>
        </div>
        <script src="./popup-sign-out-script.js"></script>
    </body>
</html>

참고:
body CSS 속성이 포함되어 있는지 확인합니다.
니가 정말 필요로 하지 않는 또 다른 CSS.그것은 단지 페이지를 보기 좋게 하는 데 쓰일 뿐이다.
각 HTML 페이지에 스크립트를 첨부했습니다.

/* popup-sign-in-script.js */
const button = document.querySelector('button');

button.addEventListener('mouseover', () => {
    button.style.backgroundColor = 'black';
    button.style.color = 'white';
    button.style.transform = 'scale(1.3)';
});

button.addEventListener('mouseleave', () => {
    button.style.backgroundColor = '#f5c2e0';
    button.style.color = 'black';
    button.style.transform = 'scale(1)';
});

button.addEventListener('click', () => {
});

/* popup-sign-out-script.js */
const button = document.querySelector('button');

button.addEventListener('mouseover', () => {
    button.style.backgroundColor = 'black';
    button.style.color = 'white';
    button.style.transform = 'scale(1.3)';

    document.querySelector('div').style.backgroundColor = '#ee2f64';
});

button.addEventListener('mouseleave', () => {
    button.style.backgroundColor = '#f5c2e0';
    button.style.color = 'black';
    button.style.transform = 'scale(1)';

    document.querySelector('div').style.backgroundColor = '#fcee54';
});

button.addEventListener('click', () => {
});

참고:
이 코드들 중에는 완전히 불필요한 것이 많다.그것은 단지 페이지를 더욱 아름답고 생기 있게 하는 데 쓰일 뿐이다.
스크립트에서 유일하게 중요한 코드는 단추의 '클릭' 탐지기입니다.

현재 우리는 이미 웹 개발 부분을 가지고 있으니, 우리들의 명세서를 좀 봅시다.json'。

{
    "name": "obj ext",
    "description": "my ext",
    "version": "0.1.0",
    "manifest_version": 2,
    "icons": {
        "16": "./obj-16x16.png",
        "32": "./obj-32x32.png",
        "48": "./obj-48x48.png",
        "128": "./obj-128x128.png"
    },
    "background": {
        "scripts": ["./background.js"]
    },
    "options_page": "./options.html",
    "browser_action": {
        "default_popup": "./popup-sign-in.html"
    },
    "permissions": [
        "identity"
    ] 
}

** 참고:

브라우저 작업의 기본 팝업 창 속성이 로그인 페이지로 설정됩니다.

Chrome의 "launchWebAuthFlow()"방법을 사용하려면 "신분"권한이 필요합니다.

실제 크롬 확장 프로그래밍을 해보겠습니다.

응용 프로그램의 기본 프레임워크 논리 흐름을 작성하는 것부터 시작할 것입니다.

[팝업 로그인 스크립트]에서 를 클릭합니다.사용자가 단추를 눌렀을 때, 우리는 '백엔드' 스크립트에 '로그인' 을 요청하는 메시지를 보낼 것입니다.

"배경"에서 "성공"을 얻으면 페이지를 "로그아웃"페이지로 변경합니다.

// popup-sign-in-script.js

const button = document.querySelector('button');

button.addEventListener('mouseover', () => {
    button.style.backgroundColor = 'black';
    button.style.color = 'white';
    button.style.transform = 'scale(1.3)';
});

button.addEventListener('mouseleave', () => {
    button.style.backgroundColor = '#f5c2e0';
    button.style.color = 'black';
    button.style.transform = 'scale(1)';
});

button.addEventListener('click', () => {
    chrome.runtime.sendMessage({ message: 'login' }, function (response) {
        if (response === 'success') window.location.replace("./popup-sign-out.html");
    });
});

팝업 스크립트 로그아웃.js'는 거의 같다.

팝업 로그아웃 스크립트에서사용자가 단추를 눌렀을 때, 우리는 '백엔드' 스크립트에 '취소' 를 요청하는 메시지를 보낼 것입니다.

"배경"에서 "성공"을 획득하면 페이지를 다음으로 변경합니다.
로그인 페이지

// popup-sign-out-script.js

const button = document.querySelector('button');

button.addEventListener('mouseover', () => {
    button.style.backgroundColor = 'black';
    button.style.color = 'white';
    button.style.transform = 'scale(1.3)';

    document.querySelector('div').style.backgroundColor = '#ee2f64';
});

button.addEventListener('mouseleave', () => {
    button.style.backgroundColor = '#f5c2e0';
    button.style.color = 'black';
    button.style.transform = 'scale(1)';

    document.querySelector('div').style.backgroundColor = '#fcee54';
});

button.addEventListener('click', () => {
    chrome.runtime.sendMessage({ message: 'logout' }, function (response) {
        if (response === 'success') window.location.replace("./popup-sign-in.html");
    });
});

이 서류는 완성되었다.너는 그것을 닫아도 된다.

배경으로 이동합니다.js의 스크립트는 제3자 로그인 자격 증명에 사용할 Discord OAuth2 엔드포인트를 만듭니다.

우리는 상수 6개와 변수 1개가 필요하다.
또한 사용자의 로그인 상태를 추적하는 변수가 필요합니다. 이 모든 정보를 한데 모으는 함수를 만들 것입니다.

// background.js

const DISCORD_URI_ENDPOINT = 'https://discord.com/api/oauth2/authorize';
const CLIENT_ID = encodeURIComponent('');
const RESPONSE_TYPE = encodeURIComponent('token');
const REDIRECT_URI = encodeURIComponent('https://pcojhoejgkedcoikfdehlpfefhagppnf.chromiumapp.org/');
const SCOPE = encodeURIComponent('identify email');
const STATE = encodeURIComponent('meet' + Math.random().toString(36).substring(2, 15));

let user_signed_in = false;

function create_auth_endpoint() {
    let nonce = encodeURIComponent(Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15));

let endpoint_url =
    `${DISCORD_URI_ENDPOINT}
?client_id=${CLIENT_ID}
&redirect_uri=${REDIRECT_URI}
&response_type=${RESPONSE_TYPE}
&scope=${SCOPE}
&nonce=${nonce}`;

    return endpoint_url;
}

참고:

DISCORD URI 단점 - DISCORD의 OAuth2 단점

에 도달하는 방법

CLIENT ID - Discord에 OAuth2 끝점을 사용할 수 있음을 알려줍니다

응답 유형 - 특정 범주에 대한 문의

REDIRECT URI - 토큰을 준 후 사용자를 어디로 리디렉션

범위 - Discord에 특정 데이터 요구

상태 - 요청을 맞춤형으로 구성할 수 있도록 지원

우리는 함수에 마지막 변수 'nonce' 를 만들었습니다.
"nonce"는 Discord OAuth2 끝점을 사용해야 할 때마다 임의로 생성되는 문자열입니다.
매번 달라야 한다.이것이 바로 그것이 상수가 아닌 이유다.

이것들을 함께 놓읍시다.

우리의 배경이 되면js의 스크립트는 메시지를'login '으로 보내고'chrome' 을 호출합니다.신분WebAuthFlow() 함수를 시작합니다.

이것은 두 가지 논점이 필요하다.

OAuth2 단점과true의 "interactive"로고를 구성하는 대상

Discord 서버에서 온 리셋 함수를 제공합니다.로그인한 사용자의 Discord 데이터에 액세스하려면 "토큰"을 사용하십시오.우리는 이 영상에서 이렇게 하지 않을 것이다.우리는 단지 이 단점을 사용해서 사용자를 검증할 뿐이지, 권한을 부여하는 것이 아니다. *

// background.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.message === 'login') {
        chrome.identity.launchWebAuthFlow({
            url: create_auth_endpoint(),
            interactive: true
        }, function (redirect_uri) {
            if (chrome.runtime.lastError || redirect_uri.includes('access_denied')) {
                console.log("Could not authenticate.");
                sendResponse('fail');
            } else {
                user_signed_in = true;
                sendResponse('success');
            }
        });
        return true;
    } 
//...

참고: **
크롬 검사 말고는실행 중 오류가 발생했습니다. 사용자가 성공적으로 로그인했는지 확인합니다.없으면, "ui로 바꾸기"에서 ** "error=access denied"문자열을 찾을 수 있습니다.

로그아웃 분기는 매우 간단합니다.

"user signed in"플래그를 false로 전환하고 "success"응답을 보내기만 하면 됩니다.

// background.js

//...
    } else if (request.message === 'logout') {
        user_signed_in = false;
        sendResponse('success');
    }
});

우리 끝났어.

사용자가 로그인 버튼을 클릭하면 Discord 의 로그인 시스템을 받게 됩니다.
로그인에 성공하면 로그아웃 페이지가 표시됩니다.

여기서 원본 파일을 찾을 수 있습니다.

더 깊은 안내를 원하신다면 유튜브에 있는 제 동영상 튜토리얼을 보십시오.

Discord 로그인 시스템(Chrome 확장) | OAuth2/OpenID Connect

Reference

이 문제에 관하여(Chrome 확장된 Discord OAuth2 로그인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/anobjectisa/discord-oauth2-login-for-chrome-extensions-4ion

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Comparable 인터페이스 유형을 사용하여 범주를 나타냅니다.

iOS Push 알림(사내 학습용)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다