Anvendere af NAP sdk er primært gæstesystemudviklere, derfor er denne guide målrettet disse.

Nap-typescript-sdk

Nap-angular-sdk

Da nap-angular-sdk er en angular specifik wrapper af nap-typescript-sdk har den en peer dependency til nap-typescript-sdket. Et eksempel for implementing af nap-angular-sdk til at få SAMLassertion kunne se således ud :

import { NapAngularService } from 'nap-angular-sdk';

import { filterEvents, NAPEventCatalogue, NAPMessage } from 'nap-typescript-sdk';

import { v4 as UUID } from 'uuid';

import { Injectable } from '@angular/core';

import { NapAngularService } from 'nap-angular-sdk';

import { filterEvents, NAPEventCatalogue, NAPMessage } from 'nap-typescript-sdk';

import { merge, Observable, Subject, Subscription } from 'rxjs';

import { shareReplay, startWith } from 'rxjs/operators';

import { v4 as UUID } from 'uuid';

/**
* Service to handle user session
*
* @export AuthService
* @class AuthService
*/
@Injectable({
providedIn: 'root',
})

export class AuthService {
private innerLogout: Subject<undefined> = new Subject();

/**
* Logout stream. Fires upon logout.
*
* @memberof AuthService
*/
public logout$ = this.innerLogout.asObservable();

public session$: Observable<NAPMessage | undefined> = merge(
this.logout$,
this.napSDK.incomming$.pipe(
filterEvents([NAPEventCatalogue.v1.SessionOpen, NAPEventCatalogue.v1.SessionClose]),
shareReplay(),
startWith(undefined),
)
);

constructor(private napSDK: NapAngularService) {
const napMsg: NAPMessage = {
date: new Date().toISOString(),
id: UUID(),
event: { type: NAPEventCatalogue.v1.SessionOpen },
};

// Ask for the SAMLassertion in host
this.napSDK.sendMessage(napMsg);
}

/**
* Tricker logout event
*/
logout(): void {
this.innerLogout.next(undefined);
}
}


Nap-react-sdk

Da nap-react-sdk er en react specifik wrapper af nap-typescript-sdk har den en peer dependency til nap-typescript-sdket. Et eksempel for implementing af nap-react-sdk til at få vise og sende beskeder kunne se således ud:

import { NapContextProvider, NAPEventType, useNap } from 'nap-react-sdk';

import React from 'react';

import { v4 as UUID } from 'uuid';

const IncommingMessageComponent: React.FC = () => {
const napContext = useNap()

const samlSession = napContext.latestIncomming.event.eventType === NAPEventCatalogue.v1.SessionOpen ? undefined

return <div> {JSON.stringify(samlSession)}</div>
}

const PostMessageComponent: React.FC = () => {
const napContext = useNap()

return (
<button
onClick={() => {
napContext.postMessage({
date: new Date().toString(),
id: UUID(),
event: { type: NAPEventType.SessionOpen }
})
}}
>
Send message
</button>
)
}

const App = () => {

return (
<>
<NapContextProvider>
<IncommingMessageComponent></IncommingMessageComponent>
<PostMessageComponent></PostMessageComponent>
</NapContextProvider>
</>
)
}

export default App