Authentication Libs

신사업 프론트엔드 공통 JWT/JSON 인증처리 라이브러리.

This project was generated by Vessel. For a simple and quick reference, click here.

About

JWT/JSON을 이용한 공통 인증처리 라이브러리.

Installation

해당 모듈을 사용할 프로젝트에서는 아래와 같이 설치한다.

$ npm install --save @newbiz/auth-libs
or
$ yarn add @newbiz/auth-libs

Usage

최초 랜더링 되는 앱에 아래와 같이 initialize 메소드를 이용하여 설정 부분을 추가해주면 된다.

Vue.js example

import { Auth } from '@newbiz/auth-libs'

export default {
  ...
  created () {
    ...
    Auth.initialize({ ... })
    ...
  },
  ...
  beforeDestroy () {
    Auth.destroy()
  },
}

Configuration

설정은 아래 샘플을 참고. 옵션에 기재된 값은 디폴트로 설정된 값이다.

const defaultOption = {
  // 실행 타입 설정 (JWT | JSON), (v2.0.0 추가)
  type: 'JWT',

  // 로컬스토리지에 저장될 키 이름
  storageTokenName: 'accessToken',

  // JWT토큰이 postMessage로 전달되는지 여부
  isProvidedFromPostMessage: true,

  // 로그 출력 여부
  isShowLog: true,

  // 토큰 만료시간 알림 표시
  notifyExpiredInHour: 24,

  // 토큰 내 만료시간이 명시되어 있는 경우 키 이름 명시 (값은 second 단위)
  expiredName: 'exp',

  // 토큰 내 만료시간이 명시되어 있지 않을 경우 만료시간 명시 (값은 second 단위), (v2.0.0 추가)
  expiredIn: -1,

  // 토큰만료시점에 onExpiredToken 이벤트 발생여부 (v2.0.0 추가)
  isInvokeExpiredEvent: true,

  // postMessage로 데이터 수신시 콜백
  // 토큰 처리 전에 서버 오리진과 데이터가 성공적으로 받아와졌는지를 체크하는 로직을 구현해준다.
  // 이후 토큰처리를 위해서는 next 함수에 파라미터로 토큰 문자열을 제공한다.
  // 그러면 제공된 토큰을 파싱하고 onAcquiredToken 콜백이 실행됨.
  // 토큰 요청을 해도 해당 onReceiveMessage 메소드가 실행되지 않는다면 origin 문제일 수 있음.
  onReceiveMessage: (event, next) => {
    if (event.origin === '**********.my-domain.com') {
      next(event.data.accessToken)
    }
    // 조건에 맞지 않을 경우 아무 처리 없음
  },

  // 파싱된 토큰 등의 데이터를 전달받으면 실행되는 콜백
  onAcquiredToken: (authResult) => {
    // 토큰에서 사용자 정보 얻어와서 스토어에 저장
    // 여기서 만약 JWE 토큰이면 별도 처리한다.
    my_signin_func(
      authResult.accessToken,
      authResult.parsedToken,
    )
  },

  // 토큰이 만료된 경우에 실행되는 콜백 (v2.0.0 추가)
  // 리프레시 토큰 등을 이용해 토큰을 재발급 받고나서 다시 next 함수를 처리한다.
  onExpiredToken: (authResult, next) => {
    // authResult.statusCode === 'EXPIRED'
    my_refresh_token_func(MY_REFRESH_TOKEN)
      .then((accessToken) => next(accessToken))
      .catch()
  },

  // 토큰이 앱 진입시 존재하지 않거나 이벤트 등으로 제거된 경우 콜백
  onDroppedToken: (next) => {
    signout()
  },

  // 토큰 파싱 오류 등 처리 오류시 실행되는 콜백 (v2.0.0 추가)
  onInvalidToken: (authResult, next) => {
    console.log(authResult.statucCode)
    signout()
  },
};

Methods

Auth.initialize

위에 명시되어 있는 설정 기반 위에 추가 option을 제공하여 초기화를 수행한다.

import { Auth } from '@newbiz/auth-libs'
...
Auth.initialize({
  storageTokenName: 'myTokenStorageName',
  onAcquiredToken () {},
  onExpiredToken () {},
  onDroppedToken () {},
  onInvalidToken () {},
})

Auth.saveToken

만료일시와 함께 스토리지에 키 값을 저장하도록 한다.

import { Auth } from '@newbiz/auth-libs'
...
// 3600초 후에 만료되는 값으로 로컬 스토리지에 저장한다.
// 스토리지에서 제거하려면 window.localStorage.removeItem()을 사용한다.
Auth.saveToken('foo', 'bar', 3600)

Auth.destroy

사용된 자원 해제를 수행한다.

Auth.destroy()

Auth.setState

초기화(Auth.initialize) 수행 후, 콜백함수(onAcquiredToken 등)에서 참조될 상태값을 설정한다.

Auth.setState({
  isPersistToken: true,
  myReferedValue: 'abc',
})

Auth.getState

콜백함수(onAcquiredToken 등)에서 Auth.setState 등으로 지정한 상태값을 참조한다.

Auth.getState().isPersistToken // true
Auth.getState().myReferedValue // 'abc'

Change Log

해당 프로젝트의 CHANGELOG.md 파일 참조.

License

해당 프로젝트의 LICENSE 파일 참조.