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.