[플러터 개발] 카카오톡 로그인 구현하기

오늘은 카카오톡 로그인을 구현하기 위한 준비를 해볼게요.

kakao developers 회원가입

일단 kakao developers에 들어가서 회원가입 및 로그인 해주세요.

https://developers.kakao.com/

Kakao Developers

 

kakao developers에서 앱 추가

 

'내 어플리케이션'에 들어가셔서 애플리케이션 추가하기를 눌러주세요!

그럼 위 그림처럼 앱 정보를 작성하는 화면이 나옵니다.

잘 작성하시고 저장을 누르시면 돼요!

 

kakao developers 플랫폼 설정

우선, 플랫폼 설정을 해볼거에요!

'요약 정보' 안에 있는 플랫폼 칸에서 '플랫폼 설정하기'를 눌러주세요.

아래 화면이 보이시면 성공입니다. 이제 원하시는 플랫폼 설정을 해주시면 되는데요.

 

Android, iOS 플랫폼 등록

# Android SHA 키 해시 확인하는 방법은 아래 링크로 들어가시면 작성해놨어요!

https://quokka-story.tistory.com/26

 

pubspec.yaml 파일에 카카오 SDK 추가하기

안드로이드 스튜디오 terminal에서 아래 코드를 작성해줍니다.

flutter pub add kakao_flutter_sdk

그럼 SDK 설치가 완료됩니다! 간단하죠?

플랫폼 정보 등록

카카오 로그인을 쓰려면 Android, iOS 플랫폼 정보 등록 필요합니다.

플랫폼 정보 등록을 해볼게요.

 

# 등록하기 전에!

먼저 알아야 할 것이 있습니다. 앱 키를 추가하실때는 kakao${키 코드} 인데요.

예를 들어 네이티브 앱 키가 'abcd1234'라고 치면

kakaoabcd1234 라고 작성하시면 됩니다.

 

iOS

Info.plist 코드 추가

<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>kakaokompassauth</string>
		<string>kakaolink</string>
	</array>

URL Types 추가

Android

<application>

    <!-- 카카오 로그인 커스텀 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>

    <!-- 카카오톡 공유, 카카오톡 메시지, 카카오스토리 커스텀 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}" />
            <!-- 카카오스토리 -->
            <data android:host="kakaostory"
                android:scheme="kakao${YOUR_NATIVE_APP_KEY}" />
        </intent-filter>
    </activity>
</application>

main.dart

WidgetsFlutterBinding.ensureInitialized();
  // runApp() 호출 전 Flutter SDK 초기화
  KakaoSdk.init(
    nativeAppKey: '--------------------------------',
    javaScriptAppKey: '------------------------------',
  );
  runApp(const MyApp());
}

 

카카오톡 로그인 화면 구현

카카오톡 로그인 버튼에 대한 이미지 가 필요하신 분은 아래 링크로 들어가시면 버튼에 대한 이미지를 얻으실 수 있습니다.

https://developers.kakao.com/tool/resource/login

Kakao Developers

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(email!),
          InkWell(
            onTap: () async {
              kakaoLogin();
            },
            child: Image(
              image: AssetImage('assets/images/kakao_login_medium_wide.png'),
            ),
          ),
        ],
      )),
    );
  }

Future kakaoLogin() async {
    // 카카오톡 실행 가능 여부 확인
    // 카카오톡 실행이 가능하면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
    if (await isKakaoTalkInstalled()) {
      try {
        await UserApi.instance.loginWithKakaoTalk();
        print('카카오톡으로 로그인 성공');
        User? user = await UserApi.instance.me();
        setState(() {
          email = user.kakaoAccount?.email;
        });
      } catch (error) {
        print('카카오톡으로 로그인 실패 $error');

        // 사용자가 카카오톡 설치 후 디바이스 권한 요청 화면에서 로그인을 취소한 경우,
        // 의도적인 로그인 취소로 보고 카카오계정으로 로그인 시도 없이 로그인 취소로 처리 (예: 뒤로 가기)
        if (error is PlatformException && error.code == 'CANCELED') {
          return;
        }
        // 카카오톡에 연결된 카카오계정이 없는 경우, 카카오계정으로 로그인
        try {
          await UserApi.instance.loginWithKakaoAccount();
          print('카카오계정으로 로그인 성공');
          User? user = await UserApi.instance.me();
          setState(() {
            email = user.kakaoAccount?.email;
          });
        } catch (error) {
          print('카카오계정으로 로그인 실패 $error');
        }
      }
    } else {
      try {
        await UserApi.instance.loginWithKakaoAccount();
        print('카카오계정으로 로그인 성공');
        User? user = await UserApi.instance.me();
        setState(() {
          email = user.kakaoAccount?.email;
        });
      } catch (error) {
        print('카카오계정으로 로그인 실패 $error');
      }
    }
  }

구현 화면

정상적으로 로그인되어 이메일이 뜨는 걸 확인하실 수 있습니다.

 

오늘은 카카오톡 로그인을 구현하는 방법을 알아봤습니다!

 

다음에도 좋은 정보를 가져오겠습니다!