Cómo hacer un web login con Google Apps Script

Artículo relacionado con la programación web mediante Google Apps Script
Este artículo ha sido usado como base para implementar un chat con Google Apps Script

Hace un tiempo expliqué cómo hacer una web con Google Apps Script . Debido a ese post me han llegado diversas peticiones de como podría hacer un login para acceder a contenido más personalizado o privado.

Como siempre os digo es más fácil de lo que parece.

Este ejemplo contiene un parte de html y una parte de GAS. Evidentemente la parte de html se puede mejorar con CSS u otras tecnologías para hacerlo más atractivo, yo solo os pongo un ejemplo sencillo para que veáis como funciona.

Presupongo que para utilizar este tutorial  ya habéis leído el tutorial para hacer webs con GAS, sino es así revisadlo primero  o iréis perdidos: cómo hacer una web con Google Apps Script

HTML:
<!DOCTYPE html>
<html>
  <head>
    <script>
    function HaEntrado(enter)
    {
        if(enter)
        {
          document.getElementsByName("mensajebienvenida")[0].innerHTML = "Bienvenido";
        }
        else
        {
          document.getElementsByName("mensajebienvenida")[0].innerHTML = "Usuario o password incorrecto";
        }
 
    }
 
    function tryLogin()
    {
        var user=document.getElementsByName("login")[0].value;
        var password=document.getElementsByName("password")[0].value;
        google.script.run.withSuccessHandler(HaEntrado).Login(user,password);
    }
    </script>
 
  </head>

  <body onLoad="setInterval('refresher()',5000);">
  <label name="mensajebienvenida">  Usuari no registrado   </label>
   <section class="container" >
    <div class="login" name="LoginPage">
      <h1>Zona privada para lectores del blog</h1>
      <form method="post" action="index.html">
        <p><input type="text" name="login" value="" placeholder="User"></p>
        <p><input type="password" name="password" value="" placeholder="Password"></p>
        <p class="submit"><input type="submit" name="commit" value="Login" onclick="tryLogin()"></p>
      </form>
    </div>
  </section>

  </body>
</html>


GS:
//Retorna la página principal
function doGet() 
{
  return HtmlService.createHtmlOutputFromFile('index');
}

var archivo_login      = 'https://docs.google.com/spreadsheets/d/1fKu-sk2Tl7K3OD_6vGA-OaDUJ96_tw0NpR433_a8cwo/edit#gid=0';

//Gestiona el login del usuario y nos dice si la contraseña es correcta o no.
function Login(user,password) 
{
  var spreadsheet = SpreadsheetApp.openByUrl(archivo_login);
  var sheet = spreadsheet.getActiveSheet();
  var rows = sheet.getDataRange();
  var numRows = rows.getNumRows();
  var values = rows.getValues();
  var passwordMD5 = Utilities.base64Encode(Utilities.computeDigest(Utilities.DigestAlgorithm.MD5,password));
  
  Logger.log('user:' + user + ' password:' + password);
   
  for (var i = 1; i <= numRows - 1; i++) 
  {
    var row = values[i];
    
    if (row[0] == user )
    {
      if(row[1] ==  passwordMD5)
      {
         sheet.getRange(i+1,3).setValue(row[2]+1);
         return true;
      }
    }
  }
  return false;
}


Si queréis ver un ejemplo funcionando probad a acceder a esta web donde tengo el código funcionando: web login


Si lo probáis podéis usar como usuario y password : usuario0-password0, usuario1-password1, etc...

Si os funciona bien debería apareceros algo de este estilo:


Si os fijáis el password que guardo en el servidor no tiene ninguna relación con el password que se usa para acceder, de forma que si un hacker entrase en el servidor no tendría acceso a los passwords.



Si tenéis cualquier problema al probar este ejemplo decidmelo y os echaré un cable.

19 comentarios:

  1. buenas lo primero muchas gracias por este aporte y le estaría muy agradecido y me dice como quitar el panel de registro una vez ya he puesto el usuario y las contraseñas correctas.
    De modo que me salga lo de Bienvenido y depues lo que yo quiera.
    gracias:)

    ResponderEliminar
    Respuestas
    1. Es sencillo.... El servidor nos devuelve un string ( un html ) que lo podemos poner donde queramos.
      Si lo que quieres es quitar el panel de login debes poner el html que devuelve el servidor dentro del body de la web, sustituyendo así el código que habia hasta ahora....

      Creo que te estoy liando más que no ayudando... dame unos dias y hago un tutorial para explicarlo mejor, ya verás que es más sencillo de lo que parece.

      Eliminar
  2. Como puede crear, un sistema de registro de nuevos usuarios?

    ResponderEliminar
    Respuestas
    1. Gran pregunta :D . Dame unos días que ahora mismo voy un poco liado y lo monto para que lo tengáis a mano.
      Gracias por la pregunta, estaba esperando que alguien lo pidiera :D

      Eliminar
  3. Por alguna razón, hace dos meses este código funcionaba y ahora no ¿Qué podrá ser?

    ResponderEliminar
    Respuestas
    1. Que problema te da? GAS es un poco puñetero por que a veces google cambia cosas sin avisar... generalmente todo funciona pero a veces tienes sorpresas... dime que te ha pasado y lo miro

      Eliminar
    2. Cuando introduzco usuario y password entra a mi SpreadSheet sin problema (lo sé porque añade 1 al número de accesos del usuario). Pero creo que la función Login(user,password) devuelve "undefined" en lugar de true o false (lo sospecho porque no se ejecuta la función HaEntrado).
      Gracias por tu rápida respuesta

      Eliminar
    3. No me cuadra... hazme copypaste de tu código... lo que me comentas no tiene demasiado sentido... a ver si con el código puedo verlo mejor

      Eliminar
    4. Mi código es exactamente el tuyo (salvo la dirección de la Spreadsheet). Acabo de darme cuenta de que tampoco me funciona tu ejemplo de web login. ¿Será cosa del Chrome?

      Eliminar
    5. Yo uso crhome... y sin problemas. Lo que me comentas no tiene demasiado sentido... me inclinaría más tal vez por un tema de permisos.... prueba a poner ese mismo código en otra web a ver si te vuelve a pedir permisos y se espabila. Sino, deberás tracear y ver exactamente que hace. siento no ser de más ayuda

      Eliminar
  4. En tu web de ejemplo (https://sites.google.com/site/ejemplologin/) tampoco me va bien. Al meter usuario0 y password0 se me queda en blanco la pantalla (desaparece hasta el formulario de login)

    ResponderEliminar
    Respuestas
    1. Ok... estoy convencido que iba, así que me lo tendré que mirar... alguna chorrada que cambiarian los de google.... No se decirte cuando lo tendré... te aviso si lo veo

      Eliminar
    2. Muchas gracias por tu interés. Si descubro yo algo por mi cuenta te aviso.

      Eliminar
    3. Creo que el problema es el botón que envía el formulario. Si a la etiqueta 'form' se le quita action y se saca el botón del formulario puede que funcione. En otras palabras, creo que el problema es la llamada que hace index.html a sí misma.

      Eliminar
    4. Me lo tendré que mirar con calma ( voy un poco liado ultimamente) pero tiene sentido.. hace un tiempo google cambio algo de los scripts llamado a html por temas de seguridad..... creo que existe una solución mejor a tu problema de lo que propones.... a la que pueda me pongo... gracias por colaborar!!

      Eliminar
  5. Hola

    desconozco cual será el fallo, pero si es cierto que google cambia "a su bola" los comandos y lo que funcionaba, deja de funcionar.
    Soy aficionado y claro, nada de informático, pero me gusta aprender y probar.
    Quisiera al hilo del ejemplo, poder hacer funcionar el login contra un spreadsheet y ese usuario, pasarlo a la siguiente página.

    Mi idea, que quiero hacer en el cole, es que los padres entren y con el login, pasen a una web donde se van dando de alta en las actividades que quieren que hagan los crios (esos datos van y bajo el nombre del login, a un spreadsheet), van dando de alta en dichas actividades y al finalizar, les imprime las elegidas, mandando un mail a su vez indicando al ampa, que un usuario se ha apuntado a ... lo que sea.

    Gracias!!!

    ResponderEliminar
  6. La idea me parece muy chula, útil y sencilla de hacer. Como siempre, voy de culo entre unas cosas y otras, pero realmente este proyecto me ha ilusionado. Si es un tema que te hace falta para ya puedes mirarte formularios de google, he visto cosas hechas que darian bastante el pego. Si puedes esperar un poco te lo monto ni que sea el esqueleto. Nos vemos y gracias por tu aporte

    ResponderEliminar
  7. Hola de nuevo

    por completar la idea que en su día comenté para el ampa, al "arrancar" la web en el pc, lee un fichero local txt con el curso que corresponde. Eso pasa a variable y seguido lee datos de un spreadsheet con los nombres de l@s hij@s que filtra por dicho curso, donde con una barra de seleeción pichas sobre el cri@ elegido y luego se valida con una clave también existente en dicho fichero que el padre debe teclear.
    Las actividades a las que se les apuntan, van nuevamente a un spreadsheet y el resto... ticket y mail, como expliqué.
    Un poco liada, pero son muchos temas y cosas...

    ResponderEliminar
    Respuestas
    1. no lo haria con txt , lo haría con spreadsheets de google directamente. Me sabe mal por que te dije que me pondría pero aún no he hecho nada. Nuevamente, a la que tenga un momento, me pongo. sorry por la espera

      Eliminar

Related Posts Plugin for WordPress, Blogger...