Capturar credenciales de Facebook con una extensión de Google Chrome


Hace unos días comencé a revisar las API de Google Chrome que ofrece para crear extensiones y decidí crear una sencilla extensión que captura el email y la contraseña de Facebook al momento de hacer login (hay gente que le llama hackear Facebook), esto lo logro al hacer un hook en el evento “submit” del formulario de login.

En términos más técnicos lo que estoy haciendo es un event listener al documento y bajo ciertos parámetros solo opero en el login de Facebook.

También me pareció interesante tomar pantallazos de Facebook cada determinado tiempo, para ello se cuenta con un botón que habilita esta opción.

Sin embargo la idea es que esta información salga del navegador de la víctima y vaya a nuestras manos, para ello configuré la aplicación para que responda a un servidor hecho con Node.js y Socket.io, de ahí para adelante es historia. Continue reading “Capturar credenciales de Facebook con una extensión de Google Chrome”

Eventos en WinJS


En el desarrollo de software es indispensable el manejo de eventos que se tiene X tecnología, en algunos se llaman triggers, events, delegates, en fin… En JavaScript estándar existen varios métodos, sin embargo cuando se está construyendo una aplicación WinJS nativa es necesario implementar el API de Microsoft.

Así que para ello y sin dar tantos rodes se necesita un disparador y un escuchador de eventos.

Dispatcher

Para disparar un evento solo es necesario declarar alguno de los dos ejemplos a continuación, el primero si es un evento básico y el segundo por si es necesario adjuntar información a este evento.

Método 1

WinJS.Application.queueEvent("nameOfEvent");

Método 2

WinJS.Application.queueEvent({ type: "nameOfEvent", information: { someProperty: "someValue" } });

Listener

 WinJS.Application.addEventListener("nameOfEvent", function (data) {
     console.log(data.information);
 });

Ejecutar Socket.io en Xamarin.Android


Es muy frecuente querer ejecutar esta grandiosa tecnología en la mayoría de recursos que usamos, por lo que esta vez les enseñaré a implementar Socket.io sin necesidad de usar terceros y sacarse las canas entre versiones y dependencias en servidor, etc etc… como me pasó a mi.

La ejecución es muy sencilla, tenemos un WebView donde se ejecuta código en Razor, HTML y un poco de JS donde se hará un hilo de comunicación de doble vía entre el WebView y el Code-Behind, a esta técnica la llamé BlackOps, ya que aquí se harán todas estas tareas oscuras y transparentes al usuario final, la cual darán una sensación de que corre de manera nativa.

  • En Xamarin Studio crear un nuevo proyecto tipo “Android WebView Application”, en este caso lo llamaré “EtonMessy_And”. 
  • En la carpeta Assets crear otra carpeta llamada “js” y crear un archivo llamado “blackOpsHelper”, descargar el cliente de Socket.io desde https://cdn.socket.io/socket.io-1.0.4.js y JQuery desde http://code.jquery.com/jquery-1.11.0.min.js 
  • En el archivo RazorView.cshtml agregar las referencias necesarias a los script.
  • Como buena práctica es encapsular toda la lógica en un archivo *.js que podría llamarse BlackOpsHelper.js, sin embargo, por razones del diseño del control WebView en Xamarin no es posible ejecutar llamados a Internet (probablemente se corrija más adelante), por el momento..  añadir el código base que he diseñado en una etiqueta “script”.

Continue reading “Ejecutar Socket.io en Xamarin.Android”

Crear Website básico en Microsoft Azure


El pasado jueves 11 de Diciembre en Microsoft Branch Colombia se estaba llevando a cabo unas sesiones técnicas para emprendedores del país, en esta sesión accedí a dictar la charla donde se tomarán los siguientes temas:

  • Websites Azure
  • Virtual Machines Azure
  • Windows Phone
  • Xamarin

Por lo cual decidí compartir este código usado durante la sesión en varias secciones, la primera es acerca de la creación básica de Websites en Azure.

Creando el Front End

En esta ocasión se decidió hacer un sitio muy básico y estático que a la final solo se conectará con un Backend publicado en otro lado.

En este caso se simulará un negocio de una disquera musical, sin embargo aclaro que todos los logos y nombres de marca son propiedad registrada.

  • Seleccionar una plantilla adecuada, en este caso ir a http://startbootstrap.com/template-overviews/freelancer/
  • Descomprimir el contenido y renombrar la carpeta a algún nombre fácil de recordar.
  • Modificar las imágenes primarias, donde aparece el muñeco por una foto de algún Dj y agregarle un background a esa sección, esto se hace en el archivo freelancer.css
header {
    text-align: center;
    color: #fff;
    background: #18bc9c;

    background-image: url(../img/DJ-Background.jpg);
  
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
  
    /* Background image doesn't tile */
    background-repeat: no-repeat;
  
    /* Background image is fixed in the viewport so that it doesn't move when 
       the content's height is greater than the image's height */
    background-attachment: fixed;
  
    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;
}

Continue reading “Crear Website básico en Microsoft Azure”

How To: Escalar imágen manteniendo proporciones – JQuery


La mayoría de veces tenemos que poner un listado imágenes de manera estándar pero la peor práctica es volver todas estas imágenes al mismo tamaño una a una en un editor de imágenes, ya que por lo general estas vendrán de algún servicio web o directamente desde los clientes.

Teniendo esta necesidad me puse a la tarea de buscar en Internet y mejoré un código muy bueno que encontré en la siguiente Web: http://ericjuden.com/2009/07/jquery-image-resize/ Continue reading “How To: Escalar imágen manteniendo proporciones – JQuery”

Snippet: storageHelper.js


