Github API v3 사용방법, 깃허브 API 적용

이현지·2021년 3월 14일
7
  • 최근 깃허브 API v3을 활용하여, 이슈 리스트를 만들어보았다.
    이를 계기로 API v3의 간단한 사용법을 소개하려고 한다.

토큰 발급

1

  • 우선 깃허브 API 인증을 위해 토큰을 발급하자.
    깃허브의 Settings -> Developer settings -> Personal access tokens 로 이동하여,
    Generate new token 을 클릭하면, 위와 같은 화면이 나타난다.
    Note 에 원하는 토큰 이름을 적고, scope를 선택해주자.
    필자는 repo만 선택하고 생성하였다.
    생성이 완료되면 토큰 값이 나타난다.
    토큰은 만든 순간에만 보이므로 다른 곳에 복사하여 저장해놓아야 한다.
    만약 까먹었다면, 재발급 해야하니 주의하자.

Github API 는 인증을 하지 않아도 사용할 수 있다.
그러나 인증을 하지 않으면, 요청이 1시간에 60번으로 제한된다.
인증을 할 경우 1시간에 5000번까지 요청할 수 있다.

Github API v3

  • https://developer.github.com/v3/
    위의 링크는 github API 문서이다.
    사용방법 설명이 잘 되어있고, 다양한 API 를 사용할 수 있다.
    필자는 여기서 ISSUE 를 활용해보겠다.

3

  • 우측 메뉴에서 ISSUE 를 클릭하면, issue 를 활용한 api들을 확인할 수 있다.
    repository의 이슈 리스트 를 만들 것이므로, List repository issues 를 클릭한다.

4

  • 클릭하면, List repository issues 에 대한 사용방법이나 주의사항이 처음에 나온다.
    GET /repos/:owner/:repo/issues 이와 같은 방식으로 API 를 요청하라는 의미이다.
    만약 repository의 주인이 hyun-jii 이고, repositoy의 이름이 test 라면
    https://api.github.com/repos/hyun-jii/test/issues
    위의 URL을 GET 방식으로 요청하는 것이다.

5

  • 밑으로 내리면, 몇개의 parameters 의 type 과 설명이 나와있다.
    해당 parameter를 사용할 때 참고하면 된다.

6

  • 이제 API 요청 시 응답되는 형식이다.
    위를 통해 응답 객체의 구조를 알 수 있고, 하나의 이슈당 얻을 수 있는 정보들을 알 수 있다.
    해당 이슈의 title, state, user, label, number 등등 스크롤을 내리다보면 정말 다양한 정보를 활용할 수 있다.
    필자는 간단하게 테스트로 각 이슈의 title 만 추출해 보겠다.
<h1>Issue List</h1>
<div class="container"></div>
  • 우선 간단하게 테스트용으로 화면을 구성했다.
$(document).ready(function () {
  var auth = window.btoa("hyun-jii: 토큰 값 ");
  
    $.ajax({
      type: "GET",
      headers: {
        Authorization: "Basic " + auth,
      },
      url: "https://api.github.com/repos/hyun-jii/CRESCENDO/issues",
      dataType: "json",
      success: function (response) {
        var array = response;
        for (var i = 0; i < array.length; i++) {
          $(".container").append("<p>" + array[i].title + "</p>");
        }
      },
    });
});
  • jquery ajax 를 활용하여 구현해보았다.
    GET 방식으로 지정된 형식의 URL을 요청하고, headers 에서 토큰을 인증한다.

window.btoa() 는 Base64 인코딩 메소드이다.

  • 성공 시 response를 응답받아 title을 추출하였다.
    API 문서에서 title 이 겉에 있는 첫번째 배열에 쌓여있으므로, array[i].title 로 추출하였다.
    만약 user 의 id 를 구하고 싶다면, array[i].user.id
    label name을 구하려면 이중 반복문을 활용하여 array[i].label[j].name 으로 추출한다.

7

  • 이제 이를 실행하면, 다음과 같이 이슈의 제목들만 나타나게 된다.
    현재 오픈된 이슈들만 나오게 되며, 전체 이슈나 닫힌 이슈만 보고 싶으면 url 에 추가하면 된다.
    issues?stae=all 이 외에도 page 설정이나 라벨등 다양한 설정 방법이 있으니 문서를 참고해보자.

token 인증 방법

https://developer.github.com/v3/auth/

  • 위 링크에 들어가면 token 인증 방법이 설명되어 있다.
    필자는 Basic Authentication 을 이용하여 인증하였다.
var auth = window.btoa("hyun-jii: 토큰 값 ");

headers: {
        Authorization: "Basic " + auth
      }
  • 기본 인증방식에서 Base64 인코딩을 통해 인증하는 방식은 위와 같은 방식으로 사용한다.
    그러나 Base64 인코딩은 복호화가 가능하여 보안이 취약하다.
    그러므로 HTTPS / TLS 사용이 권장된다.

8

  • 마지막으로 이전에 만든 이슈 리스트를 소개하며 이번 포스팅을 마친다.
    Github API 를 처음 활용해보았는데, 활용해보니 어렵지 않고, 생각보다 많은 API를 제공했다.
    다음에 다른 API를 활용하여, 재밌는 것을 만들어 보고 싶다.

Reference

https://developer.mozilla.org/ko/docs/Web/HTTP/Authentication

profile
Backend Developer👩‍💻

1개의 댓글

comment-user-thumbnail
2022년 3월 3일

잘 정리해주셔서 감사합니다~
다른 팀과 공유할 수 있는 뷰어를 만들어도 재밌을 것 같아요!

답글 달기