Nav-dekoratoren

Node.js Express applikasjon med frontend-komponenter i React.
Appen kjører på NAIS i en docker-container.

Bruk av dekoratøren

ℹ️ 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)

https://www.nav.no/dekoratoren/
https://appres.nav.no/common-html/v4/navno (deprecated)

Dev (dev-gcp)

https://dekoratoren.dev.nav.no/

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)

⚠️ Det er en del av it-strategien til NAV å flytte bort fra fra egne datasentre. Som følger vil dev-sbs og prod-sbs skrus av på et tidspunkt og det anbefales å deployere nye applikasjoner til Google Cloud (gcp).

Implementasjon

Dekoratøren kan implementeres på flere ulike måter, både server-side og client-side.

Eksempel 1

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.
⚠️ Cache anbefales.

Eksempel 2

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>

⚠️ CSR (Client-Side-Rendering) av dekoratøren kan påvirke ytelsen.

Eksempel 3

Bruk pus-decorator, les readme.

Parametere

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;
}

Eksempler

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

Oppstart via docker-compose

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

Utvikling - Kom i gang

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

Manuelt bygg

npm run build-dev (for testing lokalt)
npm run build (for produksjon)

Henvendelser

Spørsmål knyttet til koden eller prosjektet kan rettes mot https://github.com/orgs/navikt/teams/team-personbruker

For NAV-ansatte

Interne henvendelser kan sendes via Slack i kanalen #team-personbruker.

tovare / nav-dekoratoren Goto Github PK

nav-dekoratoren's Introduction

Nav-dekoratoren

Bruk av dekoratøren

Implementasjon

Eksempel 1

Eksempel 2

Eksempel 3

Parametere

Eksempler

Oppstart via docker-compose

Utvikling - Kom i gang

Manuelt bygg

Henvendelser

For NAV-ansatte

nav-dekoratoren's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent