[FIFA Online TMI] 넥슨 Open API로 유저 정보 가져오기

⚽️ Nexon Open API

넥슨 오픈 API 를 사용하여 피파 온라인4 의 각종 정보를 제공하는 서비스를 만들어보려고 한다.

API 를 사용하기 위해서 먼저 어플리케이션 등록을 하고 키를 발급받아야 한다.

이용약관을 보면 키는 타인에게 공유를 하면 안 되니 노출이 되지 않도록 조심하자.

또 API 를 사용하면 서비스 내에 데이터를 NEXON DEVELOPERS 에서 제공 받았음을 명시해야한다.

두 가지를 모두 인지했다면 API 를 사용할 준비는 끝났다.

유저 정보, 매치 정보, 랭커 정보, 메타 정보를 제공하는데 우선 가장 기본적인 유저정보를 가져와 보자.

📡 유저 정보 조회 API

키값을 헤더에 넣고 조회하고 싶은 유저 닉네임을 붙여 요청하면 고유 식별자, 유저 닉네임, 유저 레벨을 반환한다.

💡 Mustache 템플릿 구성

유저 닉네임을 입력할 화면을 구성해야 한다. 우선 유저 정보만 검색할 수 있도록 화면을 구성했다.

<h1 style="text-align: center">FIFA Online 4 - TMI</h1>

<div class="container" style="margin-top: 150px;">
    <h3 style="text-align: center">구단주 검색</h3>
    <form>
        <div class="mx-auto" style="width: 350px;">
            <div class="input-group">
                <input type="text" class="form-control" id="nickname" placeholder="구단주를 입력하세요"
                       style="margin-right: 10px;">
                <button class="btn btn-primary" type="button" id="btn-user-info">검색</button>
            </div>
        </div>
    </form>
</div>

나중에 추가될 모든 화면에도 Data based on NEXON DEVELOPERS 문구가 추가되어야 하기 때문에 footer 에 넣어주었다.

이제 유저 닉네임을 입력하고 검색 버튼을 눌렀을 때 API 를 요청할 수 있게 js 파일을 작성하면 된다.

가져온 정보를 출력할 화면은 만들지 않았기 때문에 alert 를 통해 확인한다.

var main = {
    init: function () {
        var _this = this;
        $('#btn-user-info').on('click', function () {
            _this.search_user_info();
        });
    },
    search_user_info : function () {
        const nickname = $('#nickname').val();

        $.ajax({
            type: 'GET',
            url: '/api/v1/user/'+nickname,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8'
        }).done(function (res) {
            alert(JSON.stringify(res));
        }).fail(function (error) {
            alert(JSON.stringify(error));
        });
    }
};

main.init();

⚙️ web/UserApiController

package com.fifaonline.tmi.web;

import com.fifaonline.tmi.service.UserService;
import com.fifaonline.tmi.web.dto.UserResponseDto;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

@RequiredArgsConstructor
@RestController
public class UserApiController {
    private final UserService userService;

    @GetMapping("/api/v1/user/{nickname}")
    public UserResponseDto get(@PathVariable String nickname) {
        return userService.searchUserInfo(nickname);
    }
}

🔨 service/UserService

package com.fifaonline.tmi.service;

import com.fifaonline.tmi.api.UserApiClient;
import com.fifaonline.tmi.web.dto.UserResponseDto;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@RequiredArgsConstructor
@Service
public class UserService {
    private final UserApiClient userApiClient;

     @Transactional(readOnly = true)
    public UserResponseDto searchUserInfo(String nickname) {
        return userApiClient.requestUserInfo(nickname);
    }
}

🔧 api/UserApiClient

package com.fifaonline.tmi.api;

import com.fifaonline.tmi.config.ApiKey;
import com.fifaonline.tmi.web.dto.UserResponseDto;
import lombok.RequiredArgsConstructor;
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.stereotype.Service;
import org.springframework.web.client.RestTemplate;

@RequiredArgsConstructor
@Service
public class UserApiClient {

    private final RestTemplate restTemplate;

    private final String API_KEY = ApiKey.API_KEY;

    private final String UserInfoUrl = "https://api.nexon.co.kr/fifaonline4/v1.0/users?nickname={nickname}";

    public UserResponseDto requestUserInfo(String nickname) {
        final HttpHeaders httpHeaders = new HttpHeaders();
        httpHeaders.set("Authorization", API_KEY);

        final HttpEntity<String> entity = new HttpEntity<>(httpHeaders);

        return restTemplate.exchange(UserInfoUrl, HttpMethod.GET, entity, UserResponseDto.class, nickname).getBody();
    }
}

API KEY 는 외부에 유출되면 안 되기 때문에 static 변수로 만들어 따로 가져오고 깃허브에 커밋은 하지 않는다.

🔨 dto/UserResponseDto

package com.fifaonline.tmi.web.dto;

import lombok.Data;
import lombok.Getter;

@Data
@Getter
public class UserResponseDto {
    private String accessId;
    private String nickname;
    private int level;
}

📬 결과

유저 닉네임을 입력하고 검색을 누르면 정보를 잘 가져오는 것을 알 수 있다.

Github