# 👁️‍🗨️ Om detta avsnitt

mimer-loggin är ett enkelt middelware för Hono skapat för att göra det väldigt enkelt att göra ett "logga in" ramverk. Du behöver först ha skapat ett webbprojekt med hono. I detta projekt måste du också ha en webbmapp.

1 Hämta koden

Ladda ned koden som du hittar i https://htsit.se/f/mimer-access.ts.


curl -LOk https://htsit.se/f/mimer-access.ts

Du kan också hitta senaste versionen av koden i projektet ada.

2 Lägg den på rätt ställe

Lägg koden i din "src" map där du har all annan kod till ditt projekt.


mv mimer-access.ts MITT_PROJEKT/src

3 Importera den i din kod

Gå till filen där du har din Hono app och lägg till följande kod.


import { Access, LoginException, RegisterException, User } from "./mimer-access.ts";

Du behöver inte importera "LoginException" och "RegisterException" om du inte ska använda exeptions.

4 Uppdatera Honons template variabel

För att få Hono att fungera med rätt typer måste ha rätt template variabler.


type Variables = {
name: string;
user: User;
role: Role;
};
const app = new Hono<{ Variables: Variables }>();

5 Skappa ett access object

Vi behöver nu skappa ett access projekt som vi ska använda i koden.


const access = await Access.initialize(app, "./data/user_kv.db");

Sökvägen "./data/user_kv.db" är till databasen för anvädnare som ska användas.

6 Bestäm vad som ska hända om registrering är bra.

Du behöver anropa ett par set funktoiner för att konfiguera access objektet.


access.setRegisterSucces((user)=>"/");

I samband registeringen kanske olika objekt i andra databaser behöver skapas. Callback funktionen returnerar en sökväg till sidan som ska besökas.

7 Bestäm vad som ska hända om login är bra.

Framför allt blir frågan till vilken sida en inloggad användare ska skickas.


access.setLoginSuccess(()=>"/");

Callback funktionen returnerar en sökväg till sidan som ska besökas.

8 Lägg till register sida.

I din webbmapp lägg till en sida likande denna.


<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Register</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<div id="container" class="login">
<div class="dialog">
<h1>Register</h1>
<form action="/register" method="get">
<label for="user">User name: </label>
<input type="text" id="user" name="user" />
<label for="password">Password: </label>
<input type="password" id="password" name="password" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
</body>
</html>

Med denna sida kan du registrera dig på.

9 Lägg till register sida.

I din webbmapp lägg till en sida likande denna.


<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Login</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<dev id="container" class="login">
<div class="dialog">
<h1>Login</h1>
<form action="/login">
<label for="user">User name: </label>
<input type="text" id="user" name="user" />
<label for="password">Password: </label>
<input type="password" id="password" name="password" />
<input type="submit" value="Submit" />
</form>
</div>
</dev>
</body>
</html>

Detta är en sida för att logga in på.

10 Lägg till en check för en sökväg

Denna middelware gör att alla anrop till sökvägen kommer checkas och det kommer kontrolleras att användaren har rollen "user".


app.get("/test/", (c) => {
return c.text("Hello World!")
});

11 Använd data för "user".

Middelwaren ger också data om anvädaren som kan användas.


app.get("/test/hello", (c) => {
return c.text("Hello "+ c.get("user").name+"!")
});

12 ✔️ Starta om servern och testa anropet

Starta om server och gå in på sidan:

http://localhost:8000

Testa att registrera en användare och sedan logga in för att slutligen gå till test sidan.

Information

Sajt

Skapa webbmapp för statiskt innehåll