홈페이지를 만들면서 가장 큰 걸림돌은 바로 로그인 기능이었다. 로그인을 넣는 순간 생각해야 할 것이 많아졌다. 가장 첫 번째로는 보안문제였다. SSL을 사용하면 되겠지만 비용문제도 있었다. 보안 문제가 잘 해결됐다고 해도, 회원가입을 받아야 하고, 그것을 안전하게 저장하고 관리하는 것 또한 문제이다. 그리고 BOT문제도 (중국분석팀에서 BOT의 무서움을 느꼈다) 무시할 수 없었다. 물론 이런 작은 홈페이지는 관심 없겠지만..

그래서 구글 로그인은 적용하게 되었고, 그 과정을 소개하려 한다.
OAuth2.0을 사용하는 방법을 소개하는 것이라고 볼 수 있을까? 주로 참고한 문서는 Using OAuth 2.0 for Web Server Applications이다.

순서

  1. 구글 개발자 콘솔에 프로젝트 등록
  2. 정보 요청 페이지 만들기
  3. 서버에서 정보 처리하기
  4. 기타 이슈들

구글 개발자 콘솔에 프로젝트 등록

아래는 사용자 인증 정보 캡춰화면이다. 클라이언트 ID를 만들고, redirection URI를 등록하면 된다. 이 과정은 그냥 하나하나 지나가면 될 것 같다.

구글 개발자 콘솔 사용자 인증정보

정보 요청 페이지 만들기

몇 주간 고민하고 씨름하던 과정을 순서대로 정리하면 이렇게 된다. 아래는 사용자가 로그인을 시도하고, 웹서버에서 구글계정의 정보들을 가져오는 과정이다.

  1. 사용자가 로그인(회원가입)버튼을 누른다.
  2. 구글 로그인 화면이 나타난다. (이미 로그인이 되어 있으면 나타나지 않는다.)
  3. 홈페이지에서 정보 활용 동의를 묻는 화면이 나타난다. (동의는 최초 한번만 한다.)
  4. 1번의 링크에서 지정한 RedirectURI로 redirection된다.
  5. 홈페이지 서버에서 Request를 받는다.
  6. Request에서 code값을 획득한다.
  7. 구글로 부터 Access token을 획득한다. (code를 사용한다.)
  8. 구글로 부터 유저 정보를 획득한다. (Access token을 사용한다.)
  9. 이제부터는 서버에서 자유롭게 활용한다.

OAuth2.0 web flow

각 순서 별로 조금 더 자세히 적어보려고 한다.

  1. 사용자가 로그인(회원가입)버튼을 누른다.
<a href="https://accounts.google.com/o/oauth2/auth?
    client_id=CLIENT_ID
    &redirect_uri=REDIRECT_URI
    &scope=https://www.googleapis.com/auth/plus.login
    &response_type=code">로그인</a>

2~4 번은 우리가 구현할 내용이 아니다. 구글에서 제공하는 서비스를 이용하는 부분이다.

서버에서 정보 처리하기

5~8 번에 해당하는 것은 직접 구현해야 한다.

참고했던 문서인 Using OAuth 2.0 for Web Server Applications를 정말 많이 봤었다. 아래 GetAccessdTokenAsync, GetAccountInfoAsync는 위 문서를 보고 구현했다. 자세한 구현을 보고 싶다면 github – OauthServer를 참조하면 될 것 같다!


// 6. code값을 획득한다.
string code = Request.Query["code"];
string error = Request.Query["error"];
if (error == "access_denied")
    throw new AccessDeniedException();

// OAuthServer는 직접 구현한 class이다.
// 7. access token을 획득한다.
var jsonStr = await OAuthServer.GetAccessTokenAsync(code, "register");
dynamic json = JsonConvert.DeserializeObject(jsonStr);
var accessToken = (string)json.access_token;

// 8. 유저 정보를 획득한다.
var accountInfoJson = await OAuthServer.GetAccountInfoAsync(accessToken);
dynamic accountInfo = JsonConvert.DeserializeObject(accountInfoJson);

기타 이슈들

MONO 버전 문제

Mono 버전이 낮으면 https 전송이 안된다. 나는 3.4 (기억이 벌써 가물가물)를 쓰고 있었는데 4.0 으로 업그레이드 했다. MONO 설치법은 이 링크 참고!

수 많은 시행착오

결과만 적어서 간단해 보이지만, (매일매일 작업한 건 아니지만) 2주일 정도 걸쳐서 진행되었다. 오죽하면 github repository를 하나 만들어서 작업을 했을까.. 사실 조금 힘들었다.

OAuth 2.0

이번 작업을 계기로 OAuth 2.0을 조금 알게 되었고, 다른 계정들도 함께 인증 할 수 있겠다는 생각이 들었다. 앞으로 다음, 카카오, 네이버 계정을 연동할 계획이다.