{ "path": "/home/krm/dev/mimer-academia/server/web/Tutorial/let-a-user-logg-in.sv.json", "s": "Ignor", "invert": true, "level": 1, "title": [ "Låt en användare logga in" ], "description": [ [ { "form": "important" }, "author: krm\ncreated: 2022-05-22 \nstatus: alpha\n" ] ], "statments": [], "comment": [], "cards": [ { "level": 1, "title": [ "# 👁️‍🗨️ Om detta avsnitt" ], "description": [ "Vi ska skapa en inloggningsida. Du behöver en databas som innehåller användare för detta." ], "statments": [ { "description": [ "🦉 ", [ { "link": "./web-server/create-a-database-for-user.sv.html" }, "Skapa en databas för olika användare" ] ] }, { "description": [ "🦉 ", [ { "link": "./web-development/get-information-from-user-through-a-form.sv.html" }, "Få information från användare via ett fomulär" ] ] }, { "description": [ "🦉 ", [ { "link": "./web-development/create-a-web-form.sv.html" }, "Skapa ett webbformulär" ] ] } ], "comment": [] }, { "level": 1, "index": 1, "title": [ "Skapa en login sida." ], "description": [ "Skapa en ny sida \"login.html\" liknande de formulär du gjort tidigare. Så kopiera in en ny html sida till ", [ { "form": "important" }, "public" ], " mappen." ], "lang": "sh", "code": "cp ~/dev/mimer-template/File/web.html public/login.html", "statments": [], "comment": [] }, { "level": 1, "index": 2, "title": [ "Uppdatera formuläret på sidan." ], "description": [ "I \"login.html\" lägg till en input rad för lösenord \"password\" och användare \"user\". Borde vara något likande nedan:" ], "lang": "html", "code": "
\n\n\n\n\n\n
", "statments": [], "comment": [ "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 \nden heta \"login\"." ] }, { "level": 1, "index": 3, "title": [ "Uppdatera resten av sidan." ], "description": [ "Ändra också titeln och rubriken till \"Loggin\" och andra namn som kan behövas ändras i dokumentet till vad som passar ditt projekt." ], "statments": [], "comment": [] }, { "level": 1, "index": 4, "title": [ "✔️ Titta på sidan" ], "description": [ "Gå in på en länk till sidan." ], "statments": [ { "description": [ "🔗 ", [ { "link": "http://localhost:3000/login.html" }, "http://localhost:3000/login.html" ] ] } ], "comment": [] }, { "level": 1, "index": 5, "title": [ "Skapa en funcktion som anropas på servern när någon loggar in." ], "description": [ "Vi skapar en ", [ { "form": "important" }, "callback" ], " funktion som kommer svara när någon anropar servern för att loga in." ], "lang": "js", "code": "app.get(\"/login\", function(req, res) {\n// CODE\n});", "statments": [], "comment": [] }, { "level": 1, "index": 6, "title": [ "Importera packetet som används för hashning av lösenord." ], "description": [ "Skriv denna kod högst upp i programmet." ], "lang": "js", "code": "import crypto from 'crypto';", "statments": [], "comment": [ [ { "form": "important" }, "crypto" ], " behöver inte installeras för det är en del av node standard bibliotek." ] }, { "level": 1, "index": 7, "title": [ "Kontrollera att alla värden har kommit från klienten" ], "description": [ "Vi använder en if-sats till att se att vi har fått in data för våra parametrar." ], "lang": "js", "code": "if (\nreq.query &&\ntypeof req.query.user === \"string\" &&\ntypeof req.query.password === \"string\"\n) {\n// CODE\n} else {\nres.send(\"Du har inte skrivit in anvädnarnamn eller lösenord!\");\n}", "statments": [], "comment": [] }, { "level": 1, "index": 8, "title": [ "Få tag på användarnamnet." ], "description": [ "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." ], "lang": "js", "code": "const user_name = req.query.user;", "statments": [], "comment": [] }, { "level": 1, "index": 9, "title": [ "Få tag på lösenordet." ], "description": [ "Till att börja med så behöver vi läsa in användaren." ], "lang": "js", "code": "const password =\ncrypto.createHash('md5').update(String(req.query.password)).digest('hex');", "statments": [], "comment": [ "API är kanske inte det enklaste, men det borde ändå vara möjligt att sedet som sparas i variabel ", [ { "form": "important" }, "password" ], " är md5 summan av lösenordet med hexadecimala siffror." ] }, { "level": 1, "index": 10, "title": [ "Läs användardata från databasen" ], "description": [ "Vi frågar nu vår databas efter lösenorde för den användarnamn som vi fått." ], "lang": "js", "code": "let question = 'SELECT name,password FROM user WHERE name = ?';\nconst user_answer = await db.execute(question, [user_name]);", "statments": [], "comment": [] }, { "level": 1, "index": 11, "title": [ "Få tag på lösenordet från databasen." ], "description": [ "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." ], "lang": "js", "code": "const password_from_database = user_answer.values().next().value[0].password;", "statments": [], "comment": [] }, { "level": 1, "index": 12, "title": [ "Kontrollera att lösenordet är korrekt" ], "description": [ "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." ], "lang": "js", "code": "if(password_from_database === password) {\n// CODE\n} else {\nres.send(\"Fel lösenord!\");\n}", "statments": [], "comment": [] }, { "level": 1, "index": 13, "title": [ "Vi skapar ett objekt för att lagra inloggningar" ], "description": [ "Högst upp i main funktion skapar vi ett objekt så vi kan använda det över allt i vår server." ], "lang": "js", "code": "type TokenData = {[key: string]:string};\nconst token_storage:TokenData={};", "statments": [], "comment": [] }, { "level": 1, "index": 14, "title": [ "Installera 'uuid' packetet" ], "description": [ "Börja med att installera själva packetet och dess typer genom att ge komandot." ], "lang": "sh", "code": "npm install uuid\nnpm install @types/uuid", "statments": [], "comment": [] }, { "level": 1, "index": 15, "title": [ "Importera packetet som används att skapa ett id för användaren." ], "description": [ "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\"." ], "lang": "js", "code": "import { v4 as uuid } from 'uuid';", "statments": [], "comment": [ "Koden ovan gör att funktionen \"v4\" kommer kunna användas som \"uuid\" i koden." ] }, { "level": 1, "index": 16, "title": [ "Skapa ett unikt id" ], "description": [ "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 \ndenna inloggning. Detta id brukar kallas för ett \"token\"." ], "lang": "js", "code": "const token = uuid();", "statments": [], "comment": [] }, { "level": 1, "index": 17, "title": [ "Vi lägger till vårt token till vår lagringsobjekt" ], "description": [ "Vi använder vårt token som egenskapsnamn i objektet och värdet blir vår användare." ], "lang": "js", "code": "token_storage[token] = user_name;", "statments": [], "comment": [ "På detta sätt kan vi snapt se om personen är inlioggad i framtiden." ] }, { "level": 1, "index": 18, "title": [ "Skapa token i en kaka hos användaren." ], "description": [ "Vi ska ny spara vårt token så användaren kan visa upp det i framtiden." ], "lang": "js", "code": "res.cookie(\"login\", token, {maxAge: 10000000});", "statments": [], "comment": [] }, { "level": 1, "index": 19, "title": [ "Medela den godanyheter" ], "description": [ "Vi medelar nu användaren att den är inloggad." ], "lang": "js", "code": "res.send(\"Du är inloggad!\");", "statments": [], "comment": [ "Detta avslutar if-satsen, tänk på att vi har flera if-satser här så all kod är på rätt ställe." ] }, { "level": 1, "index": 20, "title": [ "✔️ Starta om servern och testa anropet" ], "description": [ "Starta om server och gå in på sidan. Försök sedan logga in." ], "statments": [], "comment": [] } ] }