search

boostcamp-Web25B / Study-Share

0 stars 0 forks source link

Github OAuth2.0 #3

Open Min-h-96 opened 1 year ago

Min-h-96 commented 1 year ago

OAuth 2.0

Github OAuth 2.0 을 활용하여 로그인 기능을 구현하기에 앞서 OAuth 2.0 무엇인 지에 대해서 알아보려고 합니다.

OAuth 는 기본적으로 서비스 제공자(ex. Github, Google, Naver)가 신뢰할 수 없는 타 애플리케이션(ex. 우리가 만든 애플리케이션)에게 사용자의 아이디와 패스워드를 제공하지 않더라도 사용자의 특정 정보에 접근하거나 어떤 서비스를 제공받을 수 있도록 하는 방법이자 표준입니다.

최근 일반적으로 SNS 계정 또는 구글, 네이버 계정으로 로그인하는 것이 가장 대표적인 예시입니다. 내가 만든 서비스에 수동으로 회원가입 기능을 넣지 않더라도 서비스 제공자가 가지고 있는 개인정보를 기반으로 로그인할 수 있도록 하는 것이며 이를 사용하면 작은 서비스에서 직접 비밀번호를 관리하는 번거로운 부분을 대기업에게 넘기게 됩니다.

구성 요소

OAuth 2.0 의 구성요소는 대체로 Client, Resource Owner, Resource Server, Authorization Server 로 구성되며 각각 다음을 의미합니다.

절차

스크린샷 2022-10-12 오후 8 14 31

다음으로 OAuth 의 절차에 대해 알아보려고 합니다.

  1. register
    • Client 는 Resource Server 를 이용하기 위해 승인을 먼저 받아야 합니다.
    • 등록을 하는 방법은 조금씩 상이하지만, 공통적으로 Client ID, Client Secret, Authorized redirect URIs 를 받습니다.
  2. Resource Owner(사용자) 의 승인
    1. 사용자의 승인을 받기 위해 Login with Google+ 와 같은 버튼을 클릭하도록 함으로써 승인 절차를 시작합니다.
    2. 해당 버튼에 http://autrhorization.server/?client_id=1&scope=B,C&redirect_uri=https://client/callback 와 같은 링크로 사용자에게 제공합니다.
    3. Resource Owner 가 해당 주소로 Authorization Server 로 접속합니다.
    4. Authorization Server 에 로그인이 되어있지 않으면 로그인을 하도록 합니다.
    5. 로그인이 완료되면 사용자가 접속한 uri 에 쿼리에 담겨있는 client_id 값과 redirect_uri 의 값이 일치하는 내용이 등록되어 있는지 확인하고, 확인된다면 scope 에 해당하는 권한을 허용할 지를 확인하는 메시지를 전송합니다.
    6. 이 내용을 Resource Owner 가 허용하면, Authroization Server 는 해당 Owner 가 허용했다는 정보를 알게 됩니다.
  3. Authroization Server 의 승인
    1. Authorization Server 는 Resource Owner 에게 authorization code 를 헤더에 다음과 같은 내용을 포함시켜 전송합니다. Location: http://client/callback?code=3
    2. Resource Owner 위 주소로 이동하게 됩니다.
    3. Client 는 Resource Owner 가 이동한 주소를 통해서 code=3 이라는 값을 알게 됩니다.
    4. Client 는 알게 된 authorization code 값을 포함해서 본인의 client_id, client_secret, redirect_uri 와 함께 Authorization Server 에 요청하고, Authorization Server 는 Client 가 보낸 값이 모두 일치하는 지 확인합니다.
  4. Access Token 발급
    • Authorization Server 는 Client 에게 Access Token 을 발급합니다.
    • Client 는 발급받은 토큰과 함께 처음 허용된 권한에 맞는 API 를 Resource Server 에 요청하여 응답을 받습니다.

이 외의 Refresh Token 을 발급받고 활용하는 과정도 있지만, 현재 레벨에서는 일단 이정도까지 학습하고 추후에 기능을 추가하고자 할 때 더 공부하고자 합니다.

Github OAuth2.0 을 이용한 로그인 기능

OAuth 의 원리와 방법에 대해서 공부했으니, Github OAuth 를 이용해서 로그인 기능을 구현하는 방법에 대해서 알아보려고 합니다.

  1. Github 에 애플리케이션을 등록하고, Client ID 와 Client Secret 발급 받기
    • Github 의 Settings → Developer settings → OAuth Apps 에 들어갑니다.
스크린샷 2022-10-13 오전 12 11 42 
- `New OAuth App` 을 클릭해서 새로운 애플리케이션을 등록합니다.
스크린샷 2022-10-13 오전 12 10 43 
- 위 사진처럼 필요한 정보를 입력하고, 애플리케이션을 등록합니다.

- `Client_secret` 을 발급받습니다.
  1. 사용자(Resource Owner)가 Github 에 요청하도록 하기
    • Get https://github.com/login/oauth/authorize 로 요청을 보내도록 하는데, 이 때 필요한 client_id, scope, allow_signup 과 같은 parameter 를 query 에 담아 함께 보냅니다.
스크린샷 2022-10-13 오전 12 17 22 
1. 사용자는 로그인이 되어 있지 않으면 로그인을 하고, 권한 요청에 대한 허가를 진행합니다.
2. Client(우리 애플리케이션)는 사용자로부터 `code` 값과 함께 리다이렉트 된 callback url 로 요청을 받습니다.
3. 받은 `code` 와 함께 `client_id, client_secret` 과 함께 `https://github.com/login/oauth/access_token` 로 post 요청을 보내 access token 를 받습니다.
4. 받은 access token 으로 적절한 api 를 Github(Resource Server) 에 요청해서 사용자의 정보를 받아옵니다.

Reference

[WEB2 - OAuth 2.0](https://opentutorials.org/module/3668)

[Github 소셜 로그인 OAuth2.0 인증하기 | Kkiri Blog](https://devkkiri.com/post/542d8419-6fb1-4e28-bbbe-d68f832fd78a)

Min-h-96 commented 1 year ago

추가 Reference