[Firebase] HashKey(해쉬키), Keystore 생성하기 (카카오로그인에 필요한 Android Debug & Release KeyStore, Firebase Social Login)

들어가며

  플러터 개발을 하면서 제일 복잡한 부분이 Google Play Store / App Store 배포 및 Social Login을 위한 Device 관련 환경설정이 아닐까 합니다.

 

  잠시 App Store 심사 썰을 풀어드리면... 우선 iOS 앱을 개발하기 위해서는 애플 개발자 계정이 필요한데, 연 100$를 지불해야 합니다. (진입장벽 1) 또한, 각종 기기(iPhone, iPad 등) 사이즈별로 스크린샷을 등록해야 하는데요, iPad의 경우에는 12.9인치 크기의 2세대, 3세대 Pro 모델을, 그리고 iPhone의 경우에는 5.5인치, 6.5인치 크기의 모델에서 찍은 스크린샷을 등록해줘야 합니다.

 

  마지막으로 소셜로그인 기능이 존재하는 Application이라면 애플로그인을 필수로 구현해야 합니다. 안그러면 앱 심사 단계에서 반려당합니다. 그 외에도 신고/차단 기능, 탈퇴 기능이 있는지도 철저히 조사합니다. ^^...)

 

---

본론

파이어베이스를 이용한 소셜로그인 (Social Login with Firebase)

 

 

  Firebase를 사용한다면 Google, Apple, Facebook, GitHub 등 전세계적으로 유명한 SSO 기능은 손쉽게 구현할 수 있습니다. 하지만 대한민국에 살고있는 개발자인 우리는 '카카오'와 '네이버'를 소셜로그인 후보에서 빼놓을 수가 없습니다.

 

반응형

 

  아래처럼 Kakao developrs에 접속 후 내 애플리케이션으로 등록한 뒤, 플랫폼 > Android > 키 해시 부분이 핵심입니다. 여기에 SHA-1 지문을 통해 추출한 키 해시를 등록해줘야 디버그 또는 릴리즈 버전에서 카카오 로그인이 잘 동작하게 됩니다.

 

 

  Google Play Console에 어플리케이션을 등록하는 방법은 2021.09.04 - [웹 & 앱 개발/Frontend 개발] - [Android] Google App Console에 어플리케이션 등록하기 (구글 앱) 을 참고하면 됩니다. SHA-1 및 SHA-256 인증서는 Google Play Console > 설정 > 앱 무결성 > 앱 서명 에서 복사/붙여넣기 가능합니다.

 

  Debug key의 경우에는 Android Studio > Build > Generate Signed Bundle/APK 로 들어가 keyStore를 만들어주는 방식입니다. 그러나 아래와 같이 Android Studio를 통해 Project를 열어보아도 Build 탭 내부에 Generate Singed Bungle/APK를 찾지 못할 수도 있습니다.

 

  이런 경우에는 android/app/build.gradle 파일을 Tools > Flutter > Open for Editing in Android Studio 를 통해 열어주는 것으로 해결할 수 있습니다. 

 

  New Window에서 열어본 android - build.gradle의 상단 Build에는 그토록 찾던 Generate Signed Bundle/APK 선택지가 존재하기 때문입니다. 이제 우리는 Key store path, Password, Password Confirm, 그리고 Alias를 적절히 적어주어 KeyStore 파일을 다운로드 받습니다. (절대 분실하지 않도록 조심합시다.)

 

keytool -exportcert -alias androiddebugkey -keystore ~/cusmerce-keystore.jks | openssl sha1 -binary | openssl base64

이제 이 Release Hash Key를 Debug Hash key와 마찬가지로 카카오 개발자 플랫폼의 키 해시에 넣어주면 된다!

 

 

  마지막으로 android/app/src/main/AndroidManifest.xml 파일에 아래처럼 커스텀 설정이 필요합니다.

AndroidManifest.xml에하 scheme 등록을 하는 것인데, 아래 activity 전체를 복사해서 붙여넣고 data tag의 android:scheme attribute 만 kakao${native_app_key} 형태로 사용하시면 됩니다. 카카오톡으로 로그인 하는 경우에는 Actvitity#onActivityResult()를 통하여 값을 받아오지만, default browser로 로그인을 하는 경우에는 custom scheme 을 통하여 로그인 값을 전달받기 때문에 위의 등록 과정이 필요합니다.

(참고 : https://github.com/kakao/kakao_flutter_sdk/issues/21)

 

<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" />
         <data android:scheme="kakao3zerb239asdfhzxcvasdf47c7135dd2" android:host="oauth"/>
     </intent-filter>
 </activity>

 

* 유사하게 iOS를 위해서도 ios/Runner/Info.plist 파일에 아래처럼 적어줘야 합니다. (이건 나중에 더 자세히 다룰 것...)

 

<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>kakao3234dfjlwdaasdf12a647c123875dd2</string>
        </array>
    </dict>
    ...
</array>

 

 

참고

- https://dev-donghwan.tistory.com/79

- https://velog.io/@gwd0311/Flutter-KeyStore파일-설정하기

- https://github.com/kakao/kakao_flutter_sdk/issues/21

 

 

---

[안드로이드/Android] scrcpy로 안드로이드 스마트폰 화면 컴퓨터에 미러링하기 (Mac OS 기준)

[Android] Google App Console에 어플리케이션 등록하기 (구글 앱)