[Youtube 클론코딩] 소셜 로그인 기능, 로그아웃 구현 (1)

다양한 서비스에서 이미 존재하는 플랫폼의 ID로 로그인하는 기능을 구현한다.

이러한 기능을 OAuthentication이라고 하는데, Github이나 카카오톡, 네이버 등에서 이미 OAuth를 지원한다.

 

Authorizing OAuth Apps - GitHub Docs

Authorizing OAuth Apps - GitHub Docs

Github OAuth

Github의 OAuth기능을 사용하려면 다음의 절차를 따른다.

1. Github에 clientID와 scope를 이용해 사용자 정보를 요구한다.

2. Github에 로그인하여 정보 요구에 동의한다. (Authorization)

3. Github이 미리 설정한 URL에 '임시 코드'와 함께 리다이렉트 시킨다.

4. 해당 URL에서 clientID, clientSecret과 발급받은 임시코드를 이용해 Github에 'Access Token'을 발급 요청한다.

5. Github은 입력받은 정보가 유효함을 확인하고 Access Token을 발급한다.

6. Access Token을 이용해 Github API에 원하는 정보를 받아온다.

 

Step 1. 유저의 GitHub identity 요청하기

https://github.com/login/oauth/authorize

아래의 파라미터를 위 주소에 쿼리스트링으로 입력한다.

여기서 client_id는 GitHub의 클라이언트 ID인데, 이는 GitHub이 어느 서비스가 유저의 정보를 요청하는지 구분한다.

즉, 우리의 App의 OAuth를 관리해주는 GitHub 애플리케이션을 의미한다.

Developer applications (github.com)

GitHub: Let’s build from here

이는 GitHub에서 [Settings] - [Developer settings] - [OAuth Apps]에서 확인 가능하다.

여기서 [New OAuth App] 버튼을 클릭하면 다음의 폼이 뜨는데, 항목은 다음과 같다.

Application name: OAuth app의 이름

Hompage URL: 현재 서버의 Domain. 현재는 https://localhost:4000/ 이다.

Authorization callback URL: 완료된 요청을 보낼 주소. https://localhost:4000/users/github/finish로 지정.

 

각 항목을 작성한 뒤 application을 만들면 다음처럼 Client ID와 Client secrets가 보인다.

여기서 보이는 Client ID을 쿼리스트링을 이용해 보내주면 된다.

구현

login.pug에서 /users/github/start로 GitHub 로그인 버튼을 구현한다.

userRouter에 github/start에 해당하는 컨트롤러를 처리해준 뒤 userController에 startGithubLogin 함수를 구현한다.

allow_signup은 만약 유저가 github에 로그인이 안 된 상태라면 로그인 창이 나타나는데,

거기서 Github으로의 회원가입을 가능하게 할 것이냐는 옵션이다. true라면 회원가입이 가능하고 false라면 불가능하다.

scope는 유저의 private 데이터를 가져오고 싶으면 설정하는 데, 각 항목 당 공백으로 구분한다.

Scopes for OAuth Apps - GitHub Docs

Scopes for OAuth Apps - GitHub Docs

그런데 이런 방식으로 구현하면 나중에 수정하기도 힘들고 오타가 발생해도 찾기 어렵다.

 

URLSearchParams()를 이용하면 편하게 사용할 수 있다.

URLSearchParams - Web APIs | MDN (mozilla.org)

URLSearchParams - Web APIs | MDN

URL을 쉽게 다룰 수 있게 해주는 함수이다.

매개변수로 URL String이나 객체를 받고 이를 분석해 URLSearchParams 객체로 반환한다.

URL String을 받으면 내부에서 분석해서 origin 도메인, 쿼리스트링 등을 분리할 수 있고

객체를 받으면 객체를 쿼리스트링으로 바꿔준다.

 

이걸 이용해 다음처럼 구현하면 좀 더 유지보수가 쉬운 형태로 제작할 수 있다.

client_id의 경우 어차피 쿼리스트링으로 전송하므로 숨겨줄 필요가 없지만

다른 함수에서도 쓰이기 때문에 편하게 전역변수로 관리해주기 위해 환경변수로 만들어주었다.