[Youtube 클론코딩] 소셜 로그인 기능, 로그아웃 구현 (2)

[Youtube 클론코딩] 소셜 로그인 기능, 로그아웃 구현 (1) (tistory.com)

[Youtube 클론코딩] 소셜 로그인 기능, 로그아웃 구현 (1)

이전 포스팅에서 GitHub에 Client ID와 함께 유저 정보를 요청하는 과정까지 진행했다.

이렇게되면 GitHub은 이전에 설정했던 Authorization callback URL에 사용자를 특정 코드와 함께 리다이렉트 시키게 된다.

 

callback URL을 http://localhost:4000/users/github/finish 로 설정했다.

라우팅

userRouter.js와 userController.js에 각각 라우팅과 컨트롤러를 설정해준다.

Access Token 발급

이제 GitHub에서 받아온 코드를 이용해 다음 링크에 Access Token을 발급요청 해야 한다.

파라미터는 다음과 같은데, 여기서는 client_secret이 있으므로 POST 방식으로 전송한다.

client_id와 client_secret은 GitHub의 OAuth app 설정에서 확인할 수 있고,

code는 쿼리스트링으로 넘어오게 되므로 request.query.code 에서 확인할 수 있다.

 

여기서 await 구문을 이중으로 써줬는데, 그 이유는 fetch를 통해 받아온 객체는 json을 담고있지만

JS에서는 그걸 json으로 인식하지 못한다.(네트워크 통신은 데이터의 최적화를 위해 문자열로 통신한다)

따라서 이를 다시 json()으로 바꿔주어야 하므로 await을 중첩해서 한번에 처리하는 것이다.

 

headers에 Accept: "application/json"을 넣어주게되면 string이 아닌 JSON형태로 받게 된다.

결과물은 위와같이 access_token과 token_type, scope로 구성된다.

 

만약 유효하지 않은 정보로 요청하게되면 다음처럼 에러메세지를 반환한다.

따라서 우리는 access_token의 유무로 회귀 또는 진행 여부를 판가름 할 수 있다.

 

API에 접근

이제 발급받은 Access_Token을 가지고 GitHub API에 접근해서 원하는 정보를 받아올 차례다.

위의 방식대로 api.github.com/user에 access_token과 함께 요청한다면 유저 정보가 돌아올 것이다.

그러면 다음처럼 user 데이터가 userData에 저장된다.

그런데 emails 항목을 보면 null이라고 돼 있다.

user api만으로는 email 정보를 불러오지 못한다는 의미다.

이를 해결하려면 다른 api를 사용해야 한다.

Emails - GitHub Docs

Emails - GitHub Docs

바로 emails 이다.

user/emails에도 똑같은 방식으로 request해주자.

여기서 기존 도메인 주소는 동일하게 사용하므로 해당 도메인 주소를 따로 변수로 빼서 사용하면 편리하다.

그럼 다음처럼 email 객체들을 담은 list가 반환된다.

여기서 primary와 verified가 존재하는데, primary는 현재 이 계정의 주된 이메일 여부이고,

verified는 해당 이메일이 인증되었다는 의미다.

따라서 둘 다 true 인 것을 가져오면, 해당 유저의 주 이메일 객체를 알아낼 수 있다.