Автор оригинала: Peter Mbanugo.
Безопасность сложно. Часто при создании приложений мы хотим разрешить только зарегистрированным пользователям к приложению. Мы хотим иметь возможность управлять учетными записями пользователей, см. Когда они в последний раз входили в систему, сможете отключить подозрительные учетные записи и иметь приборную панель для просмотра и управления всеми этими данными. Мы также можем решить поддержать многофакторную аутентификацию и социальный логин.
Но безопасность не просто тяжелая, она также занимает некоторое время для реализации. Что делать, если есть услуга, которая может забрать эту часть развития развития от вас? Зачем проводить недели или месяцы, катируя свой собственный авторитет? Это где auth0 сияет. В этом руководстве я покажу вам, как построить приложение чата с Pusher, добавьте аутентификацию пользователя с блокировкой AUTH0 и управлять пользователями с помощью панели инструментов AUTH0.
Введение в auth0 и толкатель
AUTH0 Проводится ли провайдер аутентификации – AS-A-Service (или Identity-As-A-A-A-A-Service) на инкапсулируя аутентификацию и управление пользователями, что обеспечивает SDK, чтобы позволить разработчикам легко добавлять аутентификацию и управлять пользователями. Его приборная панель управления пользователями позволяет нарушить обнаружение и многофакторную аутентификацию и вход в систему PALSELS.
Толкатель Инфраструктура API и размещенной инфраструктуры позволяют нам создавать масштабируемые и надежные приложения в реальном времени. У Pusher обладает концепцией каналов и событий, которые являются фундаментальными для него. Каналы обеспечивают способ фильтрации данных и контроля доступа к различным потокам информации, в то время как события являются основным методом упаковочных сообщений в системе толкателя и составляют основу всей связи.
Создание заявки
Мы будем создавать приложение чата, которое позволит пользователям взаимодействовать друг с другом, где каждый видит сообщения каждого другого человека. Это будет работать аналогично, как каналы работают в Slack: только один канал для всех для общения.
Вот что мы будем строить:
Настройка бэкэнда Мы начнем с создания бэкэнда, которая будет способствовать получению и вещаниям сообщений чата, обслуживающих статические файлы, а также настройку AUTH0 и PUSHER.
Во-первых, вам нужно будет зарегистрироваться для учетной записи Pusher и AUTH0. Перейти к pusher.com и auth0.com и подписаться на аккаунт. Чтобы использовать PUSHER API, мы должны зарегистрироваться и создать приложение Pusher с помощью приборной панели. Мы можем создать столько приложений, так как мы хотим, и каждый из них получит идентификатор приложения и секретный ключ, который мы будем использовать для инициализации экземпляра Pusher на Client или Server Side Code.
Создать новую учетную запись Pusher Чтобы создать новое приложение для толкателя, нажмите на Ваши приложения Боковое меню, затем нажмите на Создать новое приложение кнопка под ящиком. Это вызывает мастер установки.
- Введите имя для приложения. В этом случае я назову это «Чат».
- Выберите кластер.
- Выберите опцию «Создать приложение для нескольких сред», если вы хотите иметь разные экземпляры для разработки, постановки и производства.
- Выберите Ваниль Джс как интерфейс и Nodejs как бэкэнда.
- Заполните процесс, нажав
Создать приложениеКнопка для настройки экземпляра вашего приложения.
Поскольку мы строим нашу бэкэнд в узле с использованием Express, давайте инициализируем новое приложение узла и установите необходимые зависимости. Запустите следующую команду:
- NPM init и выберите параметры по умолчанию
- NPM I –Save Body-Parser Express Pusher Чтобы установить Express и пакет узла толчков
Добавить новый файл под названием server.js Что будет содержать логику для аутентификации клиента Pusher, а также рендеринг статических файлов, мы будем добавлять позже. Этот файл будет содержать содержимое ниже:
var express = require('express');
var bodyParser = require('body-parser');
var Pusher = require('pusher');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
var pusher = new Pusher({ appId: APP_ID, key: APP_KEY, secret: APP_SECRET, cluster: eu });
app.post('/pusher/auth', function(req, res) {
var socketId = req.body.socket_id;
var channel = req.body.channel_name;
var auth = pusher.authenticate(socketId, channel);
res.send(auth);
});
app.post('/message', function(req, res) {
var message = req.body.message;
var name = req.body.name;
pusher.trigger( 'private-chat', 'message-added', { message, name });
res.sendStatus(200);
});
app.get('/',function(req,res){
res.sendFile('/public/index.html', {root: __dirname });
});
app.use(express.static(__dirname + '/public'));
var port = process.env.PORT || 5000;
app.listen(port, function () {
console.log(`app listening on port ${port}!`)
});
Мы создали толкатель, пройдя в объекте, который содержит детали нашего идентификатора приложения и секретного ключа, который можно найти на Ключи приложений Вкладка в вашей палочке приборной панели. Pusher также предоставляет механизм для аутентификации пользователей на канал в точке подписки. Для этого мы выставляем конечную точку на сервере, который проверит запрос и отвечаю на успех или неудачу. Эта конечная точка будет вызвана библиотеками Clible Pusher и может быть названа. Мы использовали имя по умолчанию для этой конечной точки на толкатель, который является /pusher/auth Отказ Линия var.authenticate (SocketiD, канал); Аутентифицирует клиент с помощью толкателя и возвращает код аутентификации в звонок.
Чтобы этот файл запустить, когда мы запускаем NPM, мы обновляем Package.json со следующим значением:
"scripts": {
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
Создайте клиент AUTH0 Для создания клиента AUTH0
- Выберите Клиенты из бокового меню.
- На новой странице нажмите Создать клиент кнопка
- Введите имя для приложения и выберите Приложение для одиночных страниц В качестве опции
- Нажмите на Создать Кнопка для создания клиента.
Клиент AUTH0 предоставляет нам идентификатор клиента и секрет, который мы будем использовать для взаимодействия с AUTH0 от кода. На вкладке «Настройки» мы можем увидеть имя, идентификатор клиента, секрет, тип клиента и многое другое. Я хочу включить CORS для моего домена http://localhost: 5000, установите URL-адрес выхода и URL-адрес для перенаправления, чтобы пользователь был аутентифицирован с AUTH0. Обновите следующие настройки с помощью http://localhost: 5000
- Допускается URL-адреса обратного вызова
- Разрешенные URL-адреса выхода
- Допускается происхождение (CORS)
Строительство Frontend С помощью Backend все хорошо, чтобы пойти, мы создаем веб-страницу, которая облегчит обмен сообщениями. Создать папку с именем публичный который будет содержать файл HTML и JavaScript. Создайте два новых файла style.css и index.html Со следующим контентом:
still.css
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
.chat
{
list-style: none;
margin: 0;
padding: 0;
}
.chat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}
.chat li.left .chat-body
{
margin-left: 60px;
}
.chat li.right .chat-body
{
margin-right: 60px;
}
.chat li .chat-body p
{
margin: 0;
color: #777777;
}
.panel .slidedown .glyphicon, .chat .glyphicon
{
margin-right: 5px;
}
.body-panel
{
overflow-y: scroll;
height: 250px;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
index.html.
Этот файл использует шаблон от Bootsnip А также включает в себя ссылку на скрипт на блокировку AUTH0 Отказ Замок Является ли Widget-аутентификация, который предоставляет стандартный набор поведений, необходимых для входа в систему и настраиваемый пользовательский интерфейс. Он обеспечивает простой способ интеграции с AUTH0 с очень минимальной конфигурацией.
Мы хотим позволить пользователям войти, когда они вводят в приложение и смогут отправлять сообщения после аутентификации. Добавить новый файл index.js Со следующим контентом:
$(document).ready(function(){
// Initiating our Auth0Lock
let lock = new Auth0Lock(
'CLIENT_ID',
'CLIENT_DOMAIN',//example: lotus.auth0.com
{
auth: {
params: {
scope: 'openid profile'
}
},
autoclose: true,
closable: false,
rememberLastLogin: true
}
);
let profile = JSON.parse(localStorage.getItem('profile'));
let isAuthenticated = localStorage.getItem('isAuthenticated');
function updateValues(userProfile, authStatus) {
profile = userProfile;
isAuthenticated = authStatus;
}
if(!isAuthenticated && !window.location.hash){
lock.show();//show Lock widget
}
// Listening for the authenticated event
lock.on("authenticated", function(authResult) {
// Use the token in authResult to getUserInfo() and save it to localStorage
lock.getUserInfo(authResult.accessToken, function(error, profile) {
if (error) {
// Handle error
return;
}
localStorage.setItem('accessToken', authResult.accessToken);
localStorage.setItem('profile', JSON.stringify(profile));
localStorage.setItem('isAuthenticated', true);
updateValues(profile, true);
$("#username").html(profile.name);
});
});
});
Мы инициализируем блокировку, передаваем его идентификатор клиента приложения, ваш пользовательский домен, который начинается с вашего имени пользователя, за которым следует .auth0.com или . {Your_selected_region} .auth0.com E.G lotus.eu.auth0.com Отказ Виджет настраивается, и мы можем отправить параметры конфигурации, такие как сжимаемый , автотлозы и auth Отказ В пределах auth Опция мы говорим, чтобы вернуть OpenID и Профиль претензии.
Мы проверяем, аутентифицирован ли пользователь и показывает виджет, когда они нет. Как только пользователь аутентифицирован, замок выделяет аутентифицирован событие, на которое мы подписались. Когда он поднят, мы храним профиль пользователя и другие учетные данные для LocalStorage и установите имя пользователя, которое будет отображаться на странице. Как только пользователь аутентифицирован, мы хотим подключиться к тошеру и отправлять сообщения по всему. Обновите index.js со следующим кодом:
if(!isAuthenticated && !window.location.hash){
lock.show();
}
else{
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('APP_SECRET', {
cluster: 'e.g eu',
encrypted: false
});
var channel = pusher.subscribe('private-chat');
channel.bind('message-added', onMessageAdded);
}
function onMessageAdded(data) {
let template = $("#new-message").html();
template = template.replace("{{body}}", data.message);
template = template.replace("{{name}}", data.name);
$(".chat").append(template);
}
Толкатель инициализируется с App_secret и Кластер Который вы можете добраться от приложенного приборной панели на толкатель. Мы подписываемся на канал под названием Частный чат Отказ У Pusher 3 типа каналов: общедоступные, частные и присутствующие канал. Частные и присутствующие каналы позволяют вашему серверу контролировать доступ к данным, которые вы вещаете. Каналы присутствия идут дальше, чтобы заставить подписчиков зарегистрировать информацию о пользователе при подписке. Частные каналы называются начиная с частные- и аутентифицирован на сервере при подписке.
И, наконец, мы хотим отправить сообщение пользователю, когда они нажимают, пожалуйста, и выведите их, когда они выбирают подпись. Обновить index.js с кодом ниже
$('#btn-chat').click(function(){
const message = $("#message").val();
$("#message").val("");
//send message
$.post( "http://localhost:5000/message", { message, name: profile.name } );
});
$("#logout").click((e) => {
e.preventDefault();
logout();
});
function logout(){
localStorage.clear();
isAuthenticated = false;
lock.logout({
returnTo: "http://localhost:5000"
});
}
Когда пользователь нажимает кнопку отправки, мы берем сообщение и поместите его в объект с именем профиля пользователя и отправьте его на /сообщение Конечная точка на сервере. Когда кнопка «Выход» нажата, она вызывает функцию выхода из системы, которая очищает данные, хранящиеся в LocalStorage, и вызов lock.logout () который входит в систему пользователя на AUTH0 и перенаправляет их обратно на наш веб-сайт. Со всеми этими дополнениями index.js должен иметь следующий контент:
$(document).ready(function(){
// Initiating our Auth0Lock
let lock = new Auth0Lock(
'CLIENT_ID',
'CLIENT_DOMAIN',
{
auth: {
params: {
scope: 'openid profile'
}
},
autoclose: true,
closable: false,
rememberLastLogin: true
}
);
// Listening for the authenticated event
lock.on("authenticated", function(authResult) {
// Use the token in authResult to getUserInfo() and save it to localStorage
lock.getUserInfo(authResult.accessToken, function(error, profile) {
if (error) {
// Handle error
console.log(error);
return;
}
localStorage.setItem('accessToken', authResult.accessToken);
localStorage.setItem('profile', JSON.stringify(profile));
localStorage.setItem('isAuthenticated', true);
updateAuthenticationValues(profile, true);
$("#username").html(profile.name);
});
});
let profile = JSON.parse(localStorage.getItem('profile'));
let isAuthenticated = localStorage.getItem('isAuthenticated');
function updateAuthenticationValues(userProfile, authStatus) {
profile = userProfile;
isAuthenticated = authStatus;
}
$("#logout").click((e) => {
e.preventDefault();
logout();
});
function logout(){
localStorage.clear();
isAuthenticated = false;
lock.logout({
returnTo: "http://localhost:5000"
});
}
function onMessageAdded(data) {
let template = $("#new-message").html();
template = template.replace("{{body}}", data.message);
template = template.replace("{{name}}", data.name);
$(".chat").append(template);
}
if(!isAuthenticated && !window.location.hash){
lock.show();
}
else{
if(profile){
$("#username").html(profile.name);
}
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('APP_SECRET', {
cluster: 'eu',
encrypted: false
});
var channel = pusher.subscribe('private-chat');
channel.bind('message-added', onMessageAdded);
$('#btn-chat').click(function(){
const message = $("#message").val();
$("#message").val("");
//send message
$.post( "http://localhost:5000/message", { message, name: profile.name } );
});
}
});
Чтобы проверить приложение, запустить NPM начать на терминале и открыть http://localhost: 5000 на двух отдельных браузерах. Вот пробег через него:
Сворачивать
Это приложение для того, чтобы показать, как вы можете использовать Pusher для отправки сообщений в режиме реального времени и защищать каналы, добавить аутентификацию пользователя и управление учетными записями с помощью AUTH0 и легко интегрироваться в AUTH0, используя блокировку AUTH0. На ваш auth0 Приборная панель Вы можете увидеть общее количество пользователей, логинов и новых регистраций.
Вы также можете увидеть всех ваших пользователей, когда вы нажимаете на Пользователи боковое меню. На этой странице вы можете увидеть список ваших пользователей и их режим входа в систему.
Выбор пользователя отвечает вам на более подробную страницу, в которой вы можете предпринять различные действия на учетной записи, например, блокируя учетную запись или отправку электронной почты.
Также на толках вы можете пойти на приборную панель приложения, под Статистика, Где вы увидите статистику относительно вашей приложения, такой как частота подключения и сколько сообщений было отправлено через это приложение. Сочетание этих двух технологий делает его быстрее и легче создавать безопасные приложения в реальном времени. Вы можете найти код здесь на Github Отказ
Это было первоначально опубликовано на Толкатель