Inloggning
Teori
Ett exempel pÄ ett inloggningsförfarande genom webbplats.

Den högra delen Àr extra information kring sÀkerhet.
Praktik
Hur ska vi utföra detta.
Node, express och mysql, se tidigare kapitel.
mkdir projektnamn
cd projektnamn
express -v pug -c sass --git
npm install
npm install dotenv mysql
npm install nodemon --save-dev
"start": "nodemon ./bin/www"
Du behöver skapa en route för login, med en tillgörande view. Denna view ska visa ett formulÀr. Ett formulÀr bestÄr av form taggen, denna krÀver en metod(GET eller POST) samt en action. Form elementets action attribut bestÀmmer vars formulÀret skickar data nÀr det skickas(submit).
I form elementet sÄ anvÀnder vi olika former av input element för att hantera data frÄn anvÀndaren. HÀr kan en första validering utföras för att öka sÀkerheten, som typ av fÀlt.
<form method="post" action="/login">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">Login</button>
</form>
Undersök den data som skickas frÄn ett HTML formulÀr i webblÀsarens utvecklarverktyg. Du hittar denna request under Network fliken.
Tabell för anvÀndare
En anvÀndartabell behöver inte sÄ mycket för att fungera. I ett mer utökat system sÄ kan vi behöva spara information för email-verifiering och sÄ vidare. Det Àr god praxis att spara timestamps kopplat till kontot av sÀkerhetsskÀl.
Notera att bÄde anvÀndarnamn och email Àr unika.
mysql> describe users;
+------------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+------------+--------------+------+-----+---------+----------------+
| id | int unsigned | NO | PRI | NULL | auto_increment |
| name | varchar(50) | NO | UNI | NULL | |
| password | varchar(255) | NO | | NULL | |
| email | varchar(255) | NO | UNI | NULL | |
| created_at | timestamp | NO | | NULL | |
| updated_at | timestamp | NO | | NULL | |
+------------+--------------+------+-----+---------+----------------+
Prata med databasen
Sker som tidigare med databasmodellen frÄn tidigare kapitel.
SQL och NodeTa emot data
Din login route behöver ta emot och hantera en post request frÄn login formulÀret. Den data som routen tar emot sparas i req.body.
router.post('/', async function(req, res, next) {
console.log(req.body);
});
Lösenord
AnvÀndaren kommer att skicka sitt lösenord i klartext till din server(ett problem med HTTP som ÄtgÀrdats med HTTPS). Det lösenordet Àr nÄgot som vi aldrig ska spara av sÀkerhetsskÀl.
Spara aldrig lösenord i klartext i databasen.
Det som sparas i databasen ska vara en hash, det vill sÀga en strÀng med olika tecken. För att hasha lösenordet anvÀnds en algoritm som kallas för bcrypt. Bcrypt anses vara sÀker för detta.
Bcrypt finns som ett node paket.
npm install bcrypt
Förfarandet blir sedan att.
Ta emot anvÀndarens lösenord.
Omvandla lösenordet till en hash.
HÀmta den sparade hashen av lösenordet frÄn databasen.
JÀmföra de tvÄ, om det stÀmmer loggas anvÀndaren in.
Bcrypt paketet anvÀnder ett par metoder för det, se manualen.
Kom ihÄg att jag Àr inloggad
För detta sÄ anvÀnder du sessions eller kakor.
npm install express-session
Konfigurationsanvisningar finns pÄ paketets sida, npmjs.org. För att sÀtta en session parameter sÄ anvÀnds request objeketet i express.
req.session.loggedin = true;
if (req.session.loggedin) // inloggad!
Create, read, update, delete
Ett login-system innehÄller oftast alla delar av create, read, update, delete(CRUD). CRUD Àr en akronym för de vanliga operationerna som utförs nÀr data sparas, i ett login-system blir det.
Skapa en anvÀndare, create.
Logga in en anvÀndare, read.
Uppdatera en anvÀndare, update.
Ta bort en anvÀndare, delete.
SQL
CRUD kan kopplas till ett antal SQL frÄgor som utför detta.
SELECT password FROM users WHERE name = name;
INSERT INTO users (name, password) VALUES ('namn', 'pass');
UPDATE users SET namn = 'namnet' WHERE id = 1;
DELETE FROM users WHERE id = 1;
Alla frÄgorna kan köras genom databasmodellen vi anvÀnt och vÀrden bör anvÀnds med förberedda frÄgor, det vill sÀga anvÀnda platshÄllare ? för vÀrden.
HTML
De vÀrden som anvÀnds i SQL frÄgorna kommer i de flesta fall frÄn HTML formulÀr. FormulÀren lÄter anvÀndare mata in data. Servern tar sedan emot data, validerar, tvÀttar och gör sedan nÄgot med den.
Express
I express tas requesten emot. FormulÀr visas med GET och data tas emot med POST.
Ăvningsprojekt
Skapa ett login system.
LÄt anvÀndaren skriva korta bloggar/inlÀgg/tweets eller vad det nu kan vara.
InlÀgget ska vara kopplat till userns id.
Databasdesignen finns hÀr.
Gör sÄ att en anvÀndares inlÀgg visas pÄ deras "hem" sida.
Andra anvÀndare, som Àr inloggade, ska kunna lÀsas andras "hem".
Skapa funktionen för att kommentera pÄ andras inlÀgg.
Bra övning i databasdesign och JOIN i SQL.
Styla slutligen alltihopa med Bootstrap och SASS. Mall.
Repo
Kopiera inte slutprodukten, dÄ lÀr du dig inget, gÄ igenom de commits som Àr gjorda för att se vad du har missat och kan behöva.
Last updated
Was this helpful?