AppAuth JS

JavaScript의 AppAuth는 모범 사례 RFC 8252 -OAUTH 2.0에 따라 OAUTH 2.0 및 OpenID Connect 제공 업체와 통신하기위한 공개 고객을위한 클라이언트 SDK입니다. 라이브러리는 Web Apps , Node.js CLI 응용 프로그램, Chrome Apps 및 Electron 또는 유사한 프레임 워크를 사용하는 응용 프로그램에 사용하도록 설계되었습니다.

구현 언어의 관용 스타일을 따르면서 해당 사양의 요청과 응답을 직접 매핑하기 위해 노력합니다.

이 라이브러리는 또한 Custom URI Scheme 리디렉션이 사용될 때 공개 클라이언트의 승인 코드를 보호하기 위해 생성 된 PKCE 확장 기능을 지원합니다. 라이브러리는 모든 프로토콜 요청 및 응답에서 추가 매개 변수를 처리 할 수있는 다른 확장 (표준 또는 기타)에 친숙합니다.

예

라이브러리를 사용한 예제 응용 프로그램은 src/node_app 폴더와 https://github.com/googlesamples/appauth-js-electron-sample에 포함됩니다.

인증 흐름

AppAuth는 자신의 토큰 교환을 수행 해야하는 인증 서버와 수동 상호 작용을 지원합니다. 이 예제는 수동 교환을 수행합니다.

서비스 구성을 가져옵니다

 AuthorizationServiceConfiguration . fetchFromIssuer ( openIdConnectUrl )
  . then ( response => {
    log ( 'Fetched service configuration' , response ) ;
    this . configuration = response ;
    this . showMessage ( 'Completed fetching configuration' ) ;
  } )
  . catch ( error => {
    log ( 'Something bad happened' , error ) ;
    this . showMessage ( `Something bad happened ${ error } ` )
  } ) ; 

승인 요청을하십시오

 this . notifier = new AuthorizationNotifier ( ) ;
// uses a redirect flow
this . authorizationHandler = new RedirectRequestHandler ( ) ;
// set notifier to deliver responses
this . authorizationHandler . setAuthorizationNotifier ( this . notifier ) ;
// set a listener to listen for authorization responses
this . notifier . setAuthorizationListener ( ( request , response , error ) => {
  log ( 'Authorization request complete ' , request , response , error ) ;
  if ( response ) {
    this . code = response . code ;
    this . showMessage ( `Authorization Code ${ response . code } ` ) ;
  }
} ) ;

// create a request
let request = new AuthorizationRequest ( {
    client_id : clientId ,
    redirect_uri : redirectUri ,
    scope : scope ,
    response_type : AuthorizationRequest . RESPONSE_TYPE_CODE ,
    state : undefined ,
    extras : { 'prompt' : 'consent' , 'access_type' : 'offline' }
  } ) ;

// make the authorization request
this . authorizationHandler . performAuthorizationRequest ( this . configuration , request ) ; 

토큰 요청

 this . tokenHandler = new BaseTokenRequestHandler ( ) ;

let request : TokenRequest | null = null ;

if ( this . code ) {
  let extras : StringMap | undefined = undefined ;
  if ( this . request && this . request . internal ) {
    extras = { } ;
    extras [ 'code_verifier' ] = this . request . internal [ 'code_verifier' ] ;
  }
  // use the code to make the token request.
  request = new TokenRequest ( {
      client_id : clientId ,
      redirect_uri : redirectUri ,
      grant_type : GRANT_TYPE_AUTHORIZATION_CODE ,
      code : this . code ,
      refresh_token : undefined ,
      extras : extras
    } ) ;
} else if ( this . tokenResponse ) {
  // use the token response to make a request for an access token
  request = new TokenRequest ( {
      client_id : clientId ,
      redirect_uri : redirectUri ,
      grant_type : GRANT_TYPE_REFRESH_TOKEN ,
      code : undefined ,
      refresh_token : this . tokenResponse . refreshToken ,
      extras : undefined
    } ) ;
}

this . tokenHandler . performTokenRequest ( this . configuration , request )
  . then ( response => {
    // ... do something with token response
  } ) ;

개발

전문

이 클라이언트는 TypeScript로 작성되었습니다.

설정

• 최신 버전의 노드를 설치하십시오. NVM (노드 버전 관리자가 적극 권장됨).

• nvm install 사용하여 권장 Node.js 버전을 설치하십시오.

• 여기에서 Visual Studio 코드의 최신 버전을 다운로드하십시오.

조항 종속성

이 앱은 npm 사용하여 IT 종속성을 제공합니다.

• Git은 AppAuthJS 라이브러리를 git clone 하고 package.json 파일을 포함하는 프로젝트의 루트 폴더로 이동하십시오.
• npm install 모든 개발 및 프로젝트 종속성을 설치하십시오.

그게! 이제 AppAuthJS 작업을 시작할 준비가되었습니다.

개발 워크 플로

이 프로젝트는 npm 스크립트를 사용하여 개발 워크 플로우를 자동화합니다. 이 스크립트는 package.json 파일을 통해 제공됩니다.

다음 스크립트가 포함되어 있습니다.

• npm run-script compile 또는 tsc 는 모든 TypeScript 파일을 컴파일합니다. 모든 컴파일 된 파일은 built/ 폴더로 들어갑니다.

• npm run-script watch 또는 tsc --watch watch 모드에서 TypeScript 파일을 컴파일합니다. 지속적인 피드백을 받으려면 권장합니다.

• npm run-script build-app built/ 디렉토리에서 출력 bundle.js 파일을 생성합니다. 여기에는 모든 종속성을 포함한 전체 AppAuthJS 라이브러리가 포함됩니다.

• npm test 제공 업장은 Karma 테스트 러너가 모든 단위 테스트를 실행하도록합니다. 모든 테스트는 Jasmine을 사용하여 작성됩니다. 테스트를 디버깅 하려면 Karma Test Runner의 Debug 버튼을 클릭하여 실제 테스트 소스를 살펴보십시오. 여기에 중단 점을 첨부 할 수 있습니다.

• npm run-script app 로컬 웹 서버에서 테스트 앱을 구축합니다. AppAuthJS를 사용하는 엔드 투 엔드 앱이며 라이브러리 사용 방법에 대한 데모입니다.

• npm run-script node-app Node.js CLI 샘플 앱을 빌드합니다. 이것은 node.js 컨텍스트에서 appauthjs를 사용하는 엔드 투 엔드 앱입니다.