[Flutter] 카카오 로그인 ios

카카오를 통해 로그인을 하고자 한다.

https://pub.dev/packages/kakao_flutter_sdk

카카오에서 공식적으로 관리하는 SDK를 이용해보자!

🌈 kakao_flutter_sdk 플러그인을 설치

flutter 프로젝트에서 pubspec.yaml 파일에서 설치한다.

dependencies:
  flutter:
    sdk: flutter
    
  cupertino_icons: ^0.1.3
  dio: ^3.0.9
  json_annotation: ^3.0.1
  package_info: ^0.4.0+18
  platform: ^2.2.1
  shared_preferences: ^0.5.7+2
  kakao_flutter_sdk: ^0.4.2

kakao_flutter_sdk에는 종속성이 걸려있는데,
1. dio
2. json_annotation
3. package_info
4. platform
5. shared_preferences
모두 다운 받아야한다.

flutter pub get 명령어를 이용해 설치한다.

❌kakao_flutter_sdk는 플랫폼 11.0에서 지원한다. 따라서 9.0인 것을 11.0으로 수정해야한다.

FlutterProject > ios > Podfile 에서 11.0으로 수정한 후,

terminal에서 pod install로 다시 재설치 해야한다. "터미널의 위치는 ios"

🌈 내 어플리케이션 추가

https://developers.kakao.com/

1)⭐️ 카카오 개발자 페이지에서 내 어플리케이션을 추가한다.

• 내 애플리케이션 클릭
  

• 애플리케이션 추가하기 클릭
  

새로운 애플리케이션을 생성하게 되면, 해당 애플리케이션에 대한

• 네이티브 앱 키
• REST API 키
• JavaScript 키
• Admin 키
  를 발급받게 된다.

절대 노출되어서는 안되는 키들이다.

• 왼쪽 네비게이션바에서 플랫폼을 선택한 후, ios플랫폼 등록을 클릭한다.
  

2)⭐️ Bundle ID 추가

번들 ID가 있는 곳은 Xcode에서 확인할 수 있다.

flutterProject 안에 ios파일이 있는데 ios파일을 Xcode로 실행한다.

• 해당 번호를 따라 들어가면 Bundle Identifier 이라는 것이 있다. 이것이 번들ID이다.
  

• BundleID를 넣고 저장을 누른다.
  

3)⭐️ 카카오 로그인 동의항목 설정

• 카카오로그인 > 동의항목 클릭 후, 프로필정보를 포함한 나머지 설정들을 사용함으로 바꿔준다.
  
  ※ 동의목적은 아무렇게나 적으면된다.

• 카카오로그인을 클릭하여 활성화 설정을 ON으로 바꿔준다.
  

🌈 SDK 초기화

main.dart파일 안에 네이티브앱 키와 JavaScript키 를 넣는다.

void main() {
  KakaoContext.clientId = "카카오 네이티브앱 키";
  KakaoContext.javascriptClientId = "카카오 Javascript키";
  runApp(MyApp());
}

✓ 앱이 처음 시작하는 부분에 삽입해주어야한다.

얻고자 하는 정보들의 코드는 flutter_kakao_sdk에 잘 나와있다.

❌ xcode에서 KAKAO_APP_KEY 설정

1. Xcode로 실행한 후,
   Runner > Info > URL Types 에서 URL Schemes에다가 'kakao네이티브앱키' 를 넣는다.
   

2. Runner > Runner > Info.plist > + > KAKAO_APP_KEY 를 추가한 후, 네이티브앱 키를 넣어준다.
   

👍🏻Finally!