[Flutter] [Firbase] 간편 로그인 구현하기(kakao💬)

개인 프로젝트의 기획에는 간편 로그인 기능이 있다.

일단 Firebase 프로젝트는 생성하였다고 가정하에 진행한다.

카카오 로그인과 애플 로그인 기능이 있는데 Firebase를 이용하여 간편 로그인을 구현할 것 이기에 오늘은 Firebase와 kakao 설정부터 알아보자.

Kakao 프로젝트 생성

일단 카카오 간편 로그인을 하려면 Kakao developers에서 애플리케이션을 추가해야 한다.

들어가서 추가해주자. 나는 “풀밭”이란 프로젝트를 추가했다.

내 애플리케이션 > 앱 설정 > 플랫폼에서 안드로이드는 패키지명과 키 해시를 추가해주고 iOS는 번들ID를 지정해주면 된다.

키 해시는 인증서값으로 악성앱인지 판별하는데 사용 된다. 그리고 패키지명과 번들 ID는 프로젝트내에서 같은 값을 지정해줘야 한다.

안드로이드 플랫폼 등록

플랫폼

[내 애플리케이션] > [플랫폼]에서 Android 앱 정보를 입력합니다. 자세한 안내는 플랫폼 등록을 참고합니다.

키 해시

키 해시(Key Hash)란 인증서(Certificate)의 인증서 지문 값(Certificate fingerprints)을 해시(hash)한 값으로, 악성 앱인지 판별하는 데 사용됩니다. 카카오 API를 호출하면 카카오 API 서버가 요청 헤더에 추가된 키 해시값과 카카오 플랫폼에 등록한 값이 일치하는지 확인합니다. 키 해시는 디버그 키 해시(Debug key hash)와 릴리즈 키 해시(Release key hash) 두 가지가 있습니다.

• 디버그 키 해시: 프로젝트를 처음 생성하거나 디버그할 때, 안드로이드 스튜디오에서 개발 환경에 맞게 자동으로 생성되는 디버그 인증서에서 해시(hash)한 값
• 릴리즈 키 해시: 앱 스토어에 앱을 배포하기 위해 생성한 릴리즈 인증서로부터 해시한 값

키 해시 생성하는 방법

Android 시작하기 문서를 보면 운영체제에 따라 명령어를 입력하고 키 해시를 확인하여 플랫폼 등록에 넣어주면 된다.

인터넷 사용 권한

시작하기 문서에 보면 인터넷 사용 권한을 해줘야 하는데 글을 봐보자.

카카오 API를 통해 카카오 서버와 통신하기 위해 앱에 인터넷 사용 권한을 설정해야 합니다. AndroidManifest.xml에 다음과 같이 인터넷 사용 권한을 설정합니다.

이 설정은 카카오 API를 통한 HTTP 요청이 올바르게 완료되도록 해 줍니다.

마찬가지로 설명이 잘 나와있으니 아래 코드를 AndroidMainfest.xml에 넣어주자.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.sample">
 
    <!-- 인터넷 사용 권한 설정-->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
    android:allowBackup="true"a
        android:icon="@mipmap/ic_launcher"
    ...

 

Java 8 사용

또한 Java 8 사용을 위해 아래 설정을 build.gradle.kts(Module) 파일에 추가합니다. 자세한 내용은 Android 개발자 사이트 공식 가이드를 참고합니다.

// Java 8 사용을 위한 build.gradle.kts 설정
android {

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }
}

iOS 설정

iOS도 따로 설정을 해줘야 하는데 공식문서를 보면 info.plist에 추가해야한다.

그래서 아래 코드를 넣어주는데 kakao와 붙여 앱키를 넣어주어야한다.

	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>kakaokompassauth</string>
		<string>kakaolink</string>
		<string>kakaoplus</string>
	</array>
	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>kakao${앱키}</string>
			</array>
		</dict>
	</array>

Flutter 설정

마찬가지로 플러터 설정도 해줘야 하는데 안드로이드 부터 해보자.

Flutter 프로젝트의 [${Project}] > [android] > [app] > [src] 경로 내부의 AndroidManifest.xml 파일을 수정하여 아래 처럼 넣어주면 된다.

<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>

iOS는 Runner.xcodeproj를 시작하여 확인해주면 되는데 Targets(Runner) - Info - Custom iOS Target Properties에서 kakaokompassauth, kakaolink, kakaoplus를 확인 해주면 된다.

또 URL Types에 URL Schemes가 잘 들어갔는지 확인하면 된다.

이제 설정을 다 해주었다면 내 애플리케이션 > 제품 설정 > 카카오 로그인에서 아래 이미지처럼 카카오 로그인을 활성화를 해야 한다.

