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

안녕하세요, 이전 글에서는 구글 로그인 API 관련 포스팅을 했었는데요.
이번에는 카카오 로그인 API 관련해서 포스팅해보려고 해요.

 

이전에 구글 로그인 API는 Nuget Package에 GoogleAuthentication 패키지 설치했었는데, GoogleAuthentication에서는 각 REST API 통신 기능이 들어가 있어서 각 기능들을 참조해서 쉽게 구현했었어요.

 

이번에 카카오 로그인 API는 따로 패키지 설치 없이 구현해보려고 합니다.

 

1. 우선 카카오 DEV에서 환경 세팅을 먼저 해야겠죠.

관련 문서 (한 번은 꼭 읽고 시작하세요.)

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

사이트 도메인(Web) - 내가 카카오 로그인을 사용할 서비스 도메인을 입력해주시면 되요.

로컬 환경이라면 로컬 주소 입력하고 하셔도 되요.

Redirect URI - 리다이렉트 URI 가장 중요하죠. 사용자 정보 등을 얻기 위해서는 사용자 엑세스 토큰 값이 필요해요.

해당 토큰 값을 얻기 위해서는 인가코드가 필요한데, 그 인가코드를 받아줄 URI 경로를 카카오에게 알려줘야 해요.

 

2. 카카오 DEV에서 환경설정이 모두 완료되었다면, 우선 인가코드를 받아보시죠.

[인가 코드 가져오기]

kakao_resquest_url 해당 url로 (클라이언트)사용자 인증 후 인가 코드를 받을 거에요.

(참고 문서 - https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-code-sample)

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();
        }

해당 url로 접속시 - 사용자 인증 화면

3. 사용자 인증이 완료되었다면, 카카오 DEV에서 설정한 Redirect URI로 인가코드가 넘어 올 거에요.

kakao_resquest_url을 통해서 사용자 인증이 완료되면, 인가코드는 카카오에서 설정한 리다이렉트 URI 콜백 경로로 전달돼요.

아래 소스코드의 메서드를 보시면 string 타입의 code라는 이름으로 파라미터가 있는데, 여기 파라미터로 인가코드를 받아올 거에요.

public async Task<ActionResult> KakaoLoginCallback(string code)
        {
            return RedirectToAction("LoginComInfo");
        }

 

4. 이제 받아 온 인가코드로 POST 요청을 해서 사용자 엑세스 토큰을 가져올 거에요.

[토큰 가져오기]

KakaoLoginCallback 메서드에 이어서 코드 작성할게요.

(참고 문서 - https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-token-sample)

요청 데이터는 문서를 참고하여 작성고 아래 처럼 requestData 변수에 담아줄 거에요.

public async Task<ActionResult> KakaoLoginCallback(string code)
        {
            // 토큰 요청 데이터
            var requestData = $"grant_type=authorization_code" +
                              $"&client_id={kakao_clientId}" +
                              $"&redirect_uri={kakao_redirectUri}" +
                              $"&code={code}" +
                              $"&client_secret={kakao_clientSecret}";

            // POST 요청 보내기
            string userProfile = await GetKakaoAccessToken(requestData);

            TempData["UserProfile"] = userProfile;

            return RedirectToAction("LoginComInfo");
        }

그리고 GetKakaoAccessToken() 이라는 메서드 생성해주고 requestData 요청문을 파라미터 값으로 넘겨줘요.

[HttpPost]
        private async Task GetKakaoAccessToken(string requestData)
        {
            using (HttpClient client = new HttpClient())
            {
                // 요청 데이터를 StringContent로 변환하고 Content-Type 설정
                var content = new StringContent(requestData, Encoding.UTF8, "application/x-www-form-urlencoded");

                // POST 요청 보내기
                HttpResponseMessage response = await client.PostAsync(kakao_TokenUrl, content);

                if (response.IsSuccessStatusCode)
                {
                    // JSON 응답 텍스트 가져오기
                    string jsonResponse = await response.Content.ReadAsStringAsync(); // 여기까지 토큰 가져오기 성공
                    JObject json = JObject.Parse(jsonResponse);
                    // access_token 값을 가져오기
                    string accessToken = json["access_token"].ToString();
                    // 참고 <https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#req-user-info-request-header>
                    string userInfo = await GetKakaoUserInfo(accessToken, secureResource: false, propertyKeys: null); // 토큰으로 유저 정보 가져오기

                    return userInfo;
                }
                else
                {
                    // 실패 시 예외 처리 또는 오류 메시지 반환
                    return $"오류: {response}";
                }
            }
        }

GetKakaoAccessToken() 메서드에서 닷넷에서 제공하는 HttpClient 클래스를 사용해서 Rest API 통신을 할 거에요.

토큰 값이 정상적으로 들어온다면 90%는 온 거에요.

4. 이제 받아 온 토큰으로 사용자 정보 요청하기

사용자 엑세스 토큰을 구했으니 이제 이 값으로 사용자 정보를 요청할 수 있어요.

그 외로도 다른 정보도 가져올 수 있어요. (그거는 문서 확인하세요)

 

제 소스코드에서는 GetKakaoUserInfo() 라는 이름의 메서드로 사용자 정보를 가져와요.

[사용자 정보 가져오기]

- secure_resource - 이미지 URL 값 HTTPS 여부, true 설정 시 HTTPS 사용, 기본 값 false

- propertyKeys - Property 키 목록, JSON Array를 ["kakao_account.email"]과 같은 형식으로 사용

위 두개의 쿼리 파라미터는 필수 값이 아니니 없이 해도 문제는 없어요.

가장 중요한건 헤더에서 Authorization에 토큰 값을 꼭 넣어줘야 해요.

(참고 문서 - https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#req-user-info-request)

[HttpPost]
        private async Task GetKakaoUserInfo(string accessToken, bool secureResource, string[] propertyKeys)
        {
            // Kakao 사용자 정보를 가져오는 URL
            string userInfoUrl = "<https://kapi.kakao.com/v2/user/me>";

            // 요청 헤더 설정 (인증 토큰을 포함)
            HttpClient httpClient = new HttpClient();
            httpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {accessToken}");

            // 쿼리 파라미터 설정 (secureResource 및 propertyKeys)
            var queryParameters = new List();
            if (secureResource)
            {
                queryParameters.Add("secure_resource=true");
            }
            if (propertyKeys != null && propertyKeys.Length > 0)
            {
                queryParameters.AddRange(propertyKeys.Select(key => $"property_keys[]={key}"));
            }

            // 쿼리 파라미터가 있을 경우 URL에 추가
            if (queryParameters.Any())
            {
                userInfoUrl += "?" + string.Join("&", queryParameters);
            }

            // 사용자 정보 요청 보내기
            HttpResponseMessage response = await httpClient.GetAsync(userInfoUrl);

            if (response.IsSuccessStatusCode)
            {
                string jsonResponse = await response.Content.ReadAsStringAsync();
                return jsonResponse;
            }
            else
            {
                string errorResponse = await response.Content.ReadAsStringAsync();
                return errorResponse;
            }
        }

4. 결과

이제 모든 과정이 끝났어요.

이제 아래 받아온 데이터로 각 서비스에 구현한 로그인 인증 등에 사용하시면 됩니다.

{
	"id":000000000,
	"connected_at":"2023-09-19T05:22:01Z",
	"kakao_account":{
    			"has_email":true,
                        "email_needs_agreement":false,
                        "is_email_valid":true,
                        "is_email_verified":true,
                        "email":"garden@garden.com"
	}
}

이걸로 카카오 로그인 API는 끝입니다~

추가 개발로는 토큰 갱신하기 정도가 되겠는데요.

토큰 갱신을 통해서 자동 로그인을 구현할 수 있겠죠?!

일단 1차적으로 여기서 포스팅 마치도록 하겠습니다~~!

추후에 토큰 갱신까지 추가해서 포스팅 하도록 하겠습니다.

 

도움이 되었다면 다행입니다.