Pubblicato il 01/11/13 - aggiornato il  | 25 commenti :

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


versione-mobile-blogger

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

protezione-passwod-blogger

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.

accesso-con-password-dispositivi-mobili

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.


25 commenti :

  1. ciaoo, solo tu mi puoi aiutare, ho cercato di modificare il modello e ho tolto delle stringhe di codice e ora il blog neanche si apre,, sto provando a istallare un altro templete ma niente non mi fa ne effettuare questa operazione e niente, appena apro subito si blocca che posso fare??? purtroppo ho dimenticato di fare una copia bakup,,,?? grazie

    RispondiElimina
    Risposte
    1. Prova a accedere da qui
      http://www.blogger.com/home
      @#

      Elimina
    2. Ciao Emilio,
      hai provato per caso a formattare il tuo modello? C'è il pulsante sempre nella pagina di modifica HTML ^^ Con la formattazione il codice dovrebbe ripristinarsi, ma perderesti ogni personalizzazione sul template (presumo, visto che non l'ho mai fatto >.<)

      Elimina
    3. @Milwaen
      No. Quel pulsante serve sì per formattare ma non nel senso della operazione che viene fatta nei computer. Il codice viene semplicemente meglio organizzato dal punto di vista estetico per poterlo modificare meglio
      @#

      Elimina
    4. Ah, ok, non lo sapevo xD Grazie per l'info! ^^ Però non c'è nessuna funzione che ripristina il codice del template originale? O se... per caso seleziona (temporaneamente) un altro template?

      Elimina
    5. Si può salvare il template e caricare provvisoriamente un modello di quelli ufficiali tipo il modello Semplice. Non conosco altri sistemi validi
      @#

      Elimina
  2. Prima di tutto, grazie mille per l'articolo!!! ^^ E' molto utile, e meno male che c'è un modo. Sei davvero una risorsa preziossima per noi blogger ^^
    Allora, ho provato inserire il codice nel template HTML, proprio sotto l'altro codice "accesso con password" che già funzionava. Purtroppo però, non va... Continua a dare accesso diretto al post sul cellulare T__T Non capisco cosa ho fatto male: se ho visto bene nel tuo post, bisognava solo copiare il codice "normale" ed aggiungere quel famigerato ?m=1 alla fine dei link... Ho anche scelto Personalizzato tra i template per cellulari. Cosa avrò sbagliato? ^^''

    RispondiElimina
    Risposte
    1. Forse ti sei dimenticata di sostituire .it con .com nell'URL. Oppure hai messo degli spazi alla fine dell'URL prima delle virgolette. Qualche volta succede. Ho testato sia con il browser sia con il cellulare e non mi pare di aver copiato male il codice del template di prova
      @#

      Elimina
    2. No, ho sempre usato .com e non ci sono spazi, l'ho ricontrollato... L'unica cosa che ho cambiato è che ho tolto i tag // utilizzando questo codice:
      <*b:if cond='data:blog.url == "http://dramacdkucko.blogspot.com/2013/04/jelszavak.html?m=1"'> (ovviamente senza *)
      (salto la riga "script=javascript")
      var accesso = prompt("Írd be a jelszót az oldal megtekintéséhez!")
      if (accesso!="XXXXX")
      {location.href='http://dramacdkucko.blogspot.com/2013/04/hibas-jelszo.html?m=1'}
      else
      {alert('Jelszó elfogadva ^^'}
      (...con le chiusure)

      Vedi per caso qualche errore? O forse dovrei utilizzare //? (comunque questi tag non li ho messi neanche nel codice "accesso con password" per la versione pc e funziona benissimo... Haaaa.... ^^'')

      Elimina
    3. Prova a procedere in questo modo
      1)Salva il nodello
      2)Cancella il codice che hai nel template e che hai preso da quell'altro mio post
      3)Incolla questo codice modificando soltanto password e URL delle due pagine
      4)Salva il template e guarda se funziona
      @#

      Elimina
    4. Wow, sembra che vada!!!!! ^^ Ho seguito il tuo consiglio e ho copiato così com'è il tuo codice, e funziona!!!!! Grazie, grazie mille, Ernesto!!! Non riuscirò mai a ringraziarti abbastanza per l'aiuto ^^

      Elimina
    5. purtroppo lo dovuto eliminare... grazie a tutti per la vostra collaborazione..

      Elimina
  3. Ciao Ernesto, ho provato questi codici, ma non funzionano. La pagina resta visibile. Perciò ho subito ripristinato il vecchio codice come spiegato nel tuo post precedente. Puoi aiutarmi please?

    Grazie, A

    RispondiElimina
    Risposte
    1. Se funzionava quello di prima deve funzionare anche questo. Se non è così come sembra significa che c'è stato qualche errore di copiatura. Magari un .it al posto del .com che è quello più comune
      @#

      Elimina
  4. Ciao Ernesto, ho provato la soluzione e funziona perfettamente. Ho notato, però, che funziona solo se è selezionata la versione per cellulari; se si preme in basso alla pagina "visualizza versione per il web" la cosa non funziona... può essere?

    RispondiElimina
    Risposte
    1. Non credo. Il link "Visualizza versione web" l'utente lo dovrebbe vedere e ci potrebbe fare tap solo se prima ha inserito la password corretta nella pagina per la versione mobile. Ci sono 2 alert, uno per il mobile e uno per il desktop. In ogni caso la password si dovrebbe digitare almeno una volta. Poi come ho detto e scritto è evidente che uno mediamente esperto di informatica se vuole riesce a entrare
      @#

      Elimina
  5. Ma oltre che per i post vale anche per le pagina? Perché ho fatto tutto come indicato ma non funziona.

    RispondiElimina
  6. Vale anche per la pagina. Se non funziona non hai incollalo bene l'indirizzo, magari hai lasciato il .it
    @#

    RispondiElimina
  7. Ciao Ernesto, questa per me è stata un'altra preziosissima perla.

    Ma... provo a chiederti di più. Se volessi inserire l'accesso ad una pagina protetta da password previo pagamento, ti viene in mente qualche piattaforma e/o tool? Ad esempio: tu effettui il pagamento di X euro e ti verrà rilasciata la password per accedere alla pagina... qualcosa di simile. Con paypal non mi trovo bene perché non consente di inserire un messaggio e quindi non saprei in che modo comunicare la pwd.

    Grazie infinite,

    Lizzy

    RispondiElimina
    Risposte
    1. No. Non mi viene in mente nessun servizio a pagamento. C'è un sistema per farsi pagare con un tweet o con un post su Facebook ma credo non sia proprio quello che cerchi
      https://www.ideepercomputeredinternet.com/2017/06/pay-with-a-tweet.html
      @#

      Elimina
  8. Ottimo articolo. Ma da sorgente pagina? Un codice per bloccare il tasto Analizza elemento, Ctrl+u

    RispondiElimina
    Risposte
    1. Si può bloccare il destro del mouse
      https://www.ideepercomputeredinternet.com/2012/12/disabilitare-destro-cursore.html
      mentre per bloccare la visualizzazione del sorgente pagina pare non ci sia un sistema sicuro. Consulta questa conversazione
      https://stackoverflow.com/questions/20372394/how-to-disable-ctrlu-using-javascript
      per saperne di più
      @#

      Elimina
  9. Grazie mille per l'articolo, ma non riesco a farlo funzionare... Il codice va inserito nell'html del tema, giusto? è l'unico html a cui riesco ad accedere...

    RispondiElimina
    Risposte
    1. Ho riproposto questa personalizzazione con un articolo relativamente più recente
      https://www.ideepercomputeredinternet.com/2015/11/blogger-password-privacy.html
      Il codice lo devi inserire andando su Bacheca -> Tema. Clicchi sulla freccetta accanto a Personalizza per poi scegliere Modifica HTML. Poi segui le indicazioni del post.
      P.S. 1) Per cercare la riga giusta devi cliccare sull'area del codice quindi digitare la combinazione da tastiera Ctrl + F e incollare nella riga in alto a sinistra la riga da cercare per poi andare su Invio. La riga verrà evidenziata.
      P.S. 2) Prima di modificare il Tema devi salvarlo per un eventuale ripristino andando su Tema -> Freccetta accanto a Personalizza -> Esegui Backup
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy