[Flutter] 소셜 로그인 구현 (카카오톡)

필요한 링크들을 모아두었다.

- 카카오 로그인 API 공식 문서

https://developers.kakao.com/docs/latest/ko/kakaologin/flutter

Kakao Developers

웹은 빼고 개발 중이었으니 빨간 박스 친 부분만 참고해 구현하였다.

 

✓ 패키지 의존성 설치

는 쉬우니 스킵.

 

✓ 커스텀 URL 스킴 설정 방법

해당 설정을 해두면 사용자가 Android와 iOS 환경에서 카카오톡으로 로그인 후 서비스 앱으로 돌아오거나, 카카오톡 메시지 버튼 또는 링크로 서비스의 앱을 실행할 수 있다.

https://developers.kakao.com/docs/latest/ko/flutter/getting-started#project-scheme

Kakao Developers

 

✓ 트러블 슈팅

앱 등록 & API 코드 삽입 후 실행하는데 다음과 같은 에러가 발생했다.

error: misconfigured, error_description: invalid android_key_hash or ios_bundle_id or web_site_url

 

알고보니 카카오 디벨로퍼스 홈페이지 '내 애플리케이션 > 앱 설정 > 플랫폼' 에서 플랫폼별로 키를 등록해주어야 하는데

이를 등록하지 않아서 생기는 문제였다.

print(await KakaoSdk.origin);

위 코드를 본인 코드 아무데나 집어넣어서 출력되는 키 해시값을 플랫폼 등록할때 넣어주면 된다.

 

 

 

(개발 완료 후 내용 추가 예정)

 

 

 

- API 키 숨기는 법

나처럼 카카오 로그인 구현하시는 분의 블로그를 찾았다.

https://monosandalos.tistory.com/75

[Flutter] .env를 통해 API Key 안전하게 사용(AndroidManifest.xml에서의 사용 포함 / 환경변수 설정)

✓  트러블슈팅

위 블로그를 그대로 따라하고 실행하는데 다음과 같은 에러가 발생하였다.

Attribute application@name at AndroidManifest.xml:4:9-42 requires a placeholder substitution but no value for <applicationName> is provided.

manifestPlaceholders = [KAKAO_NATIVE_APP_KEY: kakaoKey]  // X

manifestPlaceholders += [KAKAO_NATIVE_APP_KEY: kakaoKey] // O

manifestPlaceholders 를 설정해주는 라인에서 '= '이 아니라 '+=' 으로 해주어야 제대로 동작한다.

 

- OAuth 2.0

당장 필요하진 않지만 웹 방식으로 로그인할 경우 필요한 리다이렉션 URL에 대해 잘 몰라서 알아보던 중 알게 되었는데 내용이 상당히 좋다.

https://hudi.blog/oauth-2.0/

OAuth 2.0 개념과 동작원리