El día de hoy he creado una pequeña librería que encapsula las funcionalidades para LocalStorage de HTML5, esto se puede usar en cualquier Web App o Mobile App.

Sin más o menos que decir les dejo la librería: Continue reading “Snippet: storageHelper.js”

How To: Consumir REST service desde WebAPI en Frontend


Este Snippet utilizará 2 verbos HTTP que son GET y POST, por lo general son los que más se utilizan.

GET

En ASP .NET Web API se debe tener el controlador de la siguiente manera

public IEnumerable<string> Get()
{
    return new string[] { "value1", "value2" };
}

Donde IEnumerable es el tipo de dato que se desea obtener, entre estos caben los tipos de datos estándares como:

string
int
double
float
etc...

Sin embargo se pueden obtener objetos definidos, este es el caso del uso de bases de datos con Entity Framework.

Como por ejemplo, se requiere obtener un usuario filtrado por cédula o identificador de país

public Usuario Get(string id)
{
    Usuario usuario = _usuarios.GetUsuario(id);
    if (usuario == null)
    {
        usuario = new Usuario() { Cedula = "-1", Contraseña = "N/N", Id_Usuario = -1 };
    }
    return usuario;
}

Ahora solo nos queda ir a nuestro frontend donde queremos consumir, para esto usaremos Ajax y JQuery.

var idUsuario = '1023925417';
 $.getJSON("/api/APIUser/" + idUsuario)
.done(function (data) {
    alert('Ud es ' + data.Id_Usuario);
});

POST

En este caso la variable de datos se llama marcador_usuarioData y contiene información en JSON de la manera.

En la petición definimos que es de tipo POST, una url hacia donde queremos apuntar, los datos, el tipo de contenido y tipo de dato.

var marcador_usuarioData = JSON.stringify({
    Id_Usuario: idUsuario[0],
    Id_Partido: id,
    Marcador_Equipo_A: marcadorA,
    Marcador_Equipo_B:marcadorB
});
$.ajax({
    type: "POST",
    url: "/api/APIGame",
    data: marcador_usuarioData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    processData: true,
    success: function (data, status, jqXHR) {

        console.log('Ok:' + data);

    },
    error: function (xhr) {
        alert(xhr.responseText);
    }
});

Y en el código de backend debe definirse el tipo de dato conocido para si mismo, por ejemplo mirar la estructura con la que se envía “marcador_usuarioData” y mirar como se compone el controlador y la clase

public void Post(Marcador_Usuario item)
{
    // something code
}
...
public partial class Marcador_Usuario
{
    public int Id_Usuario_Marcador { get; set; }
    public int Id_Usuario { get; set; }
    public int Id_Partido { get; set; }
    public Nullable<int> Marcador_Equipo_A { get; set; }
    public Nullable<int> Marcador_Equipo_B { get; set; }
    public Nullable<int> Puntos { get; set; }
}

Crear Cloud Service desde Azure PowerShell automaticamente


En la entrega pasada se vio como crear y publicar un Cloud Service, pero muchas veces esto no es práctico ni funcional, lo que se necesita en el mundo real son sistemas automatizados que generen mil cosas por detrás para entregarnos un resultado, como es el caso de una compra por Internet con tarjeta de crédito, también el proceso de autenticación en un sitio web, en fin…

Así que sin más preámbulos esta entrada expondrá el típico caso de una empresa que permite hacer páginas web para clientes que pagan algún dinero, en este caso nos basaremos desde el ejemplo anterior pero esta vez será explicado en detalle y con imágenes.

Configurando y preparando el escenario

En Microsoft Azure o en algún entorno de virtualización preferido crear una máquina virtual con Windows Server 2012 R2 Datacenter

Configurar dicha máquina, para el caso de Microsoft Azure escoger la fecha de la versión de Windows, Nombre, Capa, Tamaño Nombre de usuario y una contraseña Continue reading “Crear Cloud Service desde Azure PowerShell automaticamente”

Día del maestro – FacultyCol, WebGL Demo 2 parte 3


Para finalizar esta serie de tutoriales concluiré con el último paso de esta demo de poder controlar un Photosynth mediante mi móvil; recapitulando ya tenemos el servidor funcionando, tenemos el bridge entre IE y el server, nos queda hacer la App, la cual para esta usaré Xamarin con C#. En Xamarin Studio crearemos un proyecto nuevo para Android llamado “AndroidAppXamarin”, cuando esté creado iremos a “Resources/layout/Main.axml” el cual es el archivo para nuestra interfaz gráfica, aquí crearemos todos los elementos necesarios para que nuestra App pueda funcionar. Necesitaremos los siguientes controles:

  • 2 TextView.
  • 2 Spinner.
  • 1 SeekBar.
  • 1 Button.
  • 1 LinearLayout con 3 botones.

Y nos quedará una interfaz algo parecida a la siguiente: Por el momento probablemente no se ve así tal cual, pero tranquilos, el código es el siguiente:   Continue reading “Día del maestro – FacultyCol, WebGL Demo 2 parte 3”

Día del maestro – FacultyCol, WebGL Demo 2 parte 1


En la segunda demo quería presentar algo más atractivo y más alucinante que en la primera, ya que si bien montar un escenario en 3D en la Web sin plugins ni ningun instalador externo es sorprendente estamos un tanto acostumbrados a ver este tipo de cosas; así que me propuse a mejorar esta y la siguiente demo.

Para esta seleccioné una tecnología que se llama Photosynth que fue desarrollada por un equipo de Microsoft Research en el que permite capturar escenarios reales en 3D con la posibilidad de visualizarlos, este trabaja actualmente con HTML5 y unos que otros hacks hechos en Javascript.

http://photosynth.net/preview Continue reading “Día del maestro – FacultyCol, WebGL Demo 2 parte 1”