20221225 TIL 외부 API 걸음마 떼기 (feat. github 소셜 로그인)

 

로그인과 회원 가입이 포트폴리오를 만드는데 킬링 포인트가 아닌 것은 알고 있다!

로그인과 회원 가입이 없는 서비스는 잘 없지만, 당연히 있을 법한 기능이지만, 프로젝트의 핵심 기능은 아니다.

그래서 팀에 따라서는 핵심 기능을 먼저 만들고, 로그인과 회원가입을 나중에 만드는 경우도 있다고 들었다.

 

그런데 나는 기획을 하느라 살짝 잃었던 프로그래밍 감을 되찾기 위해 로그인과 회원가입 기능을 먼저 구현을 했고,

다행히 처음에는 많이 낯설었지만 기능을 구현하면서 감을 되찾았고,

스프린트 1주차 동안 질문 목록 보여주기, 질문 추천 수 기준 정렬, 상태 기준 정렬 등등까지 완료할 수 있었다!

곧 css를 입혀줄게!

 

이번 주에 원래 목표로 했던 분량을 완료해서,

원래는 하려고 했지만 생각보다 막막해서 우선순위를 미뤄두고

생각 날 때마다 방법을 조금씩 찾아봤던 깃헙 소셜로그인을 오늘 조금 진척시켰다!

아예 어떻게 시작을 할 지 모르는 상황에서 클라이언트(리액트)에서

깃헙 소셜로그인하기 버튼을 눌렀을 때 나와야 할 페이지를 보여줄 수 있게 되었다!

 

OAuth를 이용하여 깃헙 소셜 로그인을 구현할 수 있다.

OAuth는 이미 가입된 다른 서비스(카카오, 깃헙, 페이스북, 구글 등)에 등록된 정보에 접근할 수 있게 해준다.

이는 이미 가입된 다른 서비스의 계정 하나를 이용해서

수많은 서비스에 아이디 비밀번호를 새로 만들어서 기억하지 않아도 되는 편리함을 제공한다.

 

나는 스택오버플로우와 비슷한 서비스를 포트폴리오로 만들어보고 있기 때문에 

개발자들을 타겟으로 하고 있고, 많은 개발자들이 깃헙 계정을 가지고 있기 때문에 깃헙 소셜 로그인을 구현하고자 하였다.

 

깃헙 소셜 로그인을 구현하려면 먼저 내 깃헙 계정에 어플리케이션을 등록해야 한다.

https://github.com/settings/apps/

에 접속하여 New GitHub App을 눌러 등록할 수 있다!

앱 이름과 홈페이지 url, 소셜 로그인이 성공했을 때 호출할 url을 등록하고,

(배포를 아직 하지 않아서 localhost를 쓰고 있지만, 나중에 배포를 하면 도메인을 수정해주어야 한다.)

Generate a new client secret 버튼을 눌러 secret을 만들고, 꼭 기록을 해둔다. (더 이상 볼 수 없다.)

https://github.com/login/oauth/authorize?client_id={client_id}&redirect_uri={redirect_uri}?scope={scope}

위 주소로 접속을 하면 아래와 같이 소셜 로그인을 할 수 있는 페이지가 뜬다!!

즉, a태그에 위 주소를 연결하여 클라이언트에서 보여주면, 소셜로그인의 첫 발을 내딛을 수 있다.

돌이켜보면 많이 어려운 작업은 하나도 없었고, 아직 소셜로그인 기능을 완성하진 못했지만,

처음 외부 API를 써보다보니 시간이 조금 오래 걸렸던 것 같다.

그래도 시작이 반이니 반 넘게 했다!

 

이 작업은 우선순위가 높진 않으니 다음주 스프린트를 진행하면서 리프레시를 하고 싶을 때마다 조금씩 진행을 하면 좋을 것 같다.

이제 Authorization Code를 받아서 access token을 발급하는 작업을 진행하고,

access token을 서버로 보내서 만약 회원 등록이 되어있지 않다면

access token으로 Github API를 호출해서 필요한 정보를 얻어와서 회원 등록을 하고,

jwt access token을 클라이언트로 보내주는 작업을 진행하면 된다.

 

소셜로그인을 진행하다보니, refresh token을 이용하는 방식을 조금 더 알게 되었는데,

지금은 jwt를 이용해서 refresh token없이 구현을 해두었는데,

보안을 위해 refresh token을 이용하는 방식으로 수정하는 것도

리프레시를 하고 싶을 때마다 조금씩 시도해보면 좋을 것 같다!

 

다음 주도 화이팅!

 

참고

https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps#web-application-flow

https://tecoble.techcourse.co.kr/post/2021-07-10-understanding-oauth/