Hoy mismo Vagabundia ha publicado un excelente artículo donde explicaba por qué no se deben poner contraseñas en blogger desde el lado del cliente.
Tiene toda la razón en que las contraseñas tienen que ser puestas del lado del servidor (ya sea PHP, Java, Ruby, etc).

Pero podemos hacerlo desde el servidor. Todo se trata de tener un pequeño código PHP que compruebe una contraseña que le enviaremos via Javascript.

Si no he cometido ningún fallo, es imposible saber desde el código fuente de la página cuál es la contraseña, ni la página a la que va.

Actualización:Este método es infinitamente más seguro que cualquier otro que se pueda hacer para blogger, pero no es infalible. Nos aprovechamos de las opciones de blogger para que no sea indexado, pero seguirá accesible si, por ejemplo, se pone la url por casualidad.
Como ya digo abajo, no soy partidario de bloquear contenido y, aunque esta sea una solución bastante fiable, no es definitiva.

Paso 1: Crear la página protegida

Lo que protejamos con contraseña tiene que ser una página. ¿Por qué?, porque las páginas no aparecen en los feeds.

Tened en cuenta que para que no se pueda acceder a ella desde los motores de búsqueda, es necesario que (en el editor), en Etiquetas de robots personalizadas, deseleccionemos todas las opciones y dejemos sólamente none.

Paso 2: El HTML

El código HMTL iría en cualquier entrada o widget donde queráis que se pueda introducir la contraseña, y sería algo así:

<style type="text/css">
.ec-pass-error {
color: red;
}
.ec-pass-correct {
color: green;
}
#ec-pass-result {
text-align: center;
}
</style>
<div id="ec-pass">
<p><label for="ec-pass-input">Introduce la contraseña:</label><input type="text" id="ec-pass-input" name="ec-pass-input" placeholder="Introduce la contraseña">
</p>
<p><button id="ec-pass-button">Comprobar</button></p>
<p id="ec-pass-result"></p>
</div>
<script type="text/javascript">
(function(window, document, undefined){
var URL_ARCHIVO_PHP = 'http://emiliocobos.site40.net/password/index.php';
function $(id) {
return document.getElementById(id)
}
// Convertir JSON a objeto para navegadores antiguos
function parseJSON (data) {
return (window.JSON && window.JSON.parse) ? window.JSON.parse(data) : (new Function("return " + data))()
}
function createRequest(){
return window.ActiveXObject ? new window.ActiveXObject("Microsoft.XMLHTTP") : new window.XMLHttpRequest();
}
var resultDiv = $('ec-pass-result');
// para hacerlo lo más pequeño posible usaremos onclick en vez de addEventListener | attachEvent
$('ec-pass-button').onclick = function(){
// Cogemos la clave que ha introducido el usuario
var pass = $('ec-pass-input').value,

// Enviamos los datos al servidor
req = createRequest();

req.open("POST", URL_ARCHIVO_PHP, false);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.onreadystatechange = function(){
// Si la carga correctamente
if( req.readyState === 4 && req.status === 200 ){
// Obtenemos el resultado
var result = parseJSON(req.responseText);
// Si es correcto
if(result.correcto){
// Mostramos un mensaje y un link a la url
resultDiv.className = "ec-pass-correct";
resultDiv.innerHTML = "Has acertado la contraseña: click en el link inferior para ir a la página:<br><a href=\"" + result.url + "\" target=\"_blank\">Página protegida</a>"
// Si no es correcto
} else {
// Mostramos un mensaje de error
resultDiv.className = "ec-pass-error";
resultDiv.innerHTML = "Esa no era la contraseña, lo siento :("
}
}
}
req.send('password=' + encodeURIComponent(pass));
}

})(window, document)
</script>

Nótese que tenéis que cambiar la variable donde pone URL_ARCHIVO_PHP por la url correspondiente a vuestro archivo.

Paso 3: El PHP

Ahora tenemos que subir un archivo PHP con el siguiente contenido a un hosting propio:

<?php
// Acceder desde javascript a otro dominio exige esto. Cambiar por la url de vuestro blog
header('Access-Control-Allow-Origin: http://emiliocobos.net');

// La contraseña (debería ser más fuerte que esta ;))
$contrasena = 'abcdef';

