Generar Token de Seguridad Php Mysql

Los token nos sirve para agregar un nivel mas de seguridad a nuestras aplicaciones web que se pueden llegar a utilizar en varios procesos donde el usuario interactúa.

pero para ser mas prácticos brindare un ejemplo y es de la típica sección de olvide mi contraseña que tiene cualquier sistema de ecommerce, blog, intranet, etc.

olvidecontrasena

el proceso de esta sección ya es muy conocida ingresamos nuestro correo y nos debería llegar un correo que puede ser que nos envié una contraseña aleatoria que es de mal gusto por cualquiera podría ingresar tu correo y ya te cambiaron la contraseña por eso un proceso idóneo es que te llegue un link desde donde podrías cambiar la contraseña y en ese proceso nos enfocaremos.

¿por que deberíamos usar entonces un token?

Pero para entender bien el motivo de utilizar entendamos el problema y es muchas web hacen la sección enviando URL parecidas a esta:

www.dominio.com/olvido-password.php?email=pepito@dominio.com

 

y te manda a la pagina para colocar una nueva contraseña y claramente así cualquiera que vea la URL y  sepa algo de informática se dará cuenta que la web tiene un tremendo agujero de seguridad.

Screenshot_1

¿que podemos hacer?

realmente si nos podemos a pensar un poco mas esto no debería ser un drama ya que con un simple token podemos zafar de este bug de seguridad.
entonces es simple esto ya que al momento de enviar el correo con el aviso al usuario creas una variable aleatoria que puede estar encriptado en md5, base64, etc.

www.dominio.com/olvido-password.php?email=NDUzNTM0NTM0NTM0NTM0NTM0NTc2NDY=

al tener el token lo guardas en un campo de la base de datos por ejemplo en la tabla usuarios en un campo token y enviamos por correo al usuario un link con el token,  cuando abra el usuario el link validamos de que si el token que enviado por GET existe o no.

Estas pequeñas cosas pueden mejorar la seguridad de tus aplicaciones espero que te ayude y si tienes dudas me puedes escribir.

 

 

 

Ver articulo completo.

Crear un chat basico con pubnub

Buen tiempo que deje de publicar articulos por un tema de tiempos pero ya que andaba metido en varios proyectos y en uno de ellos que aun lo llevo en marchar me toco realizar un chat y bueno con el ajax esto deje de ser un drama hace mucho tiempo. Pero si lo intentaste hacer en algun proyecto mediano o grande te habras topado con unos problemas por ejemplo: saturar el servidor con muchas peticiones, limite de conexiones a la base de datos si fuera el caso que estes guardando los chat, etc.

este problema se soluciono definitivamente con node.js que evita el problema de saturar el servidor por peticiones ya que siempre mantienen un puente donde escribe y lee y se mantiene abierto para esta conversacion.

pero podras instalarlo en tu servidor? probablemente no ya que no ocupa una caracteristica tecnica en tu proyecto  y usas una infraestructura LAMP  y es aqui donde PUBNUB viene a ayudarnos y solucionarnos la vida nos enfoca en programar y dejar del lado el lado tecnico del servidor.

se que siempre en mis articulos voy directo al codigo pero era necesario un poco de contexto para que entiendan bien para que viene el PUBNUB al mercado y no se milita a solo hacer chat de hecho puede ser usado para infinidades de cosas.

Entonces a programar!

chat-vista

tenemos esta estructura del chat que es muy similar al de facebook el codigo para esta ventana es (se usa bootstrap y jquery):

