[sociallogin] kakao login구현_android

https://thenicesj.tistory.com/81

소셜로그인 android/ios (naver / kakao / google) in flutter

 

• 당연히 카카오 계정은 존재해야하며 https://pub.dev/packages/kakao_flutter_sdk

kakao_flutter_sdk | Flutter Package

이 사이트를 참조하자

참고로 나는 0.7버전대를 사용하였다.현존하는 0.9버전은 많은 레퍼런스가 없어서 불편했기에...추후에 시간이 나면 바꾸겠다.

 

https://developers.kakao.com/

Kakao Developers

 

이 사이트를 들어가서 api를 위한 앱을 만든다.

• 내 애플리케이션
• 애플리케이션 추가하기
• 앱아이콘과 이름과 사업자 명은 설정
  (잠시 후에 사진에서 설명하겠지만 마음대로 적되 상용화가 목적이면 잘 적어야한다.)

만들고 넘어가면 네이티브키부터 시작해서 4개의 키가 보이는 페이지가 있을것이다.

 

안드로이드와 ios둘다 설정을 해야하는데 먼저 안드로이드를 다룰 것이다.

 

• 다음은 왼쪽 탭에서 플랫폼을 선택하고 안드로이드 선택 후 패키지 명을 작성하면(manifest파일에서 참조) 알아서 마켓 주소도 작성이 된다.
• 그리고 이어서 sha1 키 해시를 등록
  키 해시를 등록하기 위해서는 debug.keystore파일을 찾아야한다.

(릴리즈 버전은 다음에 추가하도록 하겠다.)

디버그 버전으로 다음 명령어를 수행하면 된다.

 

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64 

 

맥에서는 openssl이 설치가 되어있어서 자연스레 가능하지만 윈도우에서는 openssl을 찾을수 없는 에러를 만났었다.

그때는 https://code.google.com/archive/p/openssl-for-windows/downloads 

Google Code Archive - Long-term storage for Google Code Project Hosting.

여기에서 접속해 다운을 받고 경로를 지정해줬는데 여러개의 파일 중에 e버전의 파일을 받아야 한다고 한다.(이유는 아직 나도 잘...)

그래서 결국 저 명령어를 사용하면 해시 문자들이 나오는데 그 문자들을 sha1 값에 넣으면 된다!

(만약 여러명이 공동 작업이라면 그들의 해시값을 엔터 구분으로 다 넣어야함)

 

• 다음은 옆에 탭에서 카카오로그인 누르고 활성화
• 바로 아래 동의항목을 설정
  수집할 항목들을 선택하고 호출하는 법은 좀더 아래쪽의 사진들을 참고 하길 바란다.

android studio로 가서 마저 셋팅 해보자

위에 언급한것 처럼 pubspec은 예전버전으로 일단 셋팅@

kakao_flutter_sdk: ^0.7.1
dio: ^4.0.0
json_annotation: ^4.0.1
shared_preferences: ^2.0.6
platform: ^3.0.0
package_info: ^2.0.0

 

• 다음 kakaoapi사용을 위해서는 minsdk버전이 19 이상이어야하는데 네이버 로그인 포스팅에서는 21로 기억해서 그냥 처음부터 21로 minsdk를 지정한다(bundle)

 

• 다음으로 manifest파일에 글을 추가한다.

저기 스키마에는 kakao+좀전에 카카오앱 만들고 받은 키중에 맨위 네이티브 앱 키를 하나의 string값으로 넣는다.

 

• 다음은 main.dart로 와서 import 하고

 

• void main에 클라이언트 아이디 추가!

그리고 카카오는 네이버와 구글과는 다르게 카카오톡 앱이 설치가 되어있냐 안되어있냐를 판단한다.(네이버도 인가?.. 네이버는 네이버 포스팅 작성에서 얘기해주겠음.)

 

• 그래서 설치가 되어있는지 확인하는 변수를 넣고 init메서드로 설치가 되어있는지 확인해본다.

async랑 await는 아실거라 믿고 설명은 생략.

 

• 다음 body에서 보여준다.
  (카카오와 네이버 사용시에는 이미지 규격이 있다, 그것에 맞춰줘야함. 자세한건 아마 api사이트에 있을것이다.)

• 사진을 이미 받아왔고 설치 되어있을때와 안되어있을때 구분하는 삼항연산자 넣자!
  설치가 되어있으면 어플을 통해서, 설치가 안되어있으면 웹을 통해서 로그인 됨.

각 함수를 살펴보면

이렇게 각자의 일을 수행한다.

• 그리고 저 await _issueAccessToken함수가 결국 kakao랑 통신을 하는 함수인데 가져와보자

총 2장임(0.7버전과 0.8 버전대)

(이건 0.7 버전일때고,, 바로 아래는 0.8 버전일때!))

 

• 그리고 로그아웃 함수까지 구현!

이렇게 까지 하면 로그인 구현이 된다.