Page History
Navitabs | ||||
---|---|---|---|---|
| ||||
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 { v4asUUID } 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 { v4asUUID } from'uuid';
/**
* Service to handle user session
*
* @exportAuthService
* @class AuthService
*/
@Injectable({
providedIn:'root',
})
exportclassAuthService {
privateinnerLogout: Subject<undefined> = newSubject();
/**
* Logout stream. Fires upon logout.
*
* @memberofAuthService
*/
publiclogout$ = this.innerLogout.asObservable();
publicsession$: Observable<NAPMessage | undefined> = merge(
this.logout$,
this.napSDK.incomming$.pipe(
filterEvents([NAPEventCatalogue.v1.SessionOpen, NAPEventCatalogue.v1.SessionClose]),
shareReplay(),
startWith(undefined),
)
);
constructor(privatenapSDK: NapAngularService) {
constnapMsg: NAPMessage = {
date:newDate().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';
importReactfrom'react';
import { v4asUUID } from'uuid';
constIncommingMessageComponent: React.FC = () => {
constnapContext = useNap()
const samlSession = napContext.latestIncomming.event.eventType === NAPEventCatalogue.v1.SessionOpen ? undefined
return<div>{JSON.stringify(samlSession)}</div>
}
constPostMessageComponent: React.FC = () => {
constnapContext = useNap()
return (
<button
onClick={() => {
napContext.postMessage({
date:newDate().toString(),
id: UUID(),
event: { type:NAPEventType.SessionOpen }
})
}}
>
Send message
</button>
)
}
constApp = () => {
return (
<>
<NapContextProvider>
<IncommingMessageComponent></IncommingMessageComponent>
<PostMessageComponent></PostMessageComponent>
</NapContextProvider>
</>
)
}
exportdefaultApp