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.



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:

  1. 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
    1. 1. La unica manera de redireccionar a una url con este sistema....la verdad no lo tengo claro, nunca lo he hecho. Deberias mirar como hacerlo con html e intentar ponerlo ahi. Una manera no directa sería poner un link a la web donde quieres una vez realizado el login. Otra manera tal vez sería ponerle un iframe. Sinceramente, al no haberlo hecho nunca se me hace complicado orientarte mejor.
      2. Los usuarios se crean en el spreadsheet donde tengas instalado el script (hoja users). Si miras el link al post viejo tal vez lo ves más claro.

      Eliminar
  2. Hola. Lo copie y pegue y no funciono. Hay que modificarle algo?

    ResponderEliminar
    Respuestas
    1. Buenas,

      Le veo dos opciones:
      - Google ha vuelto a cambiar algo :), que a veces pasa y deja de funcionar todo

      - O bien, no publicaste la web con el último código.... lo hiciste?

      Eliminar
    2. Hola antes que nada muchas gracias por ayudarnos en nuestro aprendizaje,
      En mi caso he copiado el codio y publicado funciona el html pero no retorna nadaluego del click al boton

      Eliminar
    3. Hola ,

      Recuerda que solo es un ejemplo de login.

      Lo que quieres que haga despues tendrás que ponerlo tu :)

      Cualquier duda, hazmela llegar

      Nos vemos

      Eliminar
  3. 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
    1. Tienes toda la razón.

      No parece estar funcionando. Tengo que revisarmelo.

      Seguramente algún cambio de google me habrá afectado.

      Os digo algo cuando lo tenga arreglado

      Gracias por avisar

      Nos vemos

      Eliminar
    2. Tal vez te sirva este link: https://googleappscriptsweb.blogspot.com/2020/08/como-tener-un-weblogin-profesional-con-google-apps-script.html

      Eliminar
  4. 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
    1. Tal vez este link te pueda ayudar en algo: https://googleappscriptsweb.blogspot.com/2020/08/como-tener-un-weblogin-profesional-con-google-apps-script.html

      Eliminar
  5. 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
    1. Si, ya soys unos cuantos que os quejais de lo mismo.

      Todo parece que Google ha cambiado algo y hace que el código no funcione.

      Me lo intentaré mirar y colgar el nuevo código a la que pueda.

      Voy un poco liado ultimamente, lo siento

      Os aviso cuando lo tenga

      Eliminar
  6. No me deja agregar a mi Google sites me ayudas

    ResponderEliminar
    Respuestas
    1. Prueba con esto: https://googleappscriptsweb.blogspot.com/2020/07/como-poner-en-un-iframe-una-web-hecha-con-gas.html

      Eliminar
  7. Hola muy buen aporte, pudiste solucionarlo?

    ResponderEliminar
  8. Hola muy buen aporte, pudiste solucionarlo?

    ResponderEliminar
    Respuestas
    1. Voy bastante liado ultimamente ( para variar :) ).

      Si el problema lo tienes al hacer un iframe te recomiendo que mires este link: https://googleappscriptsweb.blogspot.com/2020/07/como-poner-en-un-iframe-una-web-hecha-con-gas.html

      A ver si encuentro algún hueco y me reviso el código.

      Os mantengo informados

      Eliminar
  9. 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
    1. Seguramente tienes algún problema con el iframe.

      Has probado con este artículo ? https://googleappscriptsweb.blogspot.com/2020/07/como-poner-en-un-iframe-una-web-hecha-con-gas.html

      Ya me diras como te ha ido

      Nos vemos

      Eliminar
    2. gracias por tu respuesta. ahi vi tu link pero no entiendo donde debo hacer ese cambio de codigo antiguo por uno nuevo... te explico yo tengo un goolgesite y quiero que los usuarios se loguen para ver contenido privado.. pero intente mil cosas ya y no lo logro ahi estoy viendo lo que me pasas. pero no se donde hacer es cambio.. podrias darme una manito.. mil gracias desde ya..

      Eliminar
    3. Lo que quieres hacer no es fácil. La única opción que le veo es que la pagina privada la sirvas directamente en la aplicación.

      Si no lo ves claro, ponte en contacto conmigo y lo hablamos: https://googleappscriptsweb.blogspot.com/p/como-contratar-mis-servicios-de.html

      Eliminar

Tal vez te interese