Registration, Login and Forgot Password using Google Spreadsheet

OK, I'll try it first, thank you.... :pray: :pray: :pray:

In the initialize global script url to abfuscated text block, I filled it in as shown in the following image:

in the block procedure (login and register) it says http://localhost/.

Will it be kept like that or replaced?

generally to access a webpage stored in the asset we use this path: http://localhost/YOURFILENAME.html

and some advice: never store a password as plain text in any database, always store the hash value of the password... there are several extensions around, which can provide hash values, for example my tools extension App Inventor Extensions: Tools | Pura Vida Apps

Taifun

Thank you very much Mr. Taifun for the advice and guidance

Try this:

GSRegLogPassBlank.aia (13.0 KB)

Uses a javascript function to generate the hmacsha256 hash on the app side.

Only downside is that the reset password is sent in plain text in the email...

There are better password generators out there...

SCRIPT
function doPost(e) {

var ss = SpreadsheetApp.openById('YOUR SPREADSHEET ID HERE');
var sh = ss.getSheetByName("YOUR SHEET NAME HERE");
var msg;

if (e.parameter.fn == "getusers" ) {
   var loginData = sh.getDataRange().getValues();
   var users = [];
   for ( var i = 1; i < loginData.length; i++ ) {
   users.push(loginData[i][0]);
   }
     msg = JSON.stringify(users);
 }
else if ( e.parameter.fn == "register" ) {
    sh.appendRow([e.parameter.email,e.parameter.pass]);
    msg = "user registered";  
  }
else if ( e.parameter.fn == "login" ) {
  var loginData = sh.getDataRange().getValues();
   for ( var i = 0; i < loginData.length; i++ ) {
     if ( e.parameter.email == loginData[i][0] && e.parameter.pass == loginData[i][1] ) {
       msg = "user logged in";
     }
   }
}
else if ( e.parameter.fn == "reset" ) {
  var newpass = makePasswd();
  var newHash = makeHash(newpass,e.parameter.key);
  //change hash for email in sheet
  var loginData = sh.getDataRange().getValues();
   for ( var i = 0; i < loginData.length; i++ ) {
     if ( e.parameter.email == loginData[i][0]) {
      var rngp = sh.getRange(i+1,2);
      rngp.setValue(newHash);
       msg = "password reset";
     }
   }
  //send email with new password
  GmailApp.sendEmail(e.parameter.email,"From AI2 App","Your new password is: " + newpass + "\n\n Use this new password to login.\n\n Thank you.");
}
return ContentService.createTextOutput(msg);

}

function makePasswd() {
  var passwd = '';
  var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!.#*@_';
  for (i=1;i<8;i++) {
    var c = Math.floor(Math.random()*chars.length + 1);
    passwd += chars.charAt(c)
  }
  return passwd;
}

function makeHash(message,key){
  var getHash = Utilities.computeHmacSha256Signature(message,key).reduce(function(str,chr){
  chr = (chr < 0 ? chr + 256 : chr).toString(16);
  return str + (chr.length==1?'0':'') + chr;
  },'');;
  return getHash;
}
BLOCKS

SPREADSHEET

Thank you very much Mr/Mrs.
I will try, and because I am still a beginner, please help if I encounter obstacles. My hope is that Mr will be willing to help.

Thank you very much Mr/Mrs.
I have tried it, resetting the password also works well.


You expected a list back from the web, but you got an error message (<DOCTYPE...)

Show the complete web response to know what the error was.

Taifun

here's the script i am using below

function doPost(e) {
  var ss = SpreadsheetApp.openById('13FUnFMaNA-8kmLlIg06rlWw3IfXjqLV4a2x6c9wIl2g');
  var sh = ss.getSheetByName("Sheet1");
  var msg;

  if (e.parameter.fn == "getusers" ) {
    var loginData = sh.getDataRange().getValues();
    var users = [];
    for ( var i = 1; i < loginData.length; i++ ) {
      users.push(loginData[i][0]);
    }
    msg = JSON.stringify(users);
  }
  else if ( e.parameter.fn == "register" ) {
    sh.appendRow([e.parameter.email,e.parameter.pass]);
    msg = "user registered";  
  }
  else if ( e.parameter.fn == "login" ) {
    var loginData = sh.getDataRange().getValues();
    for ( var i = 0; i < loginData.length; i++ ) {
      if ( e.parameter.email == loginData[i][0] && e.parameter.pass == loginData[i][1] ) {
        msg = "user logged in";
      }
    }
  }
  else if ( e.parameter.fn == "reset" ) {
    var newpass = makePasswd();
    var newHash = makeHash(newpass,e.parameter.key);
    //change hash for email in sheet
    var loginData = sh.getDataRange().getValues();
    for ( var i = 0; i < loginData.length; i++ ) {
      if ( e.parameter.email == loginData[i][0]) {
        var rngp = sh.getRange(i+1,2);
        rngp.setValue(newHash);
        msg = "password reset";
      }
    }
    //send email with new password
    GmailApp.sendEmail(e.parameter.email,"From AI2 App","Your new password is: " + newpass + "\n\n Use this new password to login.\n\n Thank you.");
  }
  return ContentService.createTextOutput(msg);
}



function makePasswd() {
  var passwd = '';
  var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!.#*@_';
  for (i=1;i<8;i++) {
    var c = Math.floor(Math.random()*chars.length + 1);
    passwd += chars.charAt(c)
  }
  return passwd;
}

function makeHash(message,key){
  var getHash = Utilities.computeHmacSha256Signature(message,key).reduce(function(str,chr){
    chr = (chr < 0 ? chr + 256 : chr).toString(16);
    return str + (chr.length==1?'0':'') + chr;
  },'');;
  return getHash;
}

here's the weblink i tried running , please help me, what to do, can we contact via google meet?

Well, you have a doPost(e) in your script, and you appear to be calling a doGet(e) ? (this will be the case if you run the script in your browser).

You do not show your relevant blocks...

Hey, i am using the same blocks that you have shared. i downloaded your project to test out how it works.

Can u please tell me how to solve the issue i am encountering?

Need to see the full output of responseContent when you press Register

i put as only only with restricted people

anyway now i fixed it. It works

Btw I have to clearfy some things form you so i will have the opportunity to learn something new.

First of all, when I have imported your .aia project to mit app inventor i don't see another screen which should be one of login and another for registered. i can see only one screen1

So in that project, did u implement login, registration page as web view component? instead of using components from mit's designer section?

then can u please explain me each part of blocks, how they work in the porject?

finally, if we implement user authentication page as a web component viewer, if we wanna implement, html, bootstrap, what changes do i have to do in app scripts and in blocks

Everything is on one screen, using virtual screens (hide and show arrangements)

No, see above

You will simply need to follow the blocks/components logic to understand how it works

Yes, that will quite a different app... why use the webviewer when everything is handled already in the app?

now i got it, thank you so much

Anyway, for other uses, let's say the authentication is just a part of a project . After the login process, what if we wanna retrieve an user information who logged in, for other purposes? can we do that as we are using google spreedsheet?

You can use the spreadsheet data for other purposes, of course, you need to protect the real passwords used by users...

Would you mind helping me, how to build an app where we will upload an electronic component image and our app will tell what type of component it is by analyzing the image?

I already have gemini AI's API key for that? so in our case we need an app where you have to choose an image form ur phone's gallary, then the AI will automatically analyze our image through the api key then give us an answer through json data i guess?

so how can we build the app? would you mind helping me out to build the app?

Start a new topic for this.

I cannot help with AI.

1 Like