[Flutter] 카카오 로그인 설정

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-flutter

Flutter에서 카카오 로그인을 사용하려면 pacakge를 추가해야 합니다.

 

pubspec.lock

kakao_flutter_sdk_user: ^1.0.0

 

미리 Android, IOS 플랫폼도 등록해야 한다고 합니다.

 

Android

키 등록을 하려면 jks 파일을 만들어야 하는데, cmd 창에서 다음 명령어를 이용합니다.

 

keytool -genkey -v -keystore keystore경로\keystore.jks -alias [alias 이름] -keyalg [암호화방식, RSA 입력] -keysize [key 크기, 2048] -validity [유효기간, 20000]
ex: keytool -genkey -v -keystore D:\@@@\android\app\keystoretest.jks -alias test -keyalg RSA -keysize 2048 -validity 20000

 

* 생성이 불가능한 경우, jdk / openssl 설치후 환경변수를 잡아야 한다.

https://growth-coder.tistory.com/171

 

이렇게 하면 Android의 app폴더에 jks파일이 생성이 되고 Android 폴더에 key.properties파일을 만들어서 다음과 같이 처리합니다. 

storePassword=
keyPassword=
keyAlias=
storeFile=keystore.jks

 

키스토어 파일을 만들 때 사용했던 password와 alias를 설정해주시고 app.gradle에서 이렇게 사용합니다.

// Create a variable called keystorePropertiesFile, and initialize it to your 삭제 예정
// key.properties file, in the rootProject folder.
def keystorePropertiesFile = rootProject.file("key.properties")

// Initialize a new Properties() object called keystoreProperties.
def keystoreProperties = new Properties()

// Load your keystore.properties file into the keystoreProperties object.
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

android {
    signingConfigs {
        config {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
    }
    
        buildTypes {
        release {
            signingConfig signingConfigs.config // 여기도 추가
        }

        debug {
            signingConfig signingConfigs.config // 여기도 추가
        }
    }
    
    ...
  }

app.gradle에서 직접 키를 입력하지 않아도 가능하니 보안적으로 더 좋습니다.

주의: 위에서 만든 jks파일과 key.properties파일은 public 저장소에 올리지 않으시는 것을 권장합니다.

 

이렇게 만든 jks 파일을 토대로 debug키와 release키를 뽑아야 합니다.

How to get release hash key with openssl

openssl link: https://code.google.com/archive/p/openssl-for-windows/downloads

1. oepnssl 압축 풀고 bin 폴더 경로 복사
2. cmd, cd bin 폴더 경로로 이동
3. keytool -exportcert -alias [AliasKey] -keystore keystore경로\keystore.jks | openssl sha1 -binary | openssl base64 입력
4. 키 저장소 비밀번호 입력 후 releaseKey를 얻음.

How to get debug hash key with openssl

keytool -exportcert -alias aliaskey -keystore %USERPROFILE%.android\debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

 

이렇게 얻은 키를 Android 해시키 부분에 등록해 줍니다.

IOS

IOS의 경우에는 도큐먼트에는 Xcode를 쓰라고 나와있지만 윈도우 기준에서 설명합니다.

IOS폴더 Runner에 info.plist 파일에서 패키지명을 확인하실 수 있습니다.
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
PRODUCT_BUNDLE_IDENTIFIER 검색하면 나와요.

앱에 대한 부분은 나중에 출시된 이후에 변경할 수 있다고 하니 적당히 써줍니다. 

 

이렇게 모바일 플랫폼 등록을 마쳤습니다.

 

네이티브 키 초기화

[내 어플리케이션] > [앱 키]를 통해 Native키를 알 수 있습니다.

 

 

1. main에서 kakaoSDK 초기화(main.dart)

nativeAppKey: "@@@@"

import 'package:kakao_flutter_sdk_common/kakao_flutter_sdk_common.dart';

void main() {
    ...
    KakaoSdk.init(nativeAppKey: '${YOUR_NATIVE_APP_KEY}');
    runApp(MyApp());
    ...
}

 

2. 안드로이드 app/src/AndroidManifest.xml

application하위 activity를 만들어 다음과 같이 처리합니다. 

kakao@@@@

<activity android:name="com.kakao.sdk.flutter.AuthCodeCustomTabsActivity">
    <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" />

        <!-- Redirect URI, "kakao${YOUR_NATIVE_APP_KEY}://oauth" 형식 -->
        <data android:scheme="kakao${YOUR_NATIVE_APP_KEY}" android:host="oauth"/>
    </intent-filter>
</activity>

 

3. IOS

3-1. 앱 실행 허용 목록 설정하기

• ${Project} > ios 폴더를 우클릭하여 Xcode에서 프로젝트를 열고 설정
• 설정 경로: [TARGET] > [Info] > [Custom iOS Target Properties]
• 파일을 직접 수정하여 설정 시, Info.plist 파일 경로: ${Project} > ios > Runner > Info.plist

 <key>LSApplicationQueriesSchemes</key>
  <array>
      <!-- 카카오톡으로 로그인 -->
      <string>kakaokompassauth</string>
      <!-- 카카오링크 -->
      <string>kakaolink</string>
  </array>

3-2. URL Schemes 설정하기

<string>kakao###</string> 추가

 

카카오 로그인 활성화

 

밑에 동의 항목을 클릭하면 카카오 로그인을 통해서 유저로부터 받을 수 있는 정보에 대한 설정을 할 수 있는데,

특정 정보를 반드시 요구를 할 것인지, 선택적으로 동의하도록 할 것인지 설정할 수 있습니다. 

일부 항목에 대해서는 비즈니스 어플로 가입이 되거나 필수로 요구하는 이유를 승인 받아야 이용할 수 있습니다. 

 

비즈니스 계정 등록(기본적인 동의만 사용하는 경우 Pass하세요)

저희 서비스에서는 이메일이 필수적으로 필요하여 비즈니스 계정을 등록하겠습니다. 

미리 카카오비즈 계정을 받은 상태였고 사업자 등록 번호를 입력하니 바로 연결이 되네요.

 

이메일에 대한 정보는 반드시 로그인할 때 받아야 해서 비즈 계정을 신청했고

동의 항목에서 이메일 정보를 수정해줍니다.

동의 화면이 이렇게 나온다고 하네요

 

사용 예시

https://developers.kakao.com/docs/latest/ko/kakaologin/flutter