<div class="conversacion" style="display: block;">
<div class="ventana-cabecera"><i class="fa fa-circle" aria-hidden="true"></i> Luis Miguel Rodriguez Blas</div>
	<div class="ventana-cuerpo">
 
	   <div class="col-xs-12 el"><span>Broder, vao a pichangear!</span></div>
	   <div class="col-xs-12 yo"><span>sale y vale pero a las 10pm de lo contrario no la hago</span></div>
	   <div class="col-xs-12 el"><span>Broder, vao a pichangear!</span></div>
	   <div class="col-xs-12 yo"><span>sale y vale pero a las 10pm de lo contrario no la hago</span></div>
           <div class="col-xs-12 yo"><span>hola</span></div>
       </div>
       <div class="ventana-escribir">
	<form id="frm-chat">
	   <input type="text" class="form-control" name="" placeholder="Escribe tu mensaje...">
	</form> 
       </div>
</div>

y tenemos un input donde el usuario escribira y es desde donde se desencadenara todo el script pero primero realizamos la conexion del pubnub

/*conexion al servidor del pubnub*/
var pubnub = PUBNUB.init({
        publish_key: 'xxxxxxxxxxxx',
        subscribe_key: 'xxxxxxxxxxxxx'
    });

estos datos de publish_key y subscribe_key te los brindara al registrarse y crear un proyecto dentro de la web de pubnub.com
crear-pubnub

el siguiente paso es crear un canal que servira para la conversacion (puedes crear n cantidad de canales)

/*abrimos el canal*/
pubnub.subscribe({
          channel: 'chat-1',
          message: function(m){escribir_chat(m)} 
    });

ya tenemos el canal abiero de este medio y en message le pasamos una funcion que la llamamos escribir_chat() que lleva una variable donde enviaremos lo que nos pasa el usuario al chatear pero para tener mas claro vemos como procede el script desde el momento del enter en el input del chat.

/*aqui creamos el evento que cuando de ENTER en la input se dispare y llame a la funcion publish */
$("#frm-chat input[type='text']" ).keypress(function(e) {
        mensaje=$( "#frm-chat input[type='text']" ).val();
        if(e.which == 13) {
            publish(mensaje);
            return false;
     }
});

la funcion publish enviamos el dato escrito

/*el fin de la funcion es para decir al pubnub a que canal y que mensaje envia */
function publish(mensaje=null,input) {
        pubnub.publish({
            channel: 'chat-1',
            message: {"text":mensaje}
        });
    }

ahora insertamos al canal los datos enviados para que el usuario del otro lado del chat lo vea.

/*mandamos al canal y ejecutamos una funcion que escribira en el html */
pubnub.subscribe({
          channel: 'chat-1',
          message: function(m){escribir_chat(m)} 
 });

la funcion escribir_chat basicamente creara la linea de conversacion en el html del chat y se vera una fluidez de conversacion

function escribir_chat(m)
    {   
        console.log(m)
 
        if (m.text!="")
        { 
            var html='<div class="col-xs-12 yo">';
            html+='    <span>'+m.text+'</span>';
            html+='</div>';
            $(".ventana-cuerpo").append(html);
            $("#frm-chat input[type='text']").val(''); 
            /*esta linea es para que siempre la ventana div se mantenga en el bottom 0*/
            $(".ventana-cuerpo").scrollTop($(".ventana-cuerpo")[0].scrollHeight);
        }
 
    }

ya con esto tendras el chat funcionando y seguro te preguntas pero si solo creamos 1 venta de la conversacion como hacemos para el otro usuario que estara del otro lado?.
ejecuta su chat en 2 tabs del navegador al mismo tiempo y comienza escribir y veras que lo tienes todo.

realizare otro post mejorando este chat que estamos armando, espero que te ayude o te de mejor idea del pubnub y estoy abierto a sugerencias y mejoras de este chat que como menciono esta en una primera version basica.

Ver articulo completo.

Experiencia de compra online en ripley.com.pe

nike-zapatillas-air-max-819474-01Ripley como suele hacer mando ofertas por 48 horas que en su pagina web y realmente encontre un producto que me gusto mucho que ya lo habia visto por tienda pero el precio no me animaba mucho pero al ver que realmente en la web si era un descuento llamativo me anime a comprarlo.

Experiencia de compra online en ripley.com.pe

Proceso de compra

