Cómo hacer un login con Google Apps Script

Hace ya bastante publiqué un articulo sobre como hacer un weblogin con Google Apps Script: https://googleappscriptsweb.blogspot.com/2015/12/como-hacer-un-web-login-con-google-apps.html 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


Related Posts Plugin for WordPress, Blogger...