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

2022-04-26 02:09:54 (rev. 3)
thku@insilicogen.com
Edit

Structured data

Category: Programming

플러터(Flutter)
1. 플러터란
2. 카카오 소셜 구현

플러터(Flutter) #

플러터란 #

Flutter 개요 : http://www.incodom.kr/Flutter
Flutter 설치 : http://www.incodom.kr/Flutter/setting
Flutter state(상태) : http://www.incodom.kr/Flutter/state
Flutter http(서버사용) : http://www.incodom.kr/Flutter/http
Flutter FutureBuilder(비동기) : http://www.incodom.kr/Flutter/FutureBuilder
Flutter compute : http://www.incodom.kr/Flutter/Compute
Flutter 앱 접근 권한 설정 : https://www.incodom.kr/flutter%20%EC%95%B1%20%EC%A0%91%EA%B7%BC%20%EA%B6%8C%ED%95%9C%20%EC%84%A4%EC%A0%95

카카오 소셜 구현 #

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

카카오 소셜 구현 #

소셜 로그인 기능이란? #

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

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

소셜 로그인에서 가장 중요한 사항은 '애플 소셜 로그인 추가'이다. IOS 측에서 네이버, 카카오와 같은 소셜로그인을 사용하려면 필수적으로 애플 로그인 기능도 추가해야 한다고 말한다. 이는 심사 거절 사유이며 앱 출시 전에 애플 로그인도 추가하는 것을 추천한다.

다른 필수 사항으로는 애플 개발자 유로 멤버십을 가입해야 하고(어차피 앱스토어에 출시하려면 가입해야 한다.) 회원 정보를 저장할 수 있는 서버, 안드로이드 SDK 28 이상, IOS deployment Target 11 이상, gradle-wrapper.properties(android/gradle.wrapper/gradle-wrapper.properties) 5.6.4 이상이 있다.

카카오 개발자 계정 등록 #

카카오 개발자 홈페이지(https://developers.kakao.com/)에서 내 애플리케이션에 들어간다.

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

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

플러터 소셜 로그인 세팅 #

flutter_kakao_login을 pub.yaml에 넣는다.(https://pub.dev/packages/flutter_kakao_login)
안드로이드 스튜디오에서 sdk manager에 들어가서 sdk 28 이상인 sdk를 설정한다.

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

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

패키지의 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'
}
}

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)도 포함해야 한다.

참조링크 #

애플 로그인 패키지: https://pub.dev/packages/sign_in_with_apple
카카오 로그인 패키지: https://pub.dev/packages/flutter_kakao_login
카카오 개발자 홈페이지: https://developers.kakao.com/

Structured data

Table of Contents

플러터(Flutter) #

플러터란 #

카카오 소셜 구현 #

카카오 소셜 구현 #

소셜 로그인 기능이란? #

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

카카오 개발자 계정 등록 #

플러터 소셜 로그인 세팅 #

정리 #

참조링크 #