Al seleccionar y tener mi producto ya en el carrito de compras procedi a comprarlo que es a lo que venimos! ya por experiencia se que puede que el delivery tome mucho tiempo asi que decidi recoger el producto en la tienda seleccionando esta opcion. screenshot_1 y cuando procedi a continuar me mando un mensaje “No se pudo consolidar las tiendas”  que realmente no entendi nunca el problema ya que pense que era por cosas raras del diablo y actualice la pagina pero nunca pude proceder con la compra por ese medio de retiro y tuve que selecciona despacho a domicilio que y me di con la sorpresa que tiene un costo estandar para enviar a cualquier distrito a 10 soles y  lo genial que era de un dia para otro y sin dudarlo mucho realice el pago en linea y finalizada la compra.

Me llegaron 2 correos:

  • Orden de compra
  • Comprobante electronico

en la orden de compra me llego con este texto que copio:

¡Gracias por preferir Ripley.com! Te enviamos los detalles de tu orden de compra. Recuerda que durante el día de la entrega podrás hacer SEGUIMIENTO A TU PEDIDO EN www.ripley.com.pe/seguimiento. Te recordamos que debes de estar presente para la entrega en el día y hora que indicaste durante tu compra. Si tienes alguna duda o inconveniente, por favor llámanos al 611-5959.

lo genial de todo el texto es que nos dan una forma de seguimiento a nuestro producto que se activa el mismo dia que te enviaran el producto y en tiempo real te muestra donde esta el producto.

solo el detalle que no es solo en ripley es mucho tiendas online que siempre te dan un rango mi largo de horarios para esperar el producto que esto te hace encerrarte en casa a esperar el producto.

Conclusión

Fue una experiencia gratificante pero podria mejorar en horarios de envio y reparar errores que tiene en la parte de entrega o pueda ser que sea algo que hice mal para habilitar la opcion entonces que sea mas facil de entenderlo.

Ver articulo completo.

Que es ser un Front End?

Nadie logra lo que quiere rindiendose

Que es ser un Front End?, Como ser un Ninja Front End? Y como llegar a ser el mejor Front End?

Son preguntas que al inicio de todo nos hemos preguntamos en algún punto. Si tú al igual que yo te apasiona la web quédate a leer esto te interesará.

La pasión nos conlleva a realizar muchas cosas como por ejemplo dejar de lado unas para hacer otras quizás nuevas o centrarse en una. Esto nos trae la búsqueda de la perfección y la dualidad cognitiva pues como empezó muchos terminan, rápido y fugaz. Ya que luego de un tiempo te pasara que has aprendido mucho y aun te falta mucho más, aunque tratas y pasa el tiempo sigue ocurriendo el mismo escenario pues cuando piensas alcanzar la meta esta se aleja hasta dejarte a una distancia aproximada al punto inicial. La dualidad cognitiva nos llevara a la decepción, percepción equivoca de que perdimos el tiempo y debimos hacer otra cosa, renegaremos, algunos lloraran y otro más locos se reirán de ya no saber qué hacer.

En todos estos escenarios el individuo ha perdido el porqué de que iniciara esto “La Pasión”.

Al parecer la pasión como todo se acaba y ellos perdieron el punto de enfoque y se estancaran, pero tú no, porque? Pues simple, estás leyendo esto.

 

Un Front End apasionado nunca vera un reto como reto sino como una nueva forma de andar, nunca caerá solo tropezará y nada será tan alto pues con algunos trucos y funciones se creara una cascada de ideas que juntas aran el escalón para pasar tal altitud.

Tu que estas desarrollando nunca olvides que esto al igual que tu primer amor inició con pasión y ella no te dejara sino tu a ella a la medidas que la cosa se ponga difícil.

Recuerda la adversidad no está para que te rindas sino para medir tu fortaleza y tus ganas de superarlas, Murieron las tablas y pasamos a div con floats, pues genial; Murió el float paso a display, pues grandioso; muere display empezamos las grillas, valla valla se mesclaron y salió mejor aún; se modifica y nace Flex, nunca te rindas pues a la medida que lo hagas serás uno de los que perdieron o vivieron seguir viviendo con su pasión.

 

