Page History

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

Nap-typescript-sdk

Nap-angular-sdk

Et eksempel for implementing af nap-angular-sdk til at få SAMLassertion:

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

Eksempel for implementing af nap-react-sdk:

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


const IncommingMessageComponent: React.FC = () => {
  const napContext = useNap()
  return <div> {JSON.stringify(napContext.latestIncomming)}</div>
}

const PostMessageComponent: React.FC = () => {
  const napContext = useNap()
  return (
    <button
      onClick={() => {
        napContext.postMessage({
          date: new Date().toString(),
          id: '123',
          event: { type: NAPEventType.SessionOpen }
        })
      }}
    >
      Send message
    </button>
  )
}

const App = () => {
  return (
    <>
      <NapContextProvider>
        <IncommingMessageComponent></IncommingMessageComponent>
        <PostMessageComponent></PostMessageComponent>
      </NapContextProvider>
    </>
  )
}