본문 바로가기
카테고리 없음

[OAuth] Github 소셜 로그인 구현하기

by hbIncoding 2024. 10. 17.

1. Github에서 OAuth app 추가하기

깃허브 페이지

  • 새로운 OAuth app을 추가한다.

  • Homepage URL에는 해당 웹페이지의 주소를 넣고
  • Autorization callback URL 은 응답 받을 주소를 입력한다.
  • 만들어둔 Application name을 클릭하여 아래 세팅으로 접근한다.
    • Client ID와 Client secret을 잘 적어둔다.

2. 로그인 과정

  1. GET : https://github.com/login/oauth/authorize?client_id=${process.env.CLIENT_ID}&redirect_uri=${redirect_URI}&scope=user:email 
    • 위 요청을 보내면 앞서 작성한 Authorization callback URL로 GitHub에서 요청을 건다.
    • 해당 url로 이동한 후 github에 로그인 되어 있다면 로그인된 유저의 정보를 얻기 위해서 다음 단계를 진행한다고 할 수 있다.
  2. GET : Authorization callback URL : ex)`http://localhost:3000/login/github/callback`
    • github에서 callback URL로 요청을 보낼때 쿼리 스트링 형태로 code가 들어온다
    • ex) /auth/github/callback?code=bdb8bdab5ea6ec0b7ab1
  3. POST : https://github.com/login/oauth/access_token  
    • 앞서 받은 code를 이용하여 accessToken을 요청할 때 사용한다.
    • 이때 client_id와 client_secret도 함께 사용한다.
  4. GET : https://api.github.com/user/emails  
    • 앞서 받은 accessToken을 이용하여 user 정보를 획득한다.
    • `/email` 을 붙인 것은 email 정보만 얻기 위함이다. emails를 안붙인다면 온갓 정보가 날라온다.
  5. 이후 로그인 처리
    1. 받은 email 정보를 parsing하여 필요한 정보만 획득하도록 한다.
    2. 필요한 정보로 세션을 만들고 로그인을 진행하고, 페이지 리다이렉트를 해준다.