author: krm created: 2022-05-22 status: alpha
Vi ska skapa en inloggningsida. Du behöver en databas som innehåller användare för detta.
Skapa en ny sida "login.html" liknande de formulär du gjort tidigare. Så kopiera in en ny html sida till public mappen.
cp ~/dev/mimer-template/File/web.html public/login.html
I "login.html" lägg till en input rad för lösenord "password" och användare "user". Borde vara något likande nedan:
<form action="/login">
<label for="user">Använderanamn: </label>
<input type="text" id="user" name="user" />
<label for="input"> Lösenord: </label>
<input type="password" id="password" name="password" />
<input type="submit" value="Submit" />
</form>
Observera att action i "login.html" behöver anropa en ny get funktion. Så ändra namnet på denna metod till vad som är lämpligt. Som exempel kan den heta "login".
Ändra också titeln och rubriken till "Loggin" och andra namn som kan behövas ändras i dokumentet till vad som passar ditt projekt.
Vi skapar en callback funktion som kommer svara när någon anropar servern för att loga in.
app.get("/login", function(req, res) {
// CODE
});
Skriv denna kod högst upp i programmet.
import crypto from 'crypto';
crypto behöver inte installeras för det är en del av node standard bibliotek.
Vi använder en if-sats till att se att vi har fått in data för våra parametrar.
if (
req.query &&
typeof req.query.user === "string" &&
typeof req.query.password === "string"
) {
// CODE
} else {
res.send("Du har inte skrivit in anvädnarnamn eller lösenord!");
}
Till att börja med så behöver vi läsa in användaren i en egen variabel för att götra vår kod lite enklare. Skriv in detta under CODE.
const user_name = req.query.user;
Till att börja med så behöver vi läsa in användaren.
const password =
crypto.createHash('md5').update(String(req.query.password)).digest('hex');
API är kanske inte det enklaste, men det borde ändå vara möjligt att sedet som sparas i variabel password är md5 summan av lösenordet med hexadecimala siffror.
Vi frågar nu vår databas efter lösenorde för den användarnamn som vi fått.
let question = 'SELECT name,password FROM user WHERE name = ?';
const user_answer = await db.execute(question, [user_name]);
Vi behöver nu plocka fram lösenorde från vår iterator, vilket vi gör på samma sätt som vi gjort tidigare.
const password_from_database = user_answer.values().next().value[0].password;
Vi använder en if-sats till att lösenorden stämmer överens med varandra. I annat fall skickat vi tillbkla att lösenordet är fel.
if(password_from_database === password) {
// CODE
} else {
res.send("Fel lösenord!");
}
Högst upp i main funktion skapar vi ett objekt så vi kan använda det över allt i vår server.
type TokenData = {[key: string]:string};
const token_storage:TokenData={};
Börja med att installera själva packetet och dess typer genom att ge komandot.
npm install uuid
npm install @types/uuid
Vi behöver kunan skapa ett unikt id för alla inloggade användare och för detta använder vi ett packet som heter "uuid".
import { v4 as uuid } from 'uuid';
Koden ovan gör att funktionen "v4" kommer kunna användas som "uuid" i koden.
Vi ska nu utgå från koden i steg 12 ovan. Där ska vi lägga till kod där vi ni har kommentaren " // CODE". Där ska vi skapa ett unikt id för denna inloggning. Detta id brukar kallas för ett "token".
const token = uuid();
Vi använder vårt token som egenskapsnamn i objektet och värdet blir vår användare.
token_storage[token] = user_name;
På detta sätt kan vi snapt se om personen är inlioggad i framtiden.
Vi ska ny spara vårt token så användaren kan visa upp det i framtiden.
res.cookie("login", token, {maxAge: 10000000});
Vi medelar nu användaren att den är inloggad.
res.send("Du är inloggad!");
Detta avslutar if-satsen, tänk på att vi har flera if-satser här så all kod är på rätt ställe.
Starta om server och gå in på sidan. Försök sedan logga in.