Skip to content

flutter 소셜 로그인 구현 - 카카오 #

Find similar titles

2회 업데이트 됨.

Edit

Structured data

Category
Programming

플러터(Flutter) #

플러터란 #

카카오 소셜 구현 #

  1. 소셜 로그인 기능이란
  2. 소셜 로그인 구현시 주의사항
  3. 카카오 개발자 계정 등록
  4. 플러터 소셜 로그인 세팅
  5. 정리

카카오 소셜 구현 #

소셜 로그인 기능이란? #

소셜 로그인은 간단한 클릭으로 회원가입부터 로그인까지 모두 all-in-one으로 할 수 있는 기능이다. 앱뿐만 아니라 웹까지 요즘 모든 서비스에서 사용하는 로그인 기능이다. 오늘은 플러터에서 대표적 소셜 로그인인 카카오 소셜 로그인 기능을 추가하는 방법을 살펴볼 예정이다.(서버 연동 전, 클라이언트에서)

소셜 로그인 구현시 주의사항 #

소셜 로그인에서 가장 중요한 사항은 '애플 소셜 로그인 추가'이다. IOS 측에서 네이버, 카카오와 같은 소셜로그인을 사용하려면 필수적으로 애플 로그인 기능도 추가해야 한다고 말한다. 이는 심사 거절 사유이며 앱 출시 전에 애플 로그인도 추가하는 것을 추천한다.
다른 필수 사항으로는 애플 개발자 유로 멤버십을 가입해야 하고(어차피 앱스토어에 출시하려면 가입해야 한다.) 회원 정보를 저장할 수 있는 서버, 안드로이드 SDK 28 이상, IOS deployment Target 11 이상, gradle-wrapper.properties(android/gradle.wrapper/gradle-wrapper.properties) 5.6.4 이상이 있다.

카카오 개발자 계정 등록 #

Image

  • 애플리케이션 추가하기를 클릭한다.
  • 애플리케이션 등록을 마치면 앱 설정 -> 요약정보에 아래와 같은 화면이 나온다. 여기서 네이티브 앱 키를 복사한다.

Image

  • 카카오 로그인 -> 동의 항목에서 로그인 후 카카오에서 받아올 정보를 지정한다.

Image

플러터 소셜 로그인 세팅 #

Image

  • android/build_gradle에서 targetsdk, compilesdk를 28 이상, 안드로이드 스튜디오에 설정된 sdk 버전으로 설정한다.

Image

  • Xcode에 들어가서 Pods의 Deployment Info에서 타겟을 11 이상으로 설정한다.

Image

  • 패키지의 android/gradle/wrapper/gradle-wrapper.properties에 들어간다. (없으면 경로를 생성한다)
  • distributionUrl=dists/gradle-6.7.1-all.zip 혹은 distributionUrl = "https\://services.gradle.org/distributions/gradle-6.7.1-all.zip” 을 넣는다. 전자는 직접 gradle 파일을 앱 패키지에 넣는 방식이고 후자는 URL을 통해 내려받는 방식이다. 전자를 사용하려면 android/gradle/wrapper/에 dist 폴더를 만들 아래 파일을 내려받아 넣는다.

https://imghub.insilicogen.com/media/files/gradle-6.7.1-all.zip

  • android/app/proguard-kakao.pro 생성한다. 그리고 아래 코드를 작성한다.

# kakao login
-keep class com.kakao.sdk.**.model.* { <fields>; }
-keep class * extends com.google.gson.TypeAdapter

  • android/app/build.gradle에 아래 코드를 넣는다.

buildTypes {
release {
    ...
    proguardFiles 'proguard-kakao.pro'
}
}

Image

  • AndroidManifest.xml에 아까 카카오 앱 개발자 웹페이지에서 저장해둔 네이티브앱 키를 입력한다.

<activity android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <!-- Redirect URI: "kakao{NATIVE_APP_KEY}://oauth“ -->
        <data android:host="oauth"
            android:scheme="kakao0123456789abcdefghijklmn" />
    </intent-filter>
</activity>

  • 아래 코드를 Info.plist에 추가한다. 해당 앱 키는 고유해야 하며 필수적으로 입력해야 하는 사항이다.

<key>KAKAO_APP_KEY</key>
<string>0123456789abcdefghijklmn</string>

<key>LSApplicationQueriesSchemes</key>
<array>
<string>kakao0123456789abcdefghijklmn</string>
<string>kakaokompassauth</string>
<string>storykompassauth</string>
<string>kakaolink</string>
<string>storylink</string>
</array>

<key>CFBundleURLTypes</key>
<array>
<dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string></string>
    <key>CFBundleURLSchemes</key>
    <array>
        <string>kakao0123456789abcdefghijklmn</string>
    </array>
</dict>
</array>

  • 제작 중인 패키지로 이동하여 await kakaoSignIn.init("0123456789abcdefghijklmn"); 를 입력한다. 네이티브 앱 키를 매개변수로 입력해야 한다.

try {
final FlutterKakaoLogin kakaoSignIn = new FlutterKakaoLogin(); //로그인 시도
final result = await kakaoSignIn.getUserMe(); //카카오 서버에서 해당 정보 받아옴. 
final KakaoAccountResult account = result.account;
if (account != null) {
    final KakaoAccountResult account = result.account;
    final userID = account.userID;
    final userEmail = account.userEmail;
    final userPhoneNumber = account.userPhoneNumber;
    final userDisplayID = account.userDisplayID;
    final userNickname = account.userNickname;
    final userGender = account.userGender;
    final userAgeRange = account.userAgeRange;
    final userBirthday = account.userBirthday;
    final userProfileImagePath = account.userProfileImagePath;
    final userThumbnailImagePath = account.userThumbnailImagePath;
    // To-do Someting ...
}
} on PlatformException catch (e) {
print("${e.code} ${e.message}");
}

  • 위 코드로 카카오 회원의 정보를 받아온다. 여기서 각 변수는 카카오 로그인 -> 동의 항목에서 허용된 항목만 정보를 불러온다.

정리 #

  • 위 단계를 따르면 프론트에서 소셜 로그인 사용 준비가 완료된다. 하지만 불러온 정보를 저장하고 관리할 서버는 각자 구축해야 한다. 다시 언급하지만, 카카오 소셜 로그인을 애플 심사에서 통과하려면 애플 소셜 로그인(sign_in_with_apple)도 포함해야 한다.

참조링크 #

0.0.1_20240214_1_v81