프로젝트에 kakao SDK 설치

설정은 끝났으니 코드에서 이제 로그인을 구현해주자.

카카오 디벨로퍼 시작하기에 보면 로그인에 필요한 SDK를 알려준다.

kakao_flutter_sdk_user: ^1.9.5 # 카카오 로그인 API 패키지

나는 카카오 로그인만 이용을 할 것이기에 위에 카카오 로그인 API 패키지만 필요하다.

초기화 하기

마찬가지로 시작하기 문서를 보면 초기화가 필요하다고 작성되어 있다.

자세한 건 시작하기 문서를 보고 설정해주면 된다.

import 'package:kakao_flutter_sdk_common/kakao_flutter_sdk_common.dart';

void main() {
    ...
    // 웹 환경에서 카카오 로그인을 정상적으로 완료하려면 runApp() 호출 전 아래 메서드 호출 필요
    WidgetsFlutterBinding.ensureInitialized();

    // runApp() 호출 전 Flutter SDK 초기화
    KakaoSdk.init(
        nativeAppKey: '${YOUR_NATIVE_APP_KEY}',
        javaScriptAppKey: '${YOUR_JAVASCRIPT_APP_KEY}',
    );
    runApp(MyApp());
    ...
}

위 코드에서는 네이티브 앱 키와 자바스크립트 앱 키가 필요한데 확인은 내 애플리케이션 > 앱 설정 > 앱 키에서 확인이 가능하다.

카카오 로그인 구현

공식문서에서 로그인하기 코드를 가져와서 넣어보겠다.

그리고 로그인을 성공하였을때 Home으로 이동하게 했다.

                signInButton(
                    onPressed: () async {
                      // 카카오 로그인 구현 예제
                      if (await isKakaoTalkInstalled()) {
                        try {
                          await UserApi.instance.loginWithKakaoTalk();
                          print('카카오톡으로 로그인 성공');
                        } catch (error) {
                          print('카카오톡으로 로그인 실패 $error');

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

결과를 보면 아래처럼 로그인이 되고 home으로 이동되는 것을 확인할 수 있다.

Simulator에는 카카오 앱이 없으니 웹으로 로그인을 진행하였다.

Firebase Auth 연동

이제 카카오 로그인은 구현했으니 Firebase Auth와 연동 시켜주자.

아래는 예전 SwiftUI로 개발했던 프로젝트의 Authentication 화면 모습이다.

제공업체가 Apple이랑 Google이 있는데 Apple 간편 로그인과 Google 간편 로그인을 이용하여 Firebase Auth에 등록을 해주었다.

하지만 우리는 kakao를 통하여 Firebase Auth에 등록을 해주어야 하는데 문제는 Authentication - 로그인 방법 - 새 제공업체 추가 를 누르게 된다면 Apple과 Google은 있지만 kakao는 따로 존재하지 않는다..🥲

그러면 카카오를 통한 인증은 불가한 것인가? 그렇지 않다. 커스텀 제공업체인 OpenID Connect로 구현할 수 있다.

OpenID Connect를 선택하면 아래 처럼 화면이 나오게 된다.

이름에는 kakao이니깐 kakao를 넣어줬고

클라이언트 ID는 네이티브 앱키

발급자는 https://kauth.kakao.com

클라이언트 보안 비밀번호는 내 애플리케이션>제품 설정>카카오 로그인>보안에서 코드를 넣어주면 된다.

코드로 구현하기

이제 아래 카카오 로그인 버튼을 눌렀을 때 아래 코드를 실행하게 만들었다.

kakao 간편로그인을 하면 식별자값이 들어가지 않아 유저의 닉네임과 식별값을 같이 넣어주기 위해 UserCredential를 updateProfile 하였다.

      var provider = OAuthProvider("oidc.kakao");

      try {
        OAuthToken? token;
        if (await isKakaoTalkInstalled()) {
          // Use KakaoTalk if installed
          token = await UserApi.instance.loginWithKakaoTalk();
        } else {
          // Use Kakao Account login if KakaoTalk not installed
          token = await UserApi.instance.loginWithKakaoAccount();
        }

        var credential = provider.credential(
          idToken: token.idToken,
          accessToken: token.accessToken, // 카카오 로그인에서 발급된 accessToken
        );

        // Sign in with the credential
        UserCredential userCredential = await FirebaseAuth.instance.signInWithCredential(credential);

        var user = await UserApi.instance.me();
        await userCredential.user?.updateProfile(displayName: "${user.id}${user.kakaoAccount?.profile?.nickname}");

      } on

그러면 카카오 로그인을 실행해보면?? Firebase Authentication에 들어오는 것을 확인할 수 있다.🤩