Nunca dejes de leer lo que te gusta, no dejes de informarte y recuerda nunca se sabe todo.

Te dejo unos links de ayuda para tu evolución a un Front End o un Ninja Front End o mejor aún el Mejor Front End.

 

http://tympanus.net/codrops/css_reference/

http://tympanus.net/codrops/collective/

Ver articulo completo.

Como crear alertas en google analytics

Por tiempo pueda que no estes siempre atendo a revisar lo que esta sucediendo con tu web pero  google analytics nos tiene una funcionalidad que nos mantendra actualizados por medio de correos,  estamos hablando de las alertas personalizadas que nos brinda muchas opciones para su configuracion y explicare como se configuran unas reglas basicas que deberias tenerlo activado.

Debes ingresar a tu cuenta google analytics en la pestaña administrador

screenshot_1

tendro tendras que seleccionar

  • cuenta
  • propiedad
  • vista 

ya dentro de vista tendra que busca una opcion de alertas personalizables.

screenshot_1

Listo! apartir de aqui ya podremos crear las alertas y crearemos 3 alertas

  • Alerta si en la web hay un error 404
  • Alerta si cae un 50% nuestras visitas
  • Alerta si  no hay trafico al dia.

Alerta si en la web hay un error 404

como sabemos google considerar este tipo de error para rankearnos y no deberiamos permitirnos este tipo de errores y con esta alerta podremos controlarlo cuando suceda.

Datos basicos

Configuración Valor
Nombre de la alerta errores 404 (puedes colocar cualquier nombre que te guie)
Aplicar a: dominio pre seleccionado
Periodo Dia
Enviarme un correo electrónico
cuando la alerta se active Incluir también
marcarlo (importante para recibir la alerta en nuestro correo)

Condiciones de alerta

Configuración Valor
Esto corresponde a Título de la página
condicion contiene
valor Pagina no encontrada 🙁   (debe ser el valor que tiene tu etiqueta <title></title>)
Configuración Valor
Alertarme cuando Número de visitas a páginas
condicion es mayor que
valor 1

Alerta si cae un 50% nuestras visitas

importante saber el momento que las visitan estan en caida y pueda ser por algun error de programacion, algun error al rediseñar y afectar la usabilidad, problemas con el servidor, etc.

Datos basicos

Configuración Valor
Nombre de la alerta cae 50% visitas(puedes colocar cualquier nombre que te guie)
Aplicar a: dominio pre seleccionado
Periodo Dia
Enviarme un correo electrónico
cuando la alerta se active Incluir también
marcarlo (importante para recibir la alerta en nuestro correo)

Condiciones de alerta

Configuración Valor
Esto corresponde a Todo el trafico
Configuración Valor
Alertarme cuando sessiones
condicion el porcentaje se reduce mas de
valor 50%
En comparación con
El mismo día de la semana anterior
el mismo dia de la semana pasada

Alerta si no hay trafico al dia

Esto te mantendra alerta si es que tu servidor web a caido ,una mala configuracion  o conflicto del script del analytics.

Datos basicos

Configuración Valor
Nombre de la alerta cae 50% visitas(puedes colocar cualquier nombre que te guie)
Aplicar a: dominio pre seleccionado
Periodo Dia
Enviarme un correo electrónico
cuando la alerta se active Incluir también
marcarlo (importante para recibir la alerta en nuestro correo)

Condiciones de alerta

Configuración Valor
Esto corresponde a Todo el trafico
Configuración Valor
Alertarme cuando sessiones
condicion es menor que
valor 1

se puede configurar muchas alertas dependiente de lo que se requiera puntualmente si necesitas ayuda en tener configurado alertas en tu pagina web puedes escribirme para brindarte mis servicios.

Ver articulo completo.