Simple Login System
In this lesson we will teach you how to create a simple login system that can be used on your stack. Although this is a simple method of implementing such a feature, it can be built upon to create more advanced systems.
Create a new stack
1) Create a new stack
2) Name the stack "Login Test"
3) Name this first card "Login"
Create a new card
1) Create a new card and call it "accessed"
Setup accessed card
1) Add label field with "Access Granted"
2) Add button with following script
on mouseUp
go to the first card
end mouseUp
Create Login card elements
1) Navigate to log in card
2) Create two input fields. One called username and one called password
3) Create two label fields. One with its contents set to "Username" and the other "Password"
4) Create a button and set its label to "Login"
Edit the script of the card
Place the following in your card script
local sUsername, sPassword
on openCard
put "johnsmith" into sUsername
put "pa55word" into sPassword
end openCard
on loginCheck
if field "username" is sUsername and field "password" is sPassword then
go to card "accessed"
else
answer "Details Incorrect. Please try again!"
end if
end loginCheck
Edit the script of the "Login Button"
Call the "loginCheck" handler from the mouseUp of this button
Test the Script
The above script puts a defined username and password into a variable and then the loginCheck handler checks if the contents of the username and password fields matches these values.
If a match is successful then you progress to the next card. However, if details are in-correct then an answer dialog is shown.
Ilona
super, worked right away. The user data is now hardcoded in the source code. But how can I transfer the user data from the database to the fields?
Elanor Buchanan
Hi Ilona
Do you want to check the details entered by the user against a database? If so you could construct a database query using the entered username and password and use that to check if the details are valid.
You might find these lessons useful
http://lessons.livecode.com/m/4071/c/16767
I hope that helps.
Elanor
Pelumi
Thanks for this. Please how do you make the text in the password field hidden? Thank You
Elanor Buchanan
Hi Pelumi
If you will be deploying a mobile app you can create a native text input control and use
mobileControlSet ,"contentType","password"
to hide the text in the password field.
On desktop you will have to handle this yourself by replacing the characters with a symbol as they are entered. You can find an example of how to do this here
http://livecodeshare.runrev.com/stack/241/Password-Field
I hope that helps.
Elanor
Pelumi
Yes it did. Thanks Elanor!
Daniel Olukayode
How do I create a simple create account system?
Elanor Buchanan
Hi Daniel
This is quite a large question. Some things to think about are
- How will the user sign up and how will you validate new accounts
- How will you store the user account data(what type of database)
- How will your app communicate with the database
You might find out OAuth2 library useful
http://lessons.livecode.com/m/2592/l/671591-how-do-i-use-the-oauth2-library
And our lesson on accessing web services from LiveCode.
http://lessons.livecode.com/m/4070/l/40932-accessing-web-services-using-livecode
I hope that is some help.
Kind regards
Elanor
Daniel Olukayode
Thank you! That really helped. Another question, how do I hide a card? I've tried this code
on mouseUp
hide card "Understand"
show card "Adress"
end mouseUp
but nothing works.
Matthias Rebbe
Daniel,
you can't hide card, just stacks.
So if both cards are on the same stack, then just use
go to card "Adress"
This shows card "Adress" instead of card "Understand".
Matthias Rebbe
Daniel,
are you aware that today starts the "Lockdown Learning" course.
https://livecode.com/lockdown-learning/
Regards,
Matthias