Chrome 확장 프로그램용 이메일/비밀번호 로그인

NodeJS, Express 및 Javascript를 사용하여 Chrome 확장 프로그램용 이메일/비밀번호 로그인을 만듭니다.

이 자습서에서는 상용구 Google Chrome 확장 프로그램 설정을 사용합니다. 더 알아보기 .

의 시작하자.

REST API를 생성하여 시작하겠습니다.
'/로그인'과 '/로그아웃'이라는 두 개의 기본 경로가 있는 매우 기본적인 익스프레스 서버입니다.

물론 익스프레스 패키지가 필요합니다.

>> npm init -y
>> npm install express

메모:
우리는 "인증"미들웨어 기능을 구축했습니다. 데이터베이스에서 사용자의 자격 증명을 찾는 행위를 시뮬레이트합니다.
이 수업을 위해 전체 데이터베이스를 만들지는 않을 것입니다. 원하는 대로 SQL, MongoDb를 사용하십시오.

실제 Chrome 확장 작업을 시작하기 전에 일부 웹 개발 작업을 수행해 보겠습니다.

우리는 3개의 페이지를 만들 것입니다.
로그인 페이지, 로그아웃 페이지 및 돌아온 환영 페이지. 멋진 것은 없습니다.



각 HTML 페이지에 스크립트를 첨부했습니다.



메모:
이 코드의 대부분은 완전히 불필요합니다. 페이지를 멋지게 보이고 애니메이션으로 만드는 데 사용됩니다.
스크립트에서 중요한 유일한 코드는 버튼의 '클릭' 리스너입니다.

이제 Web Dev 부분이 끝났으므로 manifest.json을 살펴보겠습니다.

// manifest.json
{
    "name": "basic email login system",
    "description": "testing basic email login system",
    "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": {
    },
    "permissions": [
        "storage",
        "http://localhost:3000/"
    ] 
}

메모:

사용자 자격 증명을 저장하고 지속성을 허용하려면 저장소 권한이 필요합니다.

Chrome 확장 프로그램이 REST API에 액세스할 수 있도록 localhost 도메인을 내려야 합니다.

실제 Chrome 확장 프로그래밍을 해봅시다.

앱의 기본 뼈대 논리 흐름을 코딩하는 것으로 시작하겠습니다.

popup-sign-in-script.js에서 사용자가 버튼을 클릭하면 백그라운드 스크립트에 "로그인"을 요청하는 메시지를 보냅니다.
백그라운드에서 "성공"을 받으면 페이지를 "로그아웃"페이지로 변경합니다.

//...
if (email && password) {
    // send message to background script with email and password
    chrome.runtime.sendMessage({ message: 'login', 
        payload: { email,    pass }},
        function (response) {
            if (response === 'success')
            window.location.replace('./popup-sign-out.html');
        }
    });
} else {
//...

popup-sign-out-script.js는 거의 동일합니다.

popup-sign-out-script.js에서 사용자가 버튼을 클릭하면 백그라운드 스크립트에 "로그아웃"을 요청하는 메시지를 보냅니다.
백그라운드에서 "성공"을 받으면 페이지를 "로그인"페이지로 변경합니다.

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

이 파일이 완료되었습니다. 닫을 수 있습니다.

popup-welcome-back-script.js 클릭 리스너는 "Sign Out"스크립트와 동일합니다.
따라서 해당 논리를 복사하여 붙여넣을 수 있습니다.

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

background.js 스크립트로 이동하여 사용자의 상태를 모니터링하는 변수와 위에서 메시지를 포착하는 조건 트리를 만듭니다.

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.message === 'login') {
        flip_user_status(true, request.payload)
            .then(res => sendResponse(res))
            .catch(err => console.log(err));

        return true;
    } else if (request.message === 'logout') {
        flip_user_status(false, null)
            .then(res => sendResponse(res))
            .catch(err => console.log(err));

        return true;
    } 
});

메모:
우리는 flip_user_status() 함수를 호출하고 있습니다. 사용자 상태를 true(로그인됨) 또는 false(로그아웃됨)로 변경합니다. 성공 또는 실패로 확인되는 약속을 반환합니다.

'flip_user_status()' 함수를 만들어 봅시다.

사용자가 로그인을 원하면 REST API에서 '/login' 경로를 ping합니다.
사용자가 허용되면 자격 증명을 로컬 하드 드라이브에 저장합니다.

IMPORTANT: DO NOT STORE PASSWORDS IN PLAIN TEXT ANYWHERE.

이 튜토리얼에서는 암호화에 대해 다루지 않을 것입니다.

사용자가 로그아웃을 원하면 먼저 사용자의 자격 증명을 가져온 다음 REST API에서 '/logout' 경로를 핑합니다.
사용자의 자격 증명이 인증되면 로컬 저장소에서 해당 자격 증명을 제거합니다.

백그라운드 스크립트를 종료하기 전에 사용자가 로그인했는지 여부를 알려주는 기능을 추가해 보겠습니다.

function is_user_signed_in() {
    return new Promise(resolve => {
        chrome.storage.local.get(['userStatus', 'user_info'], function (response) {
            if (chrome.runtime.lastError) resolve({ userStatus: false, user_info: {} })

            resolve(response.userStatus === undefined ?
                { userStatus: false, user_info: {} } :
                { userStatus: response.userStatus, user_info: response.user_info }
            )
        });
    });
}

// add to the 'chrome.runtime.onMessage.addListener()' routes...
} else if (request.message === 'userStatus') {
    is_user_signed_in()
        .then(res => {
            sendResponse({ message: 'success', userStatus: user_info: res.user_info.email });
        })
        .catch(err => console.log(err));
            return true;
}

chrome.browserAction.onClicked.addListener(function () {
    is_user_signed_in()
        .then(res => {
            if (res.userStatus) {
                if (return_session) {
                    chrome.windows.create({ 
                        url: './popup-welcome-back.html',
                        width: 300,
                        height: 600,
                        focused: true
                    }, function () { return_session = false });
                } else {
                    chrome.windows.create({
                        url: './popup-sign-out.html',
                        width: 300,
                        height: 600,
                        focused: true
                    });
                }
            } else {
                chrome.windows.create({
                    url: './popup-sign-in.html',
                    width: 300,
                    height: 600,
                    focused: true
                });
            }
        })
        .catch(err => console.log(err));
});

이 모든 것을 함께 가져 갑시다.

마지막으로 popup-welcome-back-script.js에서 백그라운드 스크립트에 메시지를 보내 사용자가 로그인했는지 여부를 알려줍니다.

로그아웃하지 않은 세션으로 돌아가는 경우 환영 메시지가 표시됩니다.

chrome.runtime.sendMessage({ message: 'userStatus' },
    function (response) {
        if (response.message === 'success') {
            document.getElementById('name').innerText = 
            response.user_info;
        }
    }
});

끝났습니다.

노드 app.js로 REST 서버를 시작하면 좋습니다.

보다 심층적인 가이드를 원하시면 YouTube에서 전체 비디오 자습서를 확인하십시오.

Google 크롬 확장 프로그램용 기본 로그인 시스템 만들기