// La url de la página protegida
$nueva_url = 'http://emiliocoboscmc.blogspot.com/p/pagina-protegida-por-contrasena.html';

// NO TOCAR A PARTIR DE AQUÍ
//////////////////////////////////////////

if( ! isset( $_POST['password'] ) )
die("ERROR: NO SE RECIBIÓ UNA CONTRASEÑA");

$pass = urldecode($_POST['password']);
$result = array(
'url' => null,
'correcto' => false
);
if( $contrasena === $pass ){
$result =array(
'url' => $nueva_url,
'correcto' => true
);
}
echo json_encode($result);
?>

Tenéis que cambiar la url en Access-Control-Allow-Origin (la directiva que permite que accedamos desde nuestro dominio), y en $nueva_url por la página a la que queréis llevar a quien acierte la contraseña. La contraseña deberíais modificarla. Tened cuidado con caracteres especiales como tildes y eñes, porque si están en la contraseña no funcionará.

Demostración

La contraseña es abcdef

Conclusión

Yo, en lo personal, no soy partidario de proteger contenido, pero entiendo que la gente pueda tener la necesidad de hacerlo. De todas maneras, me gustaría deciros que si tenéis la posibilidad de no protegerlo, no lo protejáis.

Nota importante:

Para que funcione en todos los casos, debido al fiasco de los redireccionamientos de blogger, es necesario usar el script para evitarlo.
Esto pasa porque solo autorizamos un dominio a acceder al script PHP.

10 pensamientos en “Contraseñas en blogger: La posibilidad existe

  1. Imagen de TommyTommy el dijo:

    Hola, Emilio
    tengo una duda, seria posible poner 2 enlaces.
    Una ves introduce la contraseña, sale un enlace que pone, Página protegida, se podría poner otro mas, ya que no creare una entrada para mostrar el enlace, serán 2 enlaces que te llevaran otra web. No se si me explicado bien, podría ayudarme.
    Muchas gracias por este post y por todos los anteriores.
    Un saludo.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Creo que te he entendido: quieres dos enlaces en vez de uno, no?

      Puedes cambiar en el PHP:

      'url' => $nueva_url,

      por:

      'url' => array($nueva_url, $nueva_url_2),

      Y crear una variable llamada $nueva_url_2 de la misma manera que $nueva_url (debajo de esta).

      Y luego cambia en el Javascript:

      if(result.correcto){
      	// Mostramos un mensaje y un link a la url
      	resultDiv.className = "ec-pass-correct";
      	resultDiv.innerHTML = "Has acertado la contraseña: click en el link inferior para ir a la página:<br><a href=\"" + result.url + "\" target=\"_blank\">Página protegida</a>"

      por:

      if(result.correcto){
      	// Mostramos un mensaje y un link a la url
      	resultDiv.className = "ec-pass-correct";
      	resultDiv.innerHTML = "Has acertado la contraseña: click en el link inferior para ir a la página:<br><a href=\"" + result.url[0] + "\" target=\"_blank\">Página protegida</a><br><a href=\"" + result.url[1] + "\" target=\"_blank\">Página protegida 2</a>"

      Y si quieres que el enlace lleve otro texto, cámbialo ahí también.

  2. Imagen de TommyTommy el dijo:

    Muchas gracias Emilio, una ves termine el blog le pasare la url, para que puedas verlo y darme una opinión. La temática es de imagenes en psd. Hasta hace unos días colabora en un blog pero el administrador nunca llego a poner mi nombre y lo subía de nuevo a otro servidor, como se a portado mal, estoy terminando el blog que estará muy pronto online.

    Un saludo.

  3. Imagen de RayRay el dijo:

    Como puedo usar en un blog de blogger una variable global para una vez chequeada la password se almacene, no la chequee cada vez que se cambia de entrada en el mismo blog.
    saludos

  4. Imagen de RonaldRonald el dijo:

    Me ayudado mucho, muchísimas gracias… Pero ahora me surge una pregunta se podrá hacer como un formulario de Login que según el usuario y su contraseña tenga acceso a su link, Y si ingresa otra persona con su usuario y contraseña vaya a su otro link… Espero que me entiendas es como entrar a su correo con su usuario y contraseña. Gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.