Come proteggere con password i post di Blogger anche nei dispositivi mobili quali tablet e cellulari.

Come far accedere ai contenuti di un post o di una pagina di Blogger solo a chi digita correttamente una password anche se apre la pagina con un tablet o uno smartphone.

In un commento postato in un vecchio articolo in cui illustravo come permettere la visione di determinati contenuti del blog solo tramite digitazione di una password mi è stato riferito che la procedura funziona solo con i browser dei dispositivi desktop mentre si può continuare a accedere al post protetto con tablet o cellulari. In effetti su Blogger è stata abilitata la versione mobile da diverso tempo che se attivata modifica l'URL della pagina in automatico aggiungendo il suffisso ?m=1 per i post e /?m=1 per la homepage. Utilizzando i tag condizionali per una determinata pagina questi non funzioneranno con la sua versione mobile visto che avrà un URL diverso.

Si possono però fare delle modifiche abbastanza semplici per fare in modo di avere la protezione anche sui dispositivi mobili. Come nel precedente tutorial faccio presente che questa protezione vale solo per chi non sia esperto di informatica perché chi lo fosse può trovare comunque un sistema per accedere. Con questo metodo si possono quindi proteggere dei contenuti che si vuole tenere riservati ma non è consigliato per dati sensibili segreti quali account di carte di credito o simili.

La procedura è la seguente:

1. Si crea una pagina con i contenuti da proteggere che si mettono nel post dopo Inserisci Intervallo. La parte del post prima di questa riga divisoria risulterà infatti visibile in Homepage, nelle pagine di Etichette e in quelle di Archivio. Si pubblica l'articolo e si copia in un file di testo il suo indirizzo che chiameremo URL-POST-RISERVATO. I contenuti protetti potranno anche essere inseriti in un secondo momento dopo il completamento delle varie fasi
2. Si pubblica un altro post che servirà da landing page per coloro che digiteranno una password sbagliata o che annulleranno la procedura di accesso. Anche in questo caso si copierà e si salverà il suo indirizzo che indicheremo come URL-PAGINA-ERRORE.
3. Si va su Modello > Modifica HTML e si cerca la riga </head> . Subito sopra si incolla il codice che sarà funzione degli indirizzi delle pagine. Ricordo che in caso di blog gratuiti del tipo Blogspot si deve sempre usare l'indirizzo canonico vale a dire con il .com al posto del .it (importante!)

Riporto il codice da incollare sopra </head> con gli URL delle pagine che ho usato come test

<!-- Accesso con Password Inizio -->
<b:if cond='data:blog.url == &quot;http://nivo-slider-demo.blogspot.com/2011/04/post-cui-si-puo-accedere-solo-mediante.html&quot;'>
<script language='javascript'>
//<![CDATA[
var accesso = prompt("Digita la password per accedere alla pagina.")
if (accesso!="PARSIFAL32")
{location.href='http://nivo-slider-demo.blogspot.com/2011/04/pagina-di-errore.html'}
else
{alert('La password è corretta. Accesso consentito')}
//]]>
</script></b:if>
<b:if cond='data:blog.url == &quot;http://nivo-slider-demo.blogspot.com/2011/04/post-cui-si-puo-accedere-solo-mediante.html?m=1&quot;'>
<script language='javascript'>
//<![CDATA[
var accesso = prompt("Digita la password per accedere alla pagina.")
if (accesso!="PARSIFAL32")
{location.href='http://nivo-slider-demo.blogspot.com/2011/04/pagina-di-errore.html'}
else
{alert('La password è corretta. Accesso consentito')}
//]]>
</script></b:if>
<!-- Accesso con Password Fine -->

In questo codice di esempio abbiamo

1. Password = PARSIFAL32
2. URL-POST-RISERVATO = http://nivo-slider-demo.blogspot.com/2011/04/post-cui-si-puo-accedere-solo-mediante.html
3. URL-PAGINA-ERRORE = http://nivo-slider-demo.blogspot.com/2011/04/pagina-di-errore.html
4. È stato inserito un secondo blocco di codice con URL-POST-RISERVATO = http://nivo-slider-demo.blogspot.com/2011/04/post-cui-si-puo-accedere-solo-mediante.html?m=1 che altro non è che la versione mobile dell'articolo da proteggere
5. Oltre a sostituire gli URL del test con i vostri e inserire una vostra password potete cambiare anche le espressioni colorate di blu che vengono visualizzate nel messaggio  

Dopo aver salvato il modello il sistema potrebbe non funzionare ugualmente con i dispositivi mobili. Questo dipende dal fatto che nella versione mobile di default vengono disabilitati i javascript non originali presenti nel template. Per ovviare bisogna andare su Modello > Cellulare

cliccare sulla icona della ruota dentata e poi scegliere Personalizza tra tutti i modelli per mobile disponibili. Si va quindi su Salva dopo aver dato uno sguardo all'Anteprima. Potete fare una prova cercando di accedere alla pagina protetta. Visualizzerete un messaggio come questo

Digitando la password giusta che è PARSIFAL32 e che è case sensitive vale a dire con le maiuscole che sono diverse dalla minuscole e andando su OK potrete accedere ai suoi contenuti. Se invece andate su Annulla o se digitate una password sbagliata accederete alla pagina di errore.

Se provate a accedere con cellulare o con tablet visualizzerete messaggi simili e che varieranno di poco a seconda del browser utilizzato.

Concludo osservando che in teoria potrebbero essere usate password diverse per desktop e per mobile anche se non so quanto questo possa essere di una qualche utilità. La procedura è identica se invece di proteggere con password un post si decide di proteggere una pagina statica.