# Skapa webbmapp för statiskt innehåll
```
author: krm
created: 2025-05-18
status: alpha
```
# 👁️🗨️ 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.
- 🦉 [Skapa ett projekt för en webbserver](./create-a-project-for-webserver.sv.html)
- 🦉 [Skapa webbmapp för statiskt innehåll](./web-map-for-static-content.sv.md)
# 1. Hämta koden
Ladda ned koden som du hittar i
[https://htsit.se/f/mimer-access.ts](https://htsit.se/f/mimer-access.ts).
```sh
curl -LOk https://htsit.se/f/mimer-access.ts
```
Du kan också hitta senaste versionen av koden i projektet [ada](git@gitlab.com:krmit/ada.git).
# 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.
```sh
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.
```js
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.
```js
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.
```js
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.
```js
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.
```js
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.
```html
Register
Register
```
Med denna sida kan du registrera dig på.
# 9. Lägg till register sida.
I din webbmapp lägg till en sida likande denna.
```html
Login
Login
```
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".
```js
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.
```js
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](http://localhost:8000)
Testa att registrera en användare och sedan logga in för att slutligen
gå till test sidan.