블리자드 오픈 api 토큰 생성 (1/6)

blizzard open api와 nuxt를 이용한 캐릭터 정보 검색 어플리케이션을 만들었다.

버전업과 코드 정리를 겸하며 github에 올리려고 한다.

일단 먼저 api와 통신하려면 토큰이 필요하기 때문에 가장 먼저 토큰을 받아 오는 기능을 만들어준다.

우선 store/action에 getAccessToken 함수를 만든다.

import secret from '../apiAccount'

export function getAccessToken(store) {
  let data = `client_id=${secret.clientID}&client_secret=${secret.clientSecret}&grant_type=client_credentials`
  this.$axios.$post('https://us.battle.net/oauth/token', data)
    .then(function (response) {
      store.commit('setAccessToken', response.access_token)
    })
    .catch(function (error) {
      console.log(error)
    })
}

아래는 setAccessToken 코드이다. mutation/index에 작성되었다.

export default {
  setAccessToken(state, payload){
    state.accessToken = payload
  }
}

아래는 store/state/index에 작성되었다.

export default {
  accessToken:''
}

위 코드는 블리자드 api와 통신해 토큰을 받아와 store/state에 저장하는 함수이다.

그런데 토큰을 받아오기 위해서는 내 블리자드 계정의 clientID와 clientSecret이 필요하다.

해당 키는 블리자드 api 사이트에서 발급받을 수 있다.

github에 업로드 해야하기 때문에 내 ID와 Secret은 올라가지 않게 해야한다.

아래 코드는 apiAccount이다.

export default {
  clientID: 'input your blizzard api client ID',
  clientSecret : 'input your blizzard api client secret'
}

이렇게 github에 업로드 해두고, 내가 작업할 때에는 내 ID와 secret이 들어가도록 수정한다.

그리고 내가 수정한 코드가 다시 github에 업로드 되지 않게 설정해둔다.

프로젝트의 파일 중 .gitignore 파일에 업로드 하고싶지 않은 파일을 넣어주면 된다.

store/action/index에서 앞으로 생성될 action들을 관리해줄것이다.

import {getAccessToken} from './getAccessToken'

export default {
  getAccessToken: getAccessToken
}

store/index에서 state/mutation/action을 관리한다

import myState from './state/index'
import myMutation from "./mutation/index"
import myActions from "./action/index"

export const state = () => (myState)
export const mutations = myMutation
export const actions = myActions

 

이제 api서버에서 토큰을 받아올 준비가 끝났다.

토큰을 불러오는 action을 dispatch해주기만 하면 된다.

<script>
  import routeInfo from './routeInfo'

  export default {
    data() {
      return {
        clipped: false,
        drawer: false,
        fixed: false,
        items: routeInfo,
        miniVariant: false,
        right: true,
        rightDrawer: false,
        title: 'Vuetify.js'
      }
    },
    mounted() {
      this.$store.dispatch('getAccessToken')
    }
  }
</script>

layouts/defalut 파일의 script에 mounted 훅을 걸어서 해당 페이지 레이아웃이 생성될 때 토큰을 받아오는 action이 실행되도록 한다.

정상적으로 토큰을 가져오는데에 성공했다.