Saltar al contenido
Consejos

Construir una aplicación web de chat seguro con JavaScript, Auth0 y PusherJS

Con el backend listo, construimos la página web que facilitará la mensajería. Creamos una carpeta llamada public que contendrá el archivo html y javascript. Crear dos nuevos archivos style.css y index.html con el siguiente contenido:

style.css

Construir una aplicación web de chat seguro con JavaScript, Auth0 y PusherJS
Construir una aplicación web de chat seguro con JavaScript, Auth0 y PusherJS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051@importurl("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");. chat{estilo lista: ninguno;margen:0;acolchado:0;}.chat li{margin-bajo:10px;acolchado-bajo:5px;borde-bajo:1px punteado #B3A9A9;}.chat li.izquierda.chat-body{margin-izquierda:60px;}.chat li.derecha.chat-body{margin-derecha:60px;}.chat li . chat-body p{margin:0;color:#777777;}.panel.slidedown.glyphicon, .chat.glyphicon{margin-derecha:5px;}.body-panel{overflow-y: scroll;height:250px;}::-webkit-scrollbar-track{-webkit-box-shadow: inset 006pxrgba(0,0,0,0. 3);color-de-fondo:#F5F5F5;}::-webkit-barra-de-pantalla{ancho:12px;color-de-fondo:#F5F5F5;}::-webkit-barra-de-pantalla{-webkit-caja-sombra: inset 006pxrgba(0,0,0,.3);color-de-fondo:#555;}

css

index.html

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374<!-- plantilla de http://bootsnipp.com/snippets/6eWd --><!DOCTYPE html -- ¡Último CSS compilado y minificado --;<linkintegrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u "crossorigin="anonymous"--;<! -- Tema opcional --;<linkintegrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooP2bWYgmgJQIXwl/Sp "crossorigin="anonymous"><scriptsrc="https://code. jquery.com/jquery-2.2.4.min.js "integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="crossorigin="anonymous"></script><!-- Último JavaScript compilado y minificado --;<scriptsrc="https://maxcdn.bootstrapcdn. com/bootstrap/3.3.7/js/bootstrap.min.js "integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa "crossorigin="anonymous"</script><link>scriptsrc="https://cdn.auth0.com/js/lock/10.18.0/lock.min. js"</script><scriptsrc="https://js.pusher.com/4.0/pusher.min.js">/script ];<scriptsrc="index. js"²;/script²;²;/cabeza²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;²;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ;ÿ /botón span</span&;disponible</a&;/li&;nbsp;/a&;a&;span&&&;/span&;a&&&;ocupada</a&&&&&&; li>a>a;span;a;/span;a; Away</a;/li;ndice de la vida cotidiana; ...Firma de salida</a.../li.../ul.../div.../div.../div.../div.../div.../ul.../div..; www.textarearows="3"/textarea.pdf;span,/botón.pdf;Send</button.pdf;/span.pdf;/div.pdf;/div.pdf;/div.pdf;/div.pdf;/div.pdf;/div.pdf;scripttype="text/template "pdf;li;/div.pdf;div clearfix "pdf;div>
html


Este archivo usa la plantilla de bootsnip y también incluye una referencia de script a Auth0 Lock . Lock es un widget de autenticación que proporciona un conjunto estándar de comportamientos necesarios para el inicio de sesión y una interfaz de usuario personalizable. Proporciona una forma sencilla de integrarse con Auth0 con una configuración mínima.



Queremos permitir que los usuarios se registren cuando entren en la aplicación, se autentifiquen y sólo entonces podrán enviar mensajes. Añade un nuevo archivo index.js con el siguiente contenido:




12345678910111213141516171819202122232425262728293031323334353637383940414243444546$(document).ready(function(){/// Iniciando nuestro Auth0Locklet lock =newAuth0Lock($0027CLIENT_ID$0027,$0027CLIENT_DOMAIN$0027,//ejemplo: lotus. auth0.com{ auth:{ params:{ scope:$0027openid profile$0027}}, autoclose:true, closable:false, rememberLastLogin:true});let profile =JSON. parse(localStorage.getItem($0027profile$0027));let isAuthenticated =localStorage.getItem($0027isAuthenticated$0027);functionupdateValues(userProfile, authStatus){ profile = userProfile; isAuthenticated = authStatus;}if(!isAuthenticated &&! window.location.hash){ lock.show();//show Lock widget}// Escuchar el evento autenticado lock.on("authenticated",function(authResult){/// Usar el token en authResult para obtenerUserInfo() y guardarlo en localStorage lock.getUserInfo(authResult. accessToken,function(error, profile){if(error){// Manejar devolución de errores;}localStorage.setItem($0027accessToken$0027, authResult.accessToken);localStorage. setItem($0027profile$0027,JSON.stringify(profile));localStorage.setItem($0027isAuthenticated$0027,true);updateValues(profile,true);$("#username").html(profile.name);});});});
js

Iniciamos el bloqueo pasándole el ID de cliente de la aplicación, su dominio de usuario que comienza con su nombre de usuario seguido de .auth0.com o .{YOUR_SELECTED_REGION}.auth0.com por ejemplo lotus.eu.auth0.com. El widget es configurable, por lo que podemos enviar opciones de configuración como closable , autoClose , y auth . Dentro de la opción auth , le decimos que devuelva las reclamaciones de openid y de perfil.

Comprobamos si el usuario está autentificado y mostramos el widget cuando no lo está. Una vez que el usuario está autentificado, Lock emite el evento autentificado al que nos hemos suscrito. Cuando el evento se emite, almacenamos el perfil del usuario y otras credenciales en localStorage y establecemos el nombre del usuario para que se muestre en la página. Una vez que el usuario está autentificado, queremos conectarnos a Pusher y enviar mensajes. Actualizar index.js con el siguiente código:
123456789101112131415161718192021222324if(!isAutentificado &&!window.location.hash){ lock.show();}else{// Habilitar registro de empujadores - no incluya esto en producciónEmpujador. logToConsole=true;var pusher =newPusher($0027APP_SECRET$0027,{ cluster:$0027e.g eu$0027, encrypted:false});var channel = pusher. subscribe($0027private-chat$0027); channel.bind($0027message-added$0027, onMessageAdded);}functiononMessageAdded(data){let template =$("#new-message").html(); template = template.replace("{{{body}}", data.message); template = template.replace("{{{name}}", data.name);$(".chat").append(template);}
js

Pusher está inicializado con el APP_SECRET y CLUSTER que puedes obtener del tablero de aplicaciones en Pusher. Nos suscribimos a un canal llamado private-chat. Pusher tiene 3 tipos de canales: Público, Privado y Canal de Presencia. Los canales Privado y de Presencia permiten a tu servidor controlar el acceso a los datos que estás transmitiendo. Los canales de presencia van más allá para obligar a los suscriptores a registrar la información del usuario cuando se suscriben. Los canales privados se nombran comenzando por privado y se autentifican en el servidor al suscribirse.

Y finalmente queremos enviar el mensaje al usuario cuando haga clic en enviar y también cerrar la sesión cuando seleccione cerrar la sesión. Actualizar index.js con el código de abajo
12345678910111213141516171819$($0027#btn-chat$0027).click(function(){const message =$("#message").val();$("#message").val("");//enviar mensaje $.post("http://localhost:5000/message",{ mensaje, nombre: perfil. nombre});});$("#logout").click((e)=http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000http://localhost:5000.
js


Cuando el usuario hace clic en el botón de envío, tomamos el mensaje y lo ponemos en un objeto con el nombre del perfil del usuario y lo enviamos al punto final de /message en el servidor. Cuando se pulsa el botón de cerrar la sesión, se llama a la función de cierre de sesión que borra los datos almacenados en localStorage y se llama lock.logout() que cierra la sesión del usuario en Auth0 y lo redirige de nuevo a nuestro sitio web. Con todas estas adiciones, index.js debería tener el siguiente contenido:



12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091$(documento). ready(function(){/// Iniciando nuestro Auth0Locklet lock =newAuth0Lock($0027CLIENT_ID$0027,$0027CLIENT_DOMAIN$0027,{ auth:{ params:{ scope:$0027openid profile$0027}}, autoclose:true, closable:false, rememberLastLogin:true});// Escuchando el evento de bloqueo autentificado. on("authenticated",function(authResult){// Usar el token en authResult para obtenerUserInfo() y guardarlo en localStorage lock. getUserInfo(authResult.accessToken,function(error, profile){if(error){// Manejar errorconsole.log(error);return;}localStorage.setItem($0027accessToken$0027, authResult.accessToken);localStorage.setItem($0027profile$0027,JSON. stringify(profile));localStorage.setItem($0027isAuthenticated$0027,true);updateAuthenticationValues(profile,true);$("#username").html(profile.name);});});let profile =JSON.parse(localStorage.getItem($0027profile$0027));let isAuthenticated =localStorage. getItem($0027esAutentificado$0027);functionupdateAuthenticationValues(userProfile, authStatus){ profile = userProfile; isAutentificado = authStatus;}$("#logout").click((e)= >{ e.preventDefault();logout();});functionlogout(){localStorage.clear(); isAutentificado =falso; lock. logout({ returnTo: "http://localhost:5000"});}functiononMessageAdded(data){let template =$("#new-message").html(); template = template.replace("{{{body}}", data.message); template = template.replace("{{{name}}", data.name);$(".chat").append(template);}if(!isAutentificado &&! window.location.hash){ lock.show();}else{if(profile){$("#nombredeusuario").html(profile.name);}// Habilitar registro de empujadores - no incluir esto en productionPusher.logToConsole=true;var pusher =newPusher($0027APP_SECRET$0027,{ cluster:$0027eu$0027, encrypted:false});var channel = pusher. subscribe($0027private-chat$0027); channel.bind($0027message-added$0027, onMessageAdded);$($0027#btn-chat$0027).click(function(){const message =$("#message").val();$("#message").val("");//send message $.post("http://localhost:5000/message",{ message, name: profile.name});});
js

Para probar la aplicación, ejecute npm start en la terminal y abra http://localhost:5000 en dos navegadores separados. Aquí hay un recorrido de la misma: