[Github] Github 로그인 구현 (SSO)

#Github

[원본 링크]

일반적인 상용서비스라면 없어도 되겠지만, 개발자들이 대상이 되는 서비스라면 github 로그인 연동은 거의 국룰이라고 할 수 있다.

프로세스

github 연동페이지로 이동해 로그인하고, 임시 인증 코드를 받아온다. (브라우저)
인증 코드를 사용해서 액세스 토큰을 받아온다. (서버)
액세스 토큰을 사용해서 유저 정보를 가져온다. (서버 or 브라우저)

개발자 설정 (in Github)

먼저 적용할 계정이나 조직의 개발자 설정에서, OAuth 탭으로 이동한다.

그리고 새 항목을 등록한다.

그럼 이름이나 사이트 링크, 그리고 콜백 URL을 넣으라고 한다.

여기서 가장 중요한건 콜백 링크다.
이 링크로 인증된 코드값을 넘겨주기 때문이다.

그럼 이런식으로 OAuth 앱이 생성된다.

저 Client ID가 내 앱 자체의 고유값이다.
저건 공개해도 아무 상관이 없고, 프론트에서도 갖다써도 된다.

Client secret은 콜백 URL로 넘어온 코드값을 서버에서 분해할 때 사용한다.

프론트 (브라우저) 구현

먼저 브라우저단부터 봐보겠다.

우선 로그인 버튼을 누르면 github 페이지로 이동하게 한다.

링크는 이런식으로 주면 된다.

https://github.com/login/oauth/authorize?client_id=클라이언트ID

그럼 누를때

이렇게 인증 페이지로 이동하는데

인증이 성공한다면, 개발자 페이지에서 설정해놨던 콜백 URL로 리다이렉트를 해준다.

여기서 query parameter로 code를 넘겨주는데, 이걸 서버에다 넘겨줘서 분해해보고, 문제가 없으면 로그인을 시켜주면 되는 것이다.
code는 수명이 10분이다.

그럼 이제 저걸로 빨리 액세스토큰을 만들어야 한다.
api는 이렇다.

POST https://github.com/login/oauth/access_token

헤더
Content-Type: application/json
Accept: application/json

리퀘스트 바디
{
     client_secret: String,
     client_id: String,
     code: String,
}

그럼 이렇게 토큰을 준다.

저걸 또 가져다가 프론트에 주거나, 아니면 바로 서버에서 처리하면 된다.
API에 이렇게 날려주면

GET https://api.github.com/user

헤더
Content-Type: application/json
Accept: application/json
User-Agent: 내 앱 이름
Authorization: Bearer 액세스토큰

이것저것 뿌려준다.
저기서 고유값은 id니까 유저를 고유하게 식별하려면 저걸 쓰면 된다.
그 외에도 닉네임이나 이메일 정도는 긁어올 수 있는데, email같은건 nullable이라 없을 수도 있다.

여기서부터는 구현하기 나름이다.
유저 데이터에 github_id로 필드를 추가해서 액세스토큰만 있으면 그걸로 로그인이 되게 할 수도 있고...

참조
https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps
https://docs.github.com/en/rest/users/users?apiVersion=2022-11-28#get-the-authenticated-user