KakaoSDK Bridge for React, React-Native, RNW

Overview

KakaoSDK for React, React-Native

platforms npm npm github issues github closed issues Issue Stats

Use Dependencies

iOS Android Web
2.5.0 2.5.0 1.39.14

처음 설치 시 주의 사항 (React-Native 만)

해당 모듈은 Swift로 되어있어서
그냥 가동 시 작동이 안될 수 있습니다.

Xcode에서 프로젝트 내 비어있는 Swift File를 새로 만들고 Headers 생성을 누르면
스위프트 모드로 잡히면서 정상적으로 돌게 됩니다.

이후 해결방안 나오면 별도로 공지하겠습니다.

Xcode 12.5 업뎃 후 빌드 실패 해결법 (React-Native 만)

갑자기 Xcode 업데이트 후 디버그로는 빌드가 안되는 문제가 있습니다.
원인은 Alamofire에서 나오는 부분인데 프로젝트 설정으로 해결할 수 있습니다.

해당 프로젝트 설정을 접근 후 Target에 프로젝트에서 Build Settings 접근 후 Library Search Path를 검색하면 그 안에 Debug쪽에 있는 부분을 수정해야합니다.

$(inherited)를 제외한 2개를 삭제 후 저장하고 빌드하면 정상적으로 돌아갑니다.

사용 환경

  • CRA (create-react-app)
  • Next.js
  • React-Native 0.61 이상
  • React-Native-Web

시작하기

$ npx @actbase/react-kakaosdk

웹이나 앱을 구분 한 뒤 알아서 wizard가 실행됩니다.

사용방법

import KakaoSDK from '@actbase/react-kakaosdk';

// 카카오 로그인 시 처리부문
const tokens = await KakaoSDK.login();
변수명 설명
access_token 카카오의 access_token
refresh_token 카카오의 refresh_token
expires_in 카카오의 accessToken 만료 남은 초
refresh_token_expires_in 카카오의 refreshToken 만료 남은 초
scopes 사용권한
import KakaoSDK from '@actbase/react-kakaosdk';

// 카카오 로그아웃시 처리
await KakaoSDK.logout();

// 카카오 액세스 토큰 가져오는 명령, 로그인 시 자동으로 로그아웃 후 처리됨에 따라
// 별도로 값만 가져올 경우 사용.
// 로직 변경으로 인해 해당 현재 토큰의 대한 정보(아이디, 만료일)만 가져옵니다.
const accessToken = await KakaoSDK.getAccessToken();

// 카카오 회원정보 가져오기
const profile = await KakaoSDK.getProfile();

Contacts

해당 모듈은 액트베이스(유)에서 개발 및 관리를 진행하고 있습니다.
프로젝트 문의 혹은 제휴가 필요한 경우 [email protected]로 연락주세요.

Changes

  • 0.9.4
    • 안드로이드 간혈적 kakaoAccount null 일 경우 처리
  • 0.9.3
    • 첫 배포
Comments
  • ios에서 kakaologin이 되지 않습니다.

    ios에서 kakaologin이 되지 않습니다.

    [발생] ios에서 로그인시에 카카오톡 실행후 다시 앱으로 전환하나 토큰을 반환하지 않습니다.

    [환경] xcode 13.1 react": "17.0.2", react-native": "0.66.0", kakaosdk version : 2.6.0

    [info.plist] kakao{kakaoKey} kakaokompassauth kakaolink kakaotalk-5.9.7 kakaonavi-sdk

    [실행코드] await KakaoSDK.init(kakaoKey) const tokens = await KakaoSDK.login() .then((result) => { console.log(Login Finished:${JSON.stringify(result)}); resolve(true) }).catch((error) => { console.log(Login Cancelled:${error}); resolve(false) }); console.log('tokens',tokens); [xcode log] 2021-11-22 04:44:02962 [💬][AuthController.swift 99:25] -> 카카오톡 실행: kakaokompassauth://authorize?params=%7B%22code_challenge_method%22:%22S256%22,%22code_challenge%22:%224yXUp5rK1qxFPwEzLKsjOzwC9BvXSwVoOoZ2fLkbueM%22%7D&client_id={kakaoKey}&redirect_uri=kakao{kakaoKey}://oauth&headers=%7B%22KA%22:%22sdk%5C/2.5.6%20sdk_type%5C/swift%20os%5C/ios-15.1%20lang%5C/ko-KR%20res%5C/390x844%20device%5C/iPhone%20origin%5C/앱번들%20app_ver%5C/1.0%22%7D&response_type=code

    https://github.com/actbase/react-kakaosdk/issues/4 해당 링크를 참조하여 진행을 해보았지만 똑같은 현상이 발생합니다.

    opened by Kwon-Bum-Kyu 6
  • getAccessToken의 AccessTokenType이 Nan과 undefined가 뜹니다.

    getAccessToken의 AccessTokenType이 Nan과 undefined가 뜹니다.

    getAccessToken의 AccessTokenType이 아래와 같이 뜹니다.

    {"access_token": undefined, "expires_in": NaN, "refresh_token": undefined, "refresh_token_expires_in": NaN, "scopes": undefined}

    login의 AccessTokenType는 위와 같은 현상 없이 정상적으로 나옵니다. 무엇이 문제일까요?

    opened by akyeongah 5
  • getAccessToken 에러

    getAccessToken 에러

    리액트 네이티브 환경에서 getAccessToken를 사용한 경우 에러가 발생합니다.

    에러 메시지입니다. [TypeError: str.replace is not a function. (In 'str.replace(' ', 'T')', 'str.replace' is undefined)]

    구현 코드입니다. `export async function getAccessToken () {

    KakaoSDK.getAccessToken()
    
        .then((res) => {
            console.log('getAccessToken res: ', res)
        })
    
        .catch((err) => {
            console.log('getAccessToken err: ', err)
        })
    

    }`

    getAccessToken가 아닌 login, getProfile은 정상작동하는 상황입니다.

    opened by akyeongah 4
  • Can't install the library

    Can't install the library

    Got error when try installing the library to React-Native App (Expo-bared). Here's the error log

    /Users/thor/.npm/_npx/dc46b1f2346da22f/node_modules/@actbase/react-kakaosdk/bin/install:46
        exec(cmd?.replace(/\n/g, ' '), (err, stdout, stderr) => {
                 ^
    
    SyntaxError: Unexpected token '.'
        at wrapSafe (internal/modules/cjs/loader.js:1047:16)
        at Module._compile (internal/modules/cjs/loader.js:1097:27)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
        at Module.load (internal/modules/cjs/loader.js:977:32)
        at Function.Module._load (internal/modules/cjs/loader.js:877:14)
        at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
        at internal/main/run_main_module.js:18:47
    
    opened by xubmuajkub 1
  • 리액트네이티브 키를 바꾸는 경우

    리액트네이티브 키를 바꾸는 경우

    안녕하세요,

    이번에 사업자 등록을 변경하면서 리액트네이티브 키를 변경하게 됐는데요, 그래서 npx @actbase/react-kakaosdk 설치를 새로운 키로 다시 했는데 완료는 됐지만,

    Android 설치 시작

    1. AndroidManifest.xml 수정 AuthCodeHandlerActivity 가 존재합니다. 키를 확인해주세요.

    ================================================ 설치완료..

    라고 뜹니다.

     <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"/>
        <data android:host="oauth" android:scheme="kakao~~~~~~"/>
      </intent-filter>
    </activity>
    

    AndroidManifest 파일에서 저 물결 부분만 제대로 고쳐주면 되는거 맞나요?

    opened by hayatshin 0
  • getPrifle / getAccessToken시 앱이 꺼져버리는데 이유가있을까요 ??

    getPrifle / getAccessToken시 앱이 꺼져버리는데 이유가있을까요 ??

    `

        const kakaoLogin = async () => {
            try {
                await KakaoSDK.init("")
                const tokens = await KakaoSDK.login();
                console.log("토큰 시작")
                console.log(tokens);
                
                const profile = await KakaoSDK.getProfile();
                console.log(profile);
                
                if(tokens.access_token) {
                    return setSns({
                        type : "kakao",
                        token : tokens.access_token
                    });
                }
    
            } catch (e) {
                console.log("카카오에러 ");
                console.log(e);
            }
        }`
    

    해당코드로 확인하면 토큰발급은 확인되는데 getProfile에서 앱이 꺼져버리는데 혹시 이유를 알 수 있을까요??

    opened by stillgood96 3
  • [IOS] 첫 빌드 오류

    [IOS] 첫 빌드 오류

    [이슈] 스크린샷 2022-01-19 오후 7 03 46

    • 새롭게 빌드 후 앱 진입 직전에 발생하는 이슈입니다. ( JS 코드가 실행되기 전입니다. 새로운 빌드를 할 때마다 발생합니다. )
    • 이후 빌드 설치된 앱 재실행 하면 로그인 및 채널 추가와 관련된 동작은 아주 잘 됩니다.
    • 위 이미지의 위치는 ios/Pods/KakaoSDKCommon/sources/KakaoSDKCommon/common/KakaoSDKCommon.swift 입니다.

    안내해주신 설정(자동설정 및 README 안내)은 다 적용하여 빌드 후 앱 재 실행하여 로그인 등 정상 동작 전부 확인하였습니다.

    [환경] xcode 13.1 react": "17.0.2", react-native": "0.66.2", @actbase/react-kakaosdk: "0.9.19"

    opened by maugou 3
  • ios KakaoLogin() 아무것도 반환을 안함

    ios KakaoLogin() 아무것도 반환을 안함

    현재 앱 키는 네이티브 앱 키를 사용하고 있으며, 해당 키로 안드로이드는 잘 작동하고 있습니다. IOS 등록도 Bundle Identifier 에 있는 이름을 사용하고 있고요.

    AppDelegate.m 에는 openURL:(NSURL *)url 이 빠져있어 임의로 추가 후 if문을 추가한다면 스플래쉬 화면 이후 검은 화면이 뜹니다.

    opened by vpdls1511 10
Releases(0.9.18)
Owner
actbase
React & React Native Design Components, Standardization Guide
actbase
A Step-by-step Guide to a Consistent Multi-Platform Font Typeface Experience in React Native

A Step-by-step Guide to a Consistent Multi-Platform Font Typeface Experience in React Native Goal Be able to use font typeface modifiers such as fontW

Jules Sam. Randolph 53 Dec 23, 2022
JPassport works like Java Native Access (JNA) but uses the Foreign Linker API instead of JNI. Similar to JNA, you declare a Java interface that is bound to the external C library using method names.

JPassport works like Java Native Access (JNA) but uses the Foreign Linker API instead of JNI. Similar to JNA, you declare a Java interface t

null 28 Dec 30, 2022
Simple way of causing a bsod using the native api implemented into a 1.12.2 Forge mod

Simple-BSOD-Mod Simple way of causing a bsod using the native api implemented into a 1.12.2 Forge mod. Dowload It HERE To make your own you can go to

INZO_Technologies 5 Dec 28, 2022
Engin Demiroğ - Yazılımcı Geliştirme (JAVA + REACT) Yerleştirme Kampı 4. Gün 1. Ödev

JavaCampD4HomeWork1 Engin Demiroğ - Yazılımcı Geliştirme (JAVA + REACT) Yerleştirme Kampı 4. Gün 1. Ödev Kimlik Doğrulama Servisi (MERNIS) Projeye Nas

Berkcan 4 Jun 4, 2021
Repository for AMES Amperes 2022 Rapid React season

Repository for AMES Amperes 2022 Rapid React season

null 3 Nov 10, 2022
The missing bridge between Java and native C++

JavaCPP Commercial support: Introduction JavaCPP provides efficient access to native C++ inside Java, not unlike the way some C/C++ compilers interact

Bytedeco 4k Jan 8, 2023
Sceneform React Native AR Component using ARCore and Google Filament as 3D engine. This the Sceneform Maintained Component for React Native

Discord Server Join us on Discord if you need a hand or just want to talk about Sceneform and AR. Features Remote and local assets Augmented Faces Clo

SceneView Open Community 42 Dec 17, 2022
With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any other file server

React Native In-App update With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any o

Nepein Andrey 7 Dec 21, 2022
Spring Native provides beta support for compiling Spring applications to native executables using GraalVM native-image compiler.

Spring Native provides beta support for compiling Spring applications to native executables using GraalVM native-image compiler.

Spring Projects Experimental 2.8k Jan 6, 2023
React native wrapper for Jitsi Meet SDK Library that rely on the native view (Activity / ViewController)

react-native-jitsi-meet-sdk React native wrapper for Jitsi Meet SDK Library. This Library implements the Jitsi SDK with a native activity on the Andro

null 7 May 2, 2022
An awesome native wheel picker component for React Native.

⛏️ react-native-picky An awesome native wheel picker component for react-native. Features Supports multiple columns ✅ Supports looping ✅ Native Androi

null 28 Dec 4, 2022
Bridge Home Assistant with Minecraft

HomeAssistantMC is a Minecraft mod that integrates Home Assistant to Minecraft, allowing retrieval of entity states and calling of services. This allo

Muhd Hakim 25 Dec 24, 2022
The new bridge between Ghidra and Frida!

ghidra2frida ghidra2frida is a Ghidra Extension that, working as a bridge between Ghidra and Frida, lets you create powerful Ghidra scripts that take

null 92 Dec 5, 2022
Stetho is a debug bridge for Android applications, enabling the powerful Chrome Developer Tools and much more.

Stetho Stetho is a sophisticated debug bridge for Android applications. When enabled, developers have access to the Chrome Developer Tools feature nat

Meta 12.6k Jan 3, 2023
Literally just adds milk, to act as a bridge for any other mods that want to do the same.

Milk lib Literally just adds milk, to act as a bridge for any other mods that want to do the same. See the Milk class for customisation; It allows for

null 5 Oct 17, 2022
Velocity global chat/discord bridge

VelocityDiscord Velocity global chat/discord bridge Default config generated on startup: # Don't change this config_version="1" [discord] # Bot token

Foo 8 Dec 18, 2022
Simple Design for Java bridge with Javascript. Also can get javascript console.log.

SDBridgeKotlin is here. If your h5 partner confused about how to deal with iOS and Android. This Demo maybe help. 最常见的问题. WebViewJavascriptBridge is n

null 25 Dec 18, 2022
The react-native Baidu voice library provides voice recognition, voice wake-up and voice synthesis interfaces. react-native百度语音库,提供语音识别,语音唤醒以及语音合成接口。

react-native-baidu-asr react-native-baidu-asr It is a Baidu speech library under React Native, which can perform speech recognition, speech wake-up an

dengweibin 11 Oct 12, 2022
MixStack lets you connects Flutter smoothly with Native pages, supports things like Multiple Tab Embeded Flutter View, Dynamic tab changing, and more. You can enjoy a smooth transition from legacy native code to Flutter with it.

中文 README MixStack MixStack lets you connects Flutter smoothly with Native pages, supports things like Multiple Tab Embeded Flutter View, Dynamic tab

Yuewen Engineering 80 Dec 19, 2022
AES-GCM encryption/decryption for React Native

react-native-aes-gcm-crypto AES-GCM encryption/decryption for React Native Requirements iOS >= 13.0 Android >= 26 Installation npm install react-nativ

Takuya Matsuyama 201 Dec 2, 2022