rgbitcode 소셜로그인 - 깃허브 간편로그인 개발기

rgbitcode 웹 사이트를 운영하면서… 비회원 댓글을 남길 수 있도록 했지만 아무도 댓글을 남기지 않은것 같습니다ㅎㅎ

( 비회원 댓글 쓸때 사용자명/비밀번호 넣어야 하는 것도 상당히 귀찮기 때문이 아닐까 싶기도 … )

아무런 사용자의 피드백이 없으니 혼자 글을 쓰며 외딴섬에서 글을 쓰고 있는 느낌을 받고 있습니다 ㅋㅋ

그래서 간단하게 소셜 간편 로그인을 통해 댓글을 남길수 있도록 하고, 앞으로 가입을 해야만 볼 수 있는 콘텐츠를 넣어볼까 합니다.

그리고 일반회원과 크리에이터 회원을 구분하여 서로 다른 관리자 페이지에 들어갈 수 있도록 만들어 보려고 합니다.

이번 글은 이런 생각을 가지고 기존 코드를 수정해나가면서 깃허브 간편 로그인까지 구현해보면서 작성해보게 됬습니다

.

Github OAuth App

Settings / Developer Settings / OAuth Apps 탭에서 New OAtuh App 을 클릭한 후

어플리케이션 이름, 홈페이지 URL ,콜백 URL 을 입력하고 클라이언트 ID와 클라이언트 시크릿을 받아옵니다.

프로세스

프로트엔드 : NextJS

백엔드 : Spring Boot

github:
  authorization-uri: https://github.com/login/oauth/authorize
  token-uri: https://github.com/login/oauth/access_token
  user-info-uri: https://api.github.com/user

백엔드 SpringBoot 백엔드에서 authorization-uri을 통해 깃허브 로그인 인증 후 콜백 URL로 리다이렉션

→ 콜백 URL 에서 token-uri 을 통해 access_token 을 가져온 후 user-info-uri 를 통해 사용자 정보 획득

→ 내부 로직으로 회원가입처리 / 스프링시큐리티 인증에 사용할 JWT 토큰 발행 쿠키에 저장

→ 백엔드에서 NextJS 프론트엔드 서버로 응답

→ 프론트엔드 Next-auth로 로그인을 시킨 후 쿠키삭제, next session에 토큰 저장

→ 이후 접근권한이 필요한 페이지에서 API 요청시 마다 next session에서 토큰을 꺼내와 HTTP Header에 담아 API 요청

→ Spring Security 요청 권한을 검증하여 응답

authorization-uri을 통해 로그인을 하고 나면 등록한 콜백 URL 로 code랑 state 를 받아오는 것을 볼 수 있습니다.

Spring Boot 백엔드

콜백 url에서 깃허브 accessToken 을 가져온 후 해당 토큰으로 사용자 정보를 요청하면

깃허브 사용자 정보가 대략 이런식으로 오는 것을 확인할 수 있습니다.

attributes :

{login=, id=, node_id=, avatar_url=, gravatar_id=, url=, html_url=, followers_url=, type=User, site_admin=false, name=, company=null, blog= location=korea, seoul, email=null, hireable=null, bio=Happy New Year ! 2024😊, twitter_username=null, public_repos=, public_gists=0, followers=6, following=21, created_at=2020-02-03T06:44:00Z, updated_at=2024-05-05T18:47:18Z, }

대략 이런식으로 옵니다. (다른 정보는 공백으로 가려놨습니다.)

그런데 중요한 사실은, 로그인을 요청한 깃허브 사용자 계정에 메일을 추가해놓지 않으면 이메일이 null로 온다는 것이었습니다.

카카오의 경우에도 사업자를 등록하고 비즈앱을 사용하거나 별도 검수를 통해 승인받지 않으면 이메일을 응답해주지 않고,

깃허브 또한 사용자가 이메일 정보를 기입하지 않으면 못가져올 수도 있기에…

여러 소셜 간편로그인을 통해 가입을 시키고 내부 서비스를 이용할 수 있도록 만들려고 한다면,

이메일을 못가져올 수 있다는 것을 고려해 다른 방식이 필요해보였습니다.

아무튼 내부처리를 통해 오류가 발생하지 않았다면 프론트엔드로 요청이 성공 하였음을 다시 응답해주도록 했습니다.

Next-Auth

Credentials({
    id: "social",
    name: "social",
    credentials: {
        token: { label: "Token", type: "text" }
    },
    authorize: async (credentials) => {
        // 스프링부트 백엔드에 요청하여 로그인 정보를 받고 
    }
}),

// 이후 콜백에서 next session에 accessToken저장 

그런데 Next-Auth를 사용하게 되면 auth 디렉토리 안에 있는 모든 페이지들은 Next-Auth를 통해 로그인을 하지 않으면 모두 차단되고…

프론트엔드 쪽에서도 별도로 로그인을 시켜줘야 하는 문제가 있었습니다.

Spring Boot에서 소셜로그인 인증을 하면서 Next-Auth 를 같이 사용하며 기존의 로그인 방식도 그대로 동작되도록 해야했습니다.

이러한 방식으로 구현해본적이 없었는데, 인터넷 상에도 해당정보를 찾을 수가 없어 약간 고생을 했습니다. 소셜로그인 성공 후 프론트엔드 페이지에 응답해주고 프론트엔드 페이지에서 강제로 Next-Auth를 통해 로그인을 시키는 방식으로 처리를 했네요.

우선 로컬환경에서 테스트는 다 해봤는데, 배포는 좀 나중이 될 것 같습니다.