소셜 로그인은 역시 짜증

다시 이 망할 흐름을 살펴볼때가 됐다.

API에 나와있듯 사용자의 GET https://github.com/login/oauth/authorize 요청이 필요하므로 버튼을 해당 링크로 이동하게 한다.

근데 이대로만 보내면 404가 에러가 뜨는데 url 뒤에 파라미터를 붙여서 보내야 한다.

client_id는 필수고 그외 본인이 필요한 파라미터들을 추가하여 보낸다.

이 부분을 효율적으로 관리하기위해 라우터와 컨트롤러에 따로 startGithubLogin을 만들어 관리한다.

이번 프로젝트에선 메일 주소만 필요하다 생각하여 scope에는 user:email만 추가하였다.

URLSearchParams를 사용하여 파라미터를 관리하여 gthub로 유저를 효율적으로 보낸다.

유저가 수락하게 되면 Authorization callback URL에 등록된 url의 파라미터로 code를 보내주는데, 우리는 이걸 통해 access token을 교환해야 된다.

필수로 요구하는 3개의 파라미터를 POST https://github.com/login/oauth/access_token로 보내야 하는데 fetch를 사용해야 한다.

메소드를 POST로 바꾸고 우리는 json 타입이 필요하기에 headers에 Accept: "application/json"까지 추가하며 fetch().json()을 사용하여 json 타입으로 가져온다.

강의땐 토큰타입을 토큰으로 사용했었지만 현재 공식api에는 bearer를 쓰라고 하고 token을 콘솔로그로 확인해봐도 bearer가 나오므로 이걸 사용한다.

access token을 통해 api에 접근할건데 우린 메일주소만 있으면 되므로 fetch를 사용하여 GET https://api.github.com/user/email로 메일주소를 요청한다.

내가 바보라서 그럴수 있겠지만 공식api에서 이부분을 보고 그냥 Authorization: 토큰이담긴변수 를 선언했었는데 이러니까 안되더라.

우측처럼 토큰타입과 토큰을 headers에 보내면 메일정보를 준다.

이걸 확인해보면 가입했을때 메일과 깃허브에서 유저에게 전송용으로만 사용하는 메일주소 두개가 나오는데 배열에서 사용하는 find 함수를 써서 필요한 것만 추려내면 된다.

이제 깃허브를 통해 가져온 메일주소로 로그인 규칙을 어떻게 설정할지 고민해야 된다.

나는 애초에 회원가입시 아이디를 이메일로 할거라 소셜 로그인을 시도했을때 db에 동일한 메일이 있다면 기본 로그인을 하게 이동시키고 경고 메시지를 줄 생각임

https://github.com/Daniel-Jeon/project1/commit/07a948c12c7b4ba3fde188ebbca82abf0c0193f3

github login and logout · Daniel-Jeon/project1@07a948c