Node.js Express applikasjon med frontend-komponenter i React.
Appen kjører på NAIS i en docker-container.
ℹ️ Dekoratøren er bakoverkompatibel; med andre ord vil eksisterende applikasjoner som benytter dekoratør:v4 (https://appres.nav.no/common-html/v4/navno) automatisk få ny dekoratør.
Den nye dekoratøren serveres på følgende ingresser:
Prod (prod-sbs)
Dev (dev-gcp)
Krever følgende access policy i nais.yaml:
accessPolicy:
outbound:
external:
- host: dekoratoren.dev.nav.no
Dev (dev-sbs)
- https://www-{q0,q1,q6}.nav.no/dekoratoren/ (deprecated)
- https://appres-{q0,q1,q6}.nav.no/common-html/v4/navno (deprecated)
Dekoratøren kan implementeres på flere ulike måter, både server-side og client-side.
Hent dekoratøren server-side og send html til brukeren som inkluderer dekoratøren:
const url = `{MILJO_URL}/?{DINE_PARAMETERE}`;
const getDecorator = () =>x
request(url, (error, response, body) => {
// Inject fragmenter av dekoratøren med id-selectors, enten manuelt eller ved bruk av template engine
});
Eksempel i Personopplysninger.
Sett inn noen linjer html og last inn dekoratøren client-side:
<html>
<head>
<link href="{MILJO_URL}/css/client.css" rel="stylesheet" />
</head>
<body>
<div id="decorator-header"></div>
{
DIN_APP
}
<div id="decorator-footer"></div>
<div id="decorator-env" data-src="{MILJO_URL}/env?{DINE_PARAMETERE}"></div>
<script async="true" src="{MILJO_URL}/client.js"></script>
</body>
</html>
Bruk pus-decorator, les readme.
Dekoratøren kan tilpasses med følgende URL-parametere / query-string.
Parameter | Type | Default | Forklaring |
---|---|---|---|
context | privatperson | arbeidsgiver | samarbeidspartner | privatperson | Setter menyen til definert kontekst |
simple | boolean | false | Viser en forenklet header og footer |
enforceLogin | boolean | false | Sørger for at brukeren er innlogget på definert sikkerhetsnivå (level) [1] |
redirectToApp | boolean | false (ditt-nav) |
Sender brukeren tilbake til nåværende url etter innlogging via dekoratøren [2] |
level | Level3 | Level4 | Level3 | Gir brukeren innloggingsvalg basert på definert sikkerhetsnivå [2] |
language | nb | nn | en | se | pl | nb | Setter språket til dekoratøren ved server side rendering [3] |
availableLanguages | [{ locale: nb | nn | en | se | pl, url: string }] | [ ] | Setter alternativene til språkvelgeren ved server side rendering [4] |
breadcrumbs | [{ title: string, url: string }] | [ ] | Setter brødsmulestien for server side rendering [5] |
feedback | boolean | false | Skjuler eller viser tilbakemeldingskomponentet |
chatbot | boolean | true | Skjuler eller viser Chatbot Frida [6] |
urlLookupTable | boolean | true | Aktiverer eller deaktiverer url-lookup-table [7] |
[1] Kombineres med level, redirectToApp og EnforceLoginLoader ved behov.
[2] Gjelder både ved automatisk innlogging og ved klikk på innloggingsknappen.
[3] Språk settes automatisk client-side dersom nåværende url inneholder /nb/, /nn/, /en/, /se/, uavhengig av dette parameteret.
[4] Kan settes client-side med setAvailableLanguages og onLanguageSelect
[5] Kan settes client-side med setBreadcrumbs og onBreadcrumbClick
[6] Dersom en chat-sesjon er aktiv, så vil denne holdes i gang på alle sider på nav.no, uavhengig av dette parameteret.
[7] Mapper prod-urler til dev-urler basert på url-lookup-table.
ℹ️ Samtlige parameter kan settes client-side
ℹ️ Bakgrunnsfarge på brødsmulesti og språkvelger kan overstyres:
.decorator-utils-container {
background: #f1f1f1;
}
Eksempel 1 - Endre context:
https://www.nav.no/dekoratoren/?context=arbeidsgiver
Eksempel 2 - Håndhev innlogging:
https://www.nav.no/dekoratoren/?enforceLogin=true&level=Level4&redirectToApp=true
Eksempel 3 - Språkvelger*:
https://www-q1.nav.no/dekoratoren/?availableLanguages=[{"locale":"nb","url":"https://www.nav.no/person/kontakt-oss"},{"locale":"en","url":"https://www.nav.no/person/kontakt-oss/en/"}]
Eksempel 4 - Brødsmulesti*:
https://www-q1.nav.no/dekoratoren/?breadcrumbs=[{"url":"https://www.nav.no/person/dittnav","title":"Ditt NAV"},{"url":"https://www.nav.no/person/kontakt-oss","title":"Kontakt oss"}]
*språkvelger og brødsmulesti vises ikke direkte på /dekoratoren i prod av sikkerhetsmessige årsaker
Start navikt/nav-dekoratoren, navikt/pb-nav-mocked, navikt/stub-oidc-provider og navikt/pb-oidc-provider-gui. Oppsettet vil replikere innlogging og eksterne avhengigheter som varselinnboks.
dekoratoren:
container_name: dekoratoren
image: 'docker.pkg.github.com/navikt/nav-dekoratoren/nav-dekoratoren:latest'
ports:
- "8100:8088"
environment:
ENV: 'localhost' | 'dev' | "prod" ('q0' | 'q1' | 'q2' | "q6" - deprecated)
XP_BASE_URL: 'https://www.nav.no'
APP_BASE_URL: 'http://localhost:8100'
APP_BASE_PATH: '/dekoratoren'
API_XP_SERVICES_URL: 'https://www.nav.no/_/service'
API_UNLEASH_PROXY_URL: 'https://www.nav.no/person/pb-unleash-proxy'
API_INNLOGGINGSLINJE_URL: 'http://mocks:8080/innloggingslinje-api/auth'
API_VARSELINNBOKS_URL: 'http://mocks:8080/person/varselinnboks'
MINSIDE_ARBEIDSGIVER_URL: 'https://arbeidsgiver.nav.no/min-side-arbeidsgiver/'
DITT_NAV_URL: 'https:/www.nav.no/person/dittnav/'
LOGIN_URL: 'http://localhost:5000'
LOGOUT_URL: 'http://localhost:5000/?logout'
depends_on:
- mocks
Eksempel i Enonic XP.
ℹ️ Foreløpig krever GitHub Packages (docker.pkg.github.com) innlogging:
docker login docker.pkg.github.com -u GITHUB_USERNAME -p GITHUB_PERSONAL_ACCESS_TOKEN
Hent repoet fra github
git clone https://github.com/navikt/nav-dekoratoren.git
Installer nødvendige avhengigheter
npm install
Start eksterne tjenester som oidc-provider og mocks
docker-compose up -d
Kjør applikasjonen lokalt med hot-reloading
npm start
Starter en Node Express / dev - server på
http://localhost:8088/dekoratoren
npm run build-dev (for testing lokalt)
npm run build (for produksjon)
Spørsmål knyttet til koden eller prosjektet kan rettes mot https://github.com/orgs/navikt/teams/team-personbruker
Interne henvendelser kan sendes via Slack i kanalen #team-personbruker.