[플러터 Flutter] 소셜로그인 카카오톡 1 social login with Kakao 1

Flutter 3.22.2
Dart 3.4.3
DevTools 2.34.3
AndroidStudio 17.0.10 koala
mac 기준으로 작성되었습니다.

들어가기 앞서 카카오톡 플러터 공식문서도 있음 참고 부탁드립니다.
https://developers.kakao.com/docs/latest/ko/flutter/getting-started

Kakao Developers

 

---

 

1. Kakao Developers 설정

 

https://developers.kakao.com/ 로 접속합니다.

Kakao Developers

 

시작하기 -> 애플리케이션 추가하기 -> 내용 입력을 해줍니다.

 

설정 탭의 카카오 로그인과 동의항목(선택)을 설정하여줍니다.

 

카카오 로그인에서 활성화 설정(필수)를 켜줍니다.

그리고 아래로

---

OpenID Connect

OAuth(Open Authorization)2.0을 기반으로 한 인증 프로토콜입니다.
주로 사용자 인증을 위해 사용되며, 사용자가 ID 제공자(IdP)를 통해 인증된 후 클라이언트 애플리케이션이 사용자의 신원을 확인할 수 있게 합니다.

여기서

• 클라이언트 애플리케이션 = 앱
• idP = 카카오

로 이해하시면 됩니다.

1. 앱(클라이언트 애플리케이션)에서 카카오(idP)로 사용자의 인증(로그인)을 요청합니다.
2. 사용자는 카카오(idP)에서 인증(로그인)을 합니다.
3. 카카오(idP)는 인증 코드를 앱(클라이언트 애플리케이션)으로 반환합니다. 이 코드는 보안상 짧은 기간동안만 유효합니다.
4. 앱(클라이언트 애플리케이션)은 받은 인증코드를 사용하여 카카오(idP)에게 ID토큰(액세스,리프레시도 포함될 수 있음)을 요청합니다.
5. 앱(클라이언트 애플리케이션)은 토큰을 검증하여 사용자의 신원을 확인합니다.
6. 로그인 성공

---

Redirection URI

사용자가 ID 제공자를 통해 인증한 후, 인증 결과(토큰)를 클라이언트 애플리케이션에 전달하기 위해 사용되는 URI입니다.
인증이 완료되면 ID 제공자는 이 URI로 리디렉션합니다.

1. 앱(클라이언트 애플리케이션)에서 사용자를 카카오 로그인 페이지로 리디렉션합니다.
2. 사용자는 카카오에서 로그인을 합니다.
3. 로그인 성공후 카카오는 설정된 URI로 사용자를 리디렉션하며 인증 코드를 전달합니다.
4. 앱은 받은 인증코드를 사용하여 카카오 서버로부터 액세스 토큰을 요청합니다.
5. 앱은 액세스 토큰을 사용하여 사용자 정보를 요청합니다.

---

쉽게 생각해보면 토큰을 통해 다른 URI로 전달해줄곳이 있는가 없는가 차이라 생각이 됩니다.

위는 참고하시어 설정하시면 됩니다.

만약 동의항목을 필요로 하신다면

왼쪽의 동의항목 또한 원하시는대로 체크하시면 됩니다.

플랫폼 설정으로 들어가서 안드로이드의 세팅을 우선적으로 하겠습니다.

 

안드로이드 세팅에 들어가면 패키지명과 키해시값이 필수로 들어가게 되는데

패키지명을 얻는 방법은 제 블로그
여기를

키해시를 얻는 방법은 제 블로그
여기를 참고해주시면 감사하겠습니다.

 

참고로 연습하는 단계이니 [필수] 영역을 제외한 나머지 구역은 공란으로 두셔도 괜찮습니다.

이렇게 Android와 iOS 둘다 등록을 완료하였습니다.

 

---

 

2. 안드로이드 스킴설정

카카오 디벨로퍼 플러터 공식문서를 보면

라고 쓰여있는데

카카오 로그인URL 설정부터 하도록 하겠습니다.

android/app/src/main/AndroidManifest.xml 파일을 열어줍니다.

AndroidManifest.xml 파일에 와보면 이러한 식으로 기본적으로 설정 돼 있을텐데 위에 줄쳐진 </activity>가 끝나는 구문 다음에

<!-- 카카오 로그인 커스텀 URL 스킴 설정 -->
    <activity 
        android:name="com.kakao.sdk.flutter.AuthCodeCustomTabsActivity"
        android:exported="true">
        <intent-filter android:label="flutter_web_auth">
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />

            <!-- "kakao${YOUR_NATIVE_APP_KEY}://oauth" 형식의 앱 실행 스킴 설정 -->
            <!-- 카카오 로그인 Redirect URI -->
            <data android:scheme="kakao${YOUR_NATIVE_APP_KEY}" android:host="oauth"/>
        </intent-filter>
    </activity>

이 코드를 붙여넣어 줍니다.
그리고 코드스니펫 내부에 ${YOUR_NAVIVE_APP_KEY}를 넣으라는 곳은

카카오 디벨로퍼즈 페이지내 "앱 키" 라는곳에 "네이티브 앱 키"를 뜻합니다.

참고로 .xml 파일의 <!-- String --> 은 주석이니 굳이 바꾸실 필요 없습니다.

또한 단순 로그인URL 뿐만 아니라 카카오톡 공유, 카카오톡 메시지 커스텀 URL기능을 희망하시는 분은 붙여놓은 코드 바로 아래

<!-- 카카오톡 공유, 카카오톡 메시지 커스텀 URL 스킴 설정 -->
    <activity
        android:name=".MainActivity"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:exported="true"
        android:hardwareAccelerated="true"
        android:launchMode="singleTop"
        android:theme="@style/LaunchTheme"
        android:windowSoftInputMode="adjustResize">
        <!-- 생략 -->

        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />

            <!-- "kakao${YOUR_NATIVE_APP_KEY}://${PRODUCT_NAME}" 형식의 앱 실행 스킴 설정 -->
            <!-- 카카오톡 공유, 카카오톡 메시지 -->
            <data android:host="kakaolink"
                android:scheme="kakao${YOUR_NATIVE_APP_KEY}" />
        </intent-filter>
    </activity>

도 마저 붙여 넣어주시면 됩니다.

붙여넣은 코드

 

그리고 마지막으로

이 구문을 참고해보시면 현재 저희 .xml 파일은

android:exported="true"

로 설정되어있는게 보이실겁니다.

그렇기에

android/app/build.gradle 에 들어가셔서

최소sdk 버전을 API31(android 12) 레벨로 고정시켜주시면 되겠습니다.

참고로
https://www.appbrain.com/stats/top-android-sdk-versions

Android OS version market share over time (Jun 2024)

로 들어가보시면 전세계 현재 API 점유율을 확인해보실 수 있습니다.

 

---

 

3. iOS 스킴 설정

 

• 앱 실행 허용 목록

 

ios/Runner/Info.plist 를 열어줍니다

 

카카오 공식문서에 적혀있는 코드를 가져와서

<key>LSApplicationQueriesSchemes</key>
  <array>
      <!-- 카카오톡으로 로그인 -->
      <string>kakaokompassauth</string>
      <!-- 카카오톡 공유 -->
      <string>kakaolink</string>
      <!-- 카카오톡 채널 -->
      <string>kakaoplus</string>
  </array>

해당 </array>와 </dict> 사이에 추가해줍니다.

Info.plist 파일에서 키-값 쌍의 순서는 중요하지 않으므로, 어디에 넣어도 상관은 없습니다. 그러나 가독성과 유지보수를 위해서 일반적으로 논리적으로 관련된 항목 근처에 추가하는 것이 좋으며,
<dict>내에서는 다른 위치에 추가해도 동작에는 문제가 없습니다.

 

• 커스텀 URL 스킴

 

Xcode를 열어 현재 제가 작업중인 파일의 ios파일을 열어줍니다.

 

그후

Runner 클릭 > Info 클릭 > URL types 클릭을 하시고 + 버튼을 누릅니다.

카카오 공식문서를 읽어보면

URL Schemes 란에 "kakao발급받은 네이티브 앱키" 를 입력하라고합니다.
아까 전에 Androidmanifest.xml에서 사용했던 네이티브앱키를 그대로 가져와

이러한 식으로 URL Schemes에 입력하여 줍니다.

---

 

4. Flutter SDK 설치

 

pubscpec.yaml 파일에 의존성을 설정하기 위해서는

 

플러터 터미널에서

$ flutter pub add kakao_flutter_sdk

를 입력해주면 전체 패키지를 추가할수 있습니다.

그리고 터미널에 flutter pub add kakao_flutter_sdk_user 이런식으로도 원하는 SDK만 받을수도 있습니다.

 

$ flutter pub get

터미널에 flutter pub get을 사용하여 추가한 Flutter SDK의 패키지를 설치할 수 있습니다.

 

---

앱 초기화시 설정

카카오 디벨로퍼 공식문서를 차용해보면 현재 제가 작성하고 있는글은 웹을 포함하지 않기 때문에

• 네이티브 앱만 서비스
  • 네이티브 앱 키를 사용해 모든 카카오 API 호출
  • init() 호출 시 nativeAppKey 파라미터로 네이티브 앱 키 전달

를 해보도록 하겠습니다.

main함수 내부에

WidgetsFlutterBinding.ensureInitialized();

KakaoSdk.init(nativeAppKey: '${YOUR_NATIVE_APP_KEY}');

를 입력해주면

KakaoSdk에 import 오류가 생길텐데

import 'package:kakao_flutter_sdk/kakao_flutter_sdk.dart';
import 'package:kakao_flutter_sdk/kakao_flutter_sdk_common.dart';
// 둘중 하나 아무거나 상관없음

임포트는 sdk와 sdk_common 둘중 하나를 선택하시면 됩니다.
kakao_flutter_sdk 패키지를 사용하면 kakao_flutter_sdk_common의 기능도 포함되어 있으므로, 별도로 kakao_flutter_sdk_common을 추가할 필요는 없습니다. kakao_flutter_sdk 패키지를 사용하면 Kakao SDK의 모든 기능을 사용할 수 있습니다.

이러한식으로 페이지가 돼있다면 카카오톡 로그인 서비스를 이용할 준비가 완료되었습니다.