capacitor-kakao-login

Android 설정

capacitor.config.ts 에 아래 내용 추가

...
plugins: {
    ...
    CapacitorKakaoLogin: {
        app_key: 'YOUR_APP_KEY'
    }
    ...
}
...

AndroidManifest.xml 에 아래 내용 추가 (fallback으로 웹뷰에서 로그인 하게될 경우에 필요)

<activity 
    android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity"
    android:exported="true">
    <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="kakao${NATIVE_APP_KEY}" />
    </intent-filter>
</activity>

주요 체크포인트

• minSDKVersion 확인 필요 (kakaoSDK 요구조건)

minSdkVersion = 23

• npx cap open android 후에 반드시 gradle sync를 해서 dependency 설치 필요
• Android 키 해시 값이 Kakao Developer Console에 등록되어 있어야 함. 키 해시 값은 릴리즈, 디버그(빌드 컴퓨터 마다 다름) 둘 다 있음.

iOS 설정

capacitor.config.ts 에 아래 내용 추가

...
plugins: {
    ...
    CapacitorKakaoLogin: {
        app_key: 'YOUR_APP_KEY'
    }
    ...
}
...

Info.plist 에 아래 내용 추가

<array>
  <dict>
	<key>CFBundleURLSchemes</key>
   	<array>
	    <string>kakao{NATIVE_APP_KEY}</string>
	</array>
  </dict>
</array>

<key>LSApplicationQueriesSchemes</key>
  <array>
     <string>kakao{NATIVE_APP_KEY}</string>
     <string>kakaokompassauth</string>
     <string>kakaotalk</string>
</array>

AppDelegate.swift 에 아래 내용 추가

카카오에서 리다이렉트로 다시 앱으로 돌아왔을때 핸들링 해주는 부분

    import KakaoSDKAuth
    
    ...
    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
        // Called when the app was launched with a url. Feel free to add additional processing here,
        // but if you want the App API to support tracking app url opens, make sure to keep this call
      
        // 아래 코드 추가
        if (AuthApi.isKakaoTalkLoginUrl(url)) {
          return AuthController.handleOpenUrl(url: url)
        }
        
        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
    }
    ...

주요 체크포인트

• kakao developer 에 설정한 bundle id와 앱의 bundle id가 반드시 동일해야함

Install

npm install capacitor-kakao-login
npx cap sync

API

• echo(...)
• initSDK()
• prompt(...)
• addListener('callback', ...)
• Interfaces

echo(...)

echo(options: { value: string; }) => Promise<{ value: string; }>

| Param | Type | | ------------- | ------------------------------- | | options | { value: string; } |

Returns: Promise<{ value: string; }>

initSDK()

initSDK() => Promise<void>

prompt(...)

prompt(options?: PromptOptions | undefined) => Promise<void>

| Param | Type | | ------------- | ------------------------------------------------------- | | options | PromptOptions |

addListener('callback', ...)

addListener(eventName: 'callback', listenerFunc: (data: CallbackData) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

| Param | Type | | ------------------ | ------------------------------------------------------------------------ | | eventName | 'callback' | | listenerFunc | (data: CallbackData) => void |

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Interfaces

PromptOptions

| Prop | Type | | ------------ | --------------------- | | extra | any | | scopes | string[] |

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |

CallbackData

| Prop | Type | | ------------------------------ | -------------------- | | success | boolean | | error | string | | access_token | string | | expires_in | string | | refresh_token | string | | refresh_token_expires_in | string | | refresh_token_expired_at | string | | id_token | string | | token_type | string |