[TIL] capacitor3-kakao-login 적용

필양·2022년 3월 31일
0

TIL

목록 보기
1/1

capacitor3-kakao-login Github

Ionic Framework를 이용해 현재 진행 중인 프로젝트에 카카오 로그인을 적용하기 위해 capacitor3-kakao-login 플러그인을 적용하였다.

⛏ 설치

npm install capacitor3-kakao-login
npx cap sync

📱 Android 설정

참고 : Kakao Developers Android 카카오 로그인

1. root의 build.gradle에 카카오 SDK Repository를 등록한다.

// build.gradle

allprojects {
    repositories {
        google()
        jcenter()
        /* 카카오 SDK Repository 추가 */
        maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/' }
    }
}

2. 발급받은 카카오 앱 키와 schema를 strings.xml에 등록한다.

schema는 kakao[발급받은 App Key] (예 : kakaosampleappkey)의 형식을 따른다.

// android/app/src/main/res/values/strings.xml

<resources>
	...
    <string name="kakao_app_key">[발급받은 App Key]</string>
    <string name="kakao_schema">kakao[발급받은 App Key]</string>
    ...
</resources>

3. MainActivity.java에서 플러그인을 추가하고 카카오 SDK를 initialize 한다.

// MainActivity.java

package io.ionic.starter;

import android.os.Bundle;

import com.fumi.capacitor3_kakao_login.Capacitor3KakaoLoginPlugin;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    /* 플러그인 추가 */
    registerPlugin(Capacitor3KakaoLoginPlugin.class);
    
    /* 카카오 SDK Initialize */
    Capacitor3KakaoLoginPlugin.initializeKakao(this, getString(R.string.kakao_app_key);
  }
}

4. AndroidManifest.xml에 meta-data와 Activity를 추가한다.

// android/app/src/main/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="io.ionic.starter">
    
    <application ...>
    	...
        // App Key 등록
    	<meta-data android:name="com.kakao.sdk.AppKey" android:value="@string/kakao_app_key">
        
        // 로그인 결과를 수신할 Activity 등록
        <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" />
          		<data android:host="oauth" android:scheme="@string/kakao_scheme" />
        	</intent-filter>
      	</activity>
        ...
 	</application>
</manifest>
profile
학습의 완성은 기록이다

0개의 댓글