How can i create login form that uses data from google sheet database?-CodePudding

I have created a registration form that stores user data in google sheet and i want to create a login form that uses stored data for validation to be redirected to another page.How can i do so?

CodePudding user response：

Make a backend API, using something like Express NodeJS. This backend will use the Google Sheets API to parse data from the spreadsheet.

When the front end signs in, send a request to backend, something that looks like, here's my username and password. Then, when the backend receives this request, the backend will check with the parsed google sheets data to see if the credentials are correct. If it is, then redirect them or do whatever you want.

The point of having a backend (a separate, hosted, server) as an extra step, is that this hides the spreadsheet containing all the info from the front end user. Only the server is able to see the info contained in the spreadsheet, and decide if the user's credentials are correct.

CodePudding user response：

A Login Form

google script:

function login(obj) {
  const ss = SpreadsheetApp.getActive();
  const sh = ss.getSheetByName('Login');
  const vs = sh.getRange(2,1,sh.getLastRow() - 1, 2).getValues();
  let robj = {loggedin:false};
  for(let i = 0;i<vs.length; i  ) {
    if(vs[i][0] == obj.userid && vs[i][1] == obj.password) {
      robj.loggedin = true;
      break;
    }
  }
  return robj;
}

function launchLogin() {
  const ui = SpreadsheetApp.getUi();
  ui.showModelessDialog(HtmlService.createHtmlOutputFromFile("ah1"),"Login Form");
}

html:

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="content"></div>
  <form>
    <input type="text" placeholder="UserId" name="userid" />
    <br /><input type="text" placeholder="password" name="password" />
    <br /><input type="button" value="Login" onClick="login(this.parentNode);" />
  </form>
  <div id="msg"></div>
  <script>
    function login(obj) {
        google.script.run
        .withSuccessHandler((obj) => {
          (obj.loggedin == true) ? document.getElementById('msg').innerHTML = "Your are logged in" : document.getElementById('msg').innerHTML = "Go away";
        }).login(obj);
      }
    console.log("My Code");
  </script>
</body>

</html>

userid	password
boo	hoo
me	you