[TIL] capacitor3-kakao-login 적용
Ionic Framework를 이용해 현재 진행 중인 프로젝트에 카카오 로그인을 적용하기 위해 capacitor3-kakao-login 플러그인을 적용하였다.
⛏ 설치
npm install capacitor3-kakao-login
npx cap sync
📱 Android 설정
npm install capacitor3-kakao-login
npx cap sync
참고 : 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>
Author And Source
이 문제에 관하여([TIL] capacitor3-kakao-login 적용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@crazeidea/TIL-capacitor3-kakao-login-적용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)