[.NET] ASP.NET Framework 4.x - 구글 로그인 API 구현

안녕하세요, 구글 로그인 API를 .NET Framework 4.x 환경에서 구현하려 하는데
생각보다 관련 문서 및 정보가 너무 없더라구요. (해외 자료는 많음)

그래서 간단하게 정리해서 제 블로그에 올려봅니다.

참고하실 분들은 참고해서 구현해봐요.

[개발 프로세스]

구현하기 앞서 개발 프로세스 간단하게 설명하고 갈게요.

 

1. Client ID/Secret /Redirect URI 값으로 인가코드를 구하는 요청 URL에서 사용자 인증 진행. (GET) 

(흔히 아는 구글 로그인 페이지로 들어가지며 원하는 계정으로 인증 진행)

https://console.cloud.google.com/apis/credentials

2. 인증이 완료되면 설정한 Redirect URI에 인가 코드가 전달된다.

(그러면 인가코드를 전달 받을 경로가 필요하겠죠? - 콜백 컨트롤러 메서드 생성 필요)

3. 콜백 메서드에서는 전달 받은 인가코드로 각 서비스에서 제공하는 Rest API POST 통신으로 토큰 값을 얻을 수 있다.

(참고 문서 - https://developers.google.com/identity/gsi/web/guides/offerings?hl=ko)

솔직히 참고 문서봐도 너무 불친절해서 걍 내 블로그 쭉 보고 구현하는게 나을 지도?

 

4. 토큰 값은 각 서비스별 제공하는 API 목록에서 활용되며 유저 정보 가져오기 요청 등에 사용된다.

구글에서 제공되는 기능 한정하에 원하면 확장 기능 추가하면 된다.

 

이제 정리된 내용으로 구현된 코드 공유드릴게요.

• 관련 Nuget Package - GoogleAuthentication
  • 패키지 설치시 장점 : 코드가 간편하며 검증된 Rest API 통신 기능 사용
  • 주의 할 점 : 해당 패키지 사용시 관련 패키지들 업데이트 필수
    • 업데이트 했을 경우 영향이 있는지 확인 필요
    • 패키지 사용이 불가할 경우 카카오 개발 방식으로 변경 (카카오 간편 로그인도 블로그에 올릴 예정입니다.)
    • 관련 없으면 그냥 쓰셔도 무방합니다~

[각 설정 값 정의]
시작전에 각 필요한 정보를 필드에 저장한다.

private readonly string google_clientId = "";
private readonly string google_redirectUri = "";
private readonly string google_clientSecret = "";

[인가 코드 가져오기]

• ViewBag.google_resquest_url 해당 url로 (클라이언트)사용자 인증 후 인가 코드를 받는다.
  • 카카오랑 다르게 간편한 이유는 GoogleAuthentication 패키지를 설치해서 사용하기 때문이며 원리는 카카오와 거의 비슷하다. (카카오 간편 로그인도 블로그에 올릴 예정입니다.)

public ActionResult Login() // 요청 페이지
        {
            // Google 로그인 구현 - Nuget Package 활용
            var google_resquest_url = GoogleAuth.GetAuthUrl(google_clientId, google_redirectUri);
            ViewBag.google_resquest_url = google_resquest_url;

            // Kakao 로그인 구현
            var kakao_resquest_url = kakao_resquestUrl + 
                "&client_id=" + kakao_clientId +
                "&redirect_uri=" + kakao_redirectUri +
                "&scope=account_email";

            ViewBag.kakao_resquest_url = kakao_resquest_url;

            return View();
        }

• 가져온 인가코드는 구글에서 설정한 리다이렉트 URI 콜백 경로로 전달이 되며, 인가코드와 함께 구글에 토큰 가져오기를 요청한다.
• 추가로 GoogleAuthentication 에서 제공되는 기능으로 비교적 간편하게 GetAuthAccessToken 메서드를 사용해서 토큰 값을 얻어 올 수 있다.
• 가져온 토큰 값으로 GetProfileResponseAsync 사용자 정보 얻기 요청 메서드를 사용하여 유저 정보를 가져온다.

public async Task<ActionResult> GoogleLoginCallback(string code)
        {
            var token = await GoogleAuth.GetAuthAccessToken(code, google_clientId, google_clientSecret, google_redirectUri);
            var userProfile = await GoogleAuth.GetProfileResponseAsync(token.AccessToken.ToString());

            TempData["UserProfile"] = userProfile;

            return RedirectToAction("LoginComInfo");
        }

[결과]

• 처음 구글 클라우드 Dev에서 설정한 OAuth 동의하면에서 설정한 값을 가져온다.

{ 
"id": "0000000", 
"email": "garden@~~.~~", 
"verified_email": true, 
"name": "가드니", 
"given_name": "가드니", 
"family_name": "가드니", 
"picture": "비밀~(프로필 사진 url)", 
"locale": "ko", 
"hd": "gardengarden" 
}

 

몇 없는 닷넷 개발자에게 도움이 되셨다면! 다행입니다~