Tutorial per afegir un camp de comprovació a Blogger

Per a afegir un camp de comprovació a Blogger que ens dirigeixi en una pàgina, primerament
haurem d’editar la plantilla de Blogger per a afegir la funció que:

1) Farà la comprovació de que la contrasenya introduïda es la correcta

2) En cas de que sigui correcta, ens redirigirà a la pàgina següent

Primerament i de forma opcional, afegirem les llibreries de bootstrap i javascript (per a poder
afegir components més visuals al nostre Blog.

Per a fer-ho, entrarem a Blogger amb el nostre compte i anirem a editar l’HTML de la plantilla.

Tot el codi HTML que vulguem afegir, haurà d’incloure’s just abans del tag HTML:

<b:skin>...
Afegirem el següent text HTML:
<!-- Afegim el CSS de la llibreria bootstrap -->
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'
rel='stylesheet'/>
<!-- Afegim el javascript de la llibreria bootstrap -->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'/>
<!-- Afegim el javascript de la llibreria jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

A continuació, afegirem la funció javascript que es la que ens farà la comprovació y redirigirà a
la pàgina. Aquesta funció rep tres paràmetres:

1) El password codificat en Base64

2) ID de l’objecte HTML que te la caixa de text
3) ID del formulari HTML on es troba la caixa de text
4) La pàgina web a la que hem de redigir en Base64

<script type='text/javascript'>
//<![CDATA[
var ERROR_MESSAGE = "EL CODI NO ÉS CORRECTE!! TORNA-HO A INTENTAR";
function checkAndRedirect(password, input, form, action){
var inputValue = document.getElementById(input).value;
if(atob(password).toLowerCase() === inputValue.toLowerCase()){
var formObj = document.getElementById(form);
formObj.action = atob(action);
formObj.submit();
}else{
alert(ERROR_MESSAGE);
}
}
//]]>
</script>

Nota 1: No cal entendre com està feta la funció, simplement es pot copiar i enganxar
directament a la plantilla de Blogger. No obstant, es pot canviar el text d’error modificant la línia
ressaltada en groc (Si es posen dobles cometes, davant s’ha de posar la contrabarra \"):
var ERROR_MESSAGE = "EL CODI NO ÉS CORRECTE!! TORNA-HO A INTENTAR";

Nota 2: En el cas de voler afegir una mica més de seguretat, es pot ofuscar el codi abans d’afegir-
lo. Per a fer-ho, en comptes d’enganxar el codi anterior, introduirem tot el codi JavaScript a la
següent pàgina: https://obfuscator.io/ , generarem el codi ofuscat y l’inclourem a dins del tag
<script></script>.
<script type='text/javascript'>
//<![CDATA[
var _0x17fe=['submit','EL\x20CODI\x20NO\x20ÉS\x20CORRECTE!!\x20TORNA-
HO\x20A\x20INTENTAR','getElementById','value','toLowerCase','action'];(function(_0x3a4a12,_0x288d39){var
_0x2606e3=function(_0x26c599){while(--
_0x26c599){_0x3a4a12['push'](_0x3a4a12['shift']());}};_0x2606e3(++_0x288d39);}(_0x17fe,0x7f));var
_0xb50b=function(_0x5379e0,_0x2f013a){_0x5379e0=_0x5379e0-0x0;var _0x2263fe=_0x17fe[_0x5379e0];return
_0x2263fe;};var ERROR_MESSAGE=_0xb50b('0x0');function
checkAndRedirect(_0xf8548a,_0x2ee853,_0x3bb7f5,_0x4dc71e){var
_0x28f892=document[_0xb50b('0x1')](_0x2ee853)[_0xb50b('0x2')];if(atob(_0xf8548a)[_0xb50b('0x3')]()===_0x28f892
[_0xb50b('0x3')]()){var
_0x134061=document[_0xb50b('0x1')](_0x3bb7f5);_0x134061[_0xb50b('0x4')]=atob(_0x4dc71e);_0x134061[_0xb50b('0x5
')]();}else{alert(ERROR_MESSAGE);}}

//]]>
</script>
La segona part serà afegir el codi HTML a l’entrada del nostre Blog. Bàsicament caldrà crear el
formulari HTML amb el codi de text i cridar a la funció que hem creat anteriorment.
<form class="form-inline" id="prova3_formCodi" method="GET" onsubmit="return false;">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon left-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input class="form-control" id="prova3_codi" placeholder="Codi"
type="password" />
</div>
</div>
<button class="btn btn-primary" onclick="javascript:checkAndRedirect('Y29y',
'prova3_codi', 'prova3_formCodi', 'L3AvcmVzcG9zdGEtcHJvdmEtbW9yc2UuaHRtbA==');"
type="button">Envia!
</button>
</form>

En aquest cas tenim l’exemple de la pàgina de la prova del codi Morse.

1) El password correcte es: cor . No obstant, l’hem de passar a Base64 mitjançant la pàgina:
https://www.base64encode.org/. El resultat es: Y29y.
2) La caixa de text on es posarà el password te l’ID: prova3_codi.
3) El formulari HTML on es troba la caixa de text te l’ID: prova3_formCodi.
4) La pàgina a la que volem redirigir es una pàgina oculta de Blogger que te la següent
direcció:https://llenguailiteraturacatalana-escaperoom.blogspot.com/p/resposta-
prova-morse.html. Codificada amb Base64 utilitzant novament la pàgina:
https://www.base64encode.org/ dona com a resultat:
aHR0cHM6Ly9sbGVuZ3VhaWxpdGVyYXR1cmFjYXRhbGFuYS1lc2NhcGVyb29tLmJsb2d
zcG90LmNvbS9wL3Jlc3Bvc3RhLXByb3ZhLW1vcnNlLmh0bWw=.

Per reduir la mida d’aquest camp, podem fer un pas previ que seria escorçar prèviament
la pàgina mitjançant: https://bit.ly/2zHT45R, en Base64:
aHR0cHM6Ly9iaXQubHkvMnpIVDQ1Ug==.

No obstant, si es tracta d’una altra pàgina del mateix blog, en comptes de posar tota la
URL, només caldrà posar la part de la pàgina concreta, en aquest cas: /p/resposta-
prova-morse.html, que en Base64 seria:
L3AvcmVzcG9zdGEtcHJvdmEtbW9yc2UuaHRtbA==.

Per tant, en aquest exemple, la crida que farem en clicar el botó serà la següent:
javascript:checkAndRedirect('Y29y', 'prova3_codi', 'prova3_formCodi',
'L3AvcmVzcG9zdGEtcHJvdmEtbW9yc2UuaHRtbA==');

checkAndRedirect(password, input, form, action);