Cómo hacer un login con Google Apps Script

Artículo relacionado con la programación web mediante Google Apps Script

Hace ya bastante publiqué un articulo sobre como hacer un weblogin con Google Apps Script: web login con google apps script pero fue un autentico desastre. Poco después de escribir el artículo Google cambió politicas de privacidad y las condiciones para poder renderizar una web con Google Apps Script, así que lo que publiqué no tiene mucha más utilidad que la de explicar un poco de teoría y poco más.

Es por esto que hoy publico un código nuevo y funcional que permite tener un login hecho enteramente con hojas de cálculo de Drive. La idea es la misma que la del artículo original pero teniendo todo el código en un solo fichero, de forma que será más fácil para todos ponerlo en marcha.

Aquí tenéis el código:

function GenerateMD5()
{
   var cell = SpreadsheetApp.getActiveSpreadsheet().getActiveCell();

   cell.setValue(Utilities.base64Encode(Utilities.computeDigest(Utilities.DigestAlgorithm.MD5,cell.getValue())));
}

function CreateWeb()
{
   var html = "<div>";
   html += "<p> El login es correcto </p>";
   html += "</div>";
   return html;
}

function Login(user,password)
{
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName("Users");
  var rows = sheet.getDataRange();
  var numRows = rows.getNumRows();
  var values = rows.getValues();
  var passwordMD5 = Utilities.base64Encode(Utilities.computeDigest(Utilities.DigestAlgorithm.MD5,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);
         var html = CreateWeb(user);
         return html;
      }
    }
  }

  return null;
}

function GetBody()
{
   var str = "<section class='container' name='container'>";
   str += "<div class='login' name='LoginPage'>";
   str += "<p><input class='centered' type='text' name='login' value='' placeholder='User'></p>";
   str += "<p><input class='centered' type='password' name='password' value='' placeholder='Password'></p>";
   str += "<button class='centered' type='submit' name='commit' value='Login' onclick='tryLogin()'> Login </button>";
   str += "</div>";
   str += "</section>";
   return str;
}

function GetScript()
{
   var str ="<script>";
   str += "function Render(html)";
   str += "{";
   str += "if(html != null)";
   str += "{";
   str += "        document.getElementsByName('container')[0].innerHTML = html;";
   str += "      }";
   str += "else";
   str += "{";
   str += "document.getElementsByName('mensajebienvenida')[0].innerHTML = 'Usuario o password incorrecto';";
   str += "}";
   str += "}";
   str += "function tryLogin()";
   str += "{";
   str += "user=document.getElementsByName('login')[0].value;";
   str += "var password=document.getElementsByName('password')[0].value;";
   str += "google.script.run.withSuccessHandler(Render).Login(user,password);";
   str += "}";
   str += "</script>";
   return str;
}

function doGet()
{
  var html = "<html>";

  html += "<head>";
  html += GetScript();
  html += "</head>";

  html += "<body>";
  html += GetBody();
  html += "</body>";

  html += "</html>";
 
  return HtmlService.createHtmlOutput(html);
}

Con solo que hagáis copypaste del código en el editor de código de una hoja de cálculo de Google ya tendréis suficiente. Si tenéis problemas con la publicación de la web a través de Google Apps Script os remitiría a un artículo que ya publiqué sobre como generar una web con Google Apps Script.

Aquí tenéis un spreadsheet de ejemplo: https://docs.google.com/spreadsheets/d/1cQXdzrjJbQ_pY6PBAzIEBSLQakrA8WHPjO-Lfobxk38/edit#gid=0

Y aquí la web funcional : https://script.google.com/macros/s/AKfycbyOVU9axRWEJlMwo-8abgNVokIHFCsPSO_yfS_eG8q7/dev

Este es el aspecto que debería tener lo que salga del código. Es sencillo, pero hace lo que debe. Si queréis se le puede aplicar CSS para que su aspecto sea mejor (esto ya os lo dejo para vosotros :) )

Podéis probarlo con 3 usuarios diferentes (mismo nombre&password): user1, user2 y user3

Probadlo y hacedme saber vuestras duda y opiniones.

Nos vemos

NOTA: Si te da demasiados problemas y necesitas un acabado profesional, puedo ofrecerte mis servicios para tener un login en condiciones por un precio muy asequible

NOTA: Si te ha gustado este post tal vez también te interese este otro sobre templates web

23 comentarios:

Unknown14 de noviembre de 2019, 16:05
Quisiera utilizar el login para ir a otra página especificamente a una tabla de awesome table, tengo dos preguntas: 1. Comó redireccionar a una url y 2. Como creo más usuarios?
ResponderEliminar
Respuestas
Unknown9 de abril de 2020, 15:38
Hola. Lo copie y pegue y no funciono. Hay que modificarle algo?
ResponderEliminar
Respuestas
Unknown19 de abril de 2020, 8:12
Buenas, no se esta abriendo la webapp https://script.google.com/macros/s/AKfycbyOVU9axRWEJlMwo-8abgNVokIHFCsPSO_yfS_eG8q7/dev

al copiar y pegar el codigo me abre la pagina correctamente pero ninguno de los botones funciona. Sabes si está funcionando? gracias
ResponderEliminar
Respuestas
Creando Arte5 de mayo de 2020, 19:08
hola que tal un gran aporte, pero cuando ejecuto los codigos me arroja error 400, me puedes ayudar con esto, gracias agradeceria muchisimo tu respuesta.
ResponderEliminar
Respuestas
Unknown12 de mayo de 2020, 14:53
hola que tal un gran aporte, pero cuando ejecuto los codigos me arroja error 400, me puedes ayudar con esto, gracias agradeceria muchisimo tu respuesta.
ResponderEliminar
Respuestas
Unknown5 de julio de 2020, 12:09
No me deja agregar a mi Google sites me ayudas
ResponderEliminar
Respuestas
Nadia31 de julio de 2020, 0:22
Hola muy buen aporte, pudiste solucionarlo?
ResponderEliminar
Respuestas
Nadia31 de julio de 2020, 0:22
Hola muy buen aporte, pudiste solucionarlo?
ResponderEliminar
Respuestas
Unknown27 de agosto de 2020, 19:34
hola que tal, estoy intentando lograr lo mismo un login para google sites.. y no lo logro... he hecho todo lo que mencionas.. seguramente en algun lugar debemos poner la url que se abre al hacer login correcto pero no encuentro el modo me podrias ayudar.. gracias por tu tiempo
ResponderEliminar
Respuestas

Añadir comentario

Tutoriales Google Apps Scripts

Cómo hacer un login con Google Apps Script

23 comentarios:

Tal vez te interese