Создайте базовую систему входа в систему с помощью NodeJS, Express и Javascript.
В этом руководстве используется стандартная установка расширения Google Chrome.
Если вы хотите узнать, как выполнить эту настройку,
ознакомьтесь с моими описаниями здесь:
Или видеоурок здесь:
Давай начнем.
Мы начнем с создания нашего REST API.
Очень простой сервер Express с двумя основными маршрутами: «/ login» и «/ logout».
Конечно, нам понадобится экспресс-посылка.
>>npm init -y >>npm install express
Примечание.
Мы создали промежуточную функцию «аутентификации». Он просто имитирует поиск учетных данных пользователя в базе данных.
Мы не будем создавать всю базу данных для этого урока. Используйте SQL, MongoDb, что вам нравится.
Давайте поработаем над веб-разработкой, прежде чем мы перейдем к реальной работе над расширением Chrome.
Мы создадим три страницы.
Страница «Вход», страница «Выйти» и «С возвращением ”Страница. Ничего фантастического.
Обратите внимание, что мы прикрепили скрипты к каждой из наших HTML-страниц.
Примечание.
Большая часть этого кода совершенно не нужна. Он просто используется для того, чтобы страница выглядела красивой и живой.
Единственный код, который имеет значение в сценариях, - это прослушиватели "кликов" для кнопок.
Теперь, когда у нас есть часть, посвященная веб-разработке, давайте взглянем на наш «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/"
]
}
Примечание.
1. Нам нужно разрешение «хранилище», чтобы мы могли хранить учетные данные пользователя и обеспечивать постоянное хранение.
2. Нам нужно указать вниз по нашему домену localhost, чтобы наше расширение Chrome могло получить доступ к REST API.
Давайте займемся программированием расширений Chrome.
Мы начнем с написания кода базовой логической схемы нашего приложения.
В "popup-sign-in-script.js", когда пользователь нажимает кнопку, мы отправляем сообщение сценарию "background" с просьбой «логин».
Если мы получим «успех» из «фона», мы изменим страницу на « Выйти ».
//...
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-in-script.js». Вы можете закрыть файл.
Файл «popup-sign-out-script.js» практически идентичен.
В "popup-sign-out-script.js", когда пользователь нажимает кнопку, мы отправляем сообщение сценарию "background" с просьбой «Выйти».
Если мы получим «успех» из «фона», мы изменим страницу на «Войти ”страница.
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' 'click идентичен нашему скрипту
«Выход». .
Итак, мы можем скопировать и вставить эту логику.
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 ()». Он изменяет статус пользователя на «истинный» (вошел в систему) или «ложный» (вышел из системы). Он возвращает обещание, которое превращается в «успех» или «неудача».
Давайте создадим эту функцию «flip_user_status ()».
Если пользователь хочет войти в систему, мы проверяем наш маршрут «/ login» из REST API.
Если пользователю разрешено, мы сохраним его учетные данные на локальном жестком диске.
ВАЖНО: НИКОГДА НЕ СОХРАНЯЙТЕ ПАРОЛИ В ОБЫЧНОМ ТЕКСТЕ.
В этом видео мы не будем вдаваться в шифрование.
Если пользователь хочет выйти из системы, мы сначала получаем учетные данные пользователя, а затем проверяем наш маршрут «/ logout» из REST API.
Если учетные данные пользователя аутентифицированы, мы их удаляем. учетные данные из локального хранилища.
Прежде чем мы выйдем из фонового сценария, давайте добавим функцию, которая сообщает нам, вошел ли пользователь в систему, создайте маршрут onMessage,
который отправляет обратно этот статус и обработать нажатие на значок нашего браузера.
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;
}
}
});
Готово.
Запустите REST-сервер с «node app.js», и все готово.
Если вам нужно более подробное руководство, посмотрите мой полный видеоурок на YouTube An Object Is A.
Не забудьте подписаться на нас в Instagram и Twitter, чтобы быть в курсе наших последних руководств по веб-разработке.
