[RN] 카카오 로그인 하기 구현하기

오늘은 . . 카카오 디벨롭스를 활용하여 카카오 로그인 기능을 구현해보겠다. 

 

이런 기능을 구현해보고자 한다!

 

---

1. 카카오 디벨롭스 회원가입하고 api 받기

https://developers.kakao.com/

Kakao Developers

 

여기에서 회원가입을 하고 내 애플리케이션 등록을 해야 시작할 수 있다!

카카오로 바로 회원가입을 하고

 

이 페이지에서 애플리케이션 추가하기 버튼을 눌러 

내 애플리케이션을 등록한다. 

 

그 후에 앱 키를 발급받는다!

나는 네이티브 앱 키를 복사하여 사용하였다. 

 

 

2.  로그인권한 '예' 하기

카카오디벨롭스 로그인 -> 내 애플리케이션 들어가기-> 카카오 로그인 항목 클릭-> 로그인 활성화 설정

나는 이걸 안했어서 자꾸 오류가 났었기 때문에...

이 과정을 꼭 포스팅하고싶었다. . . 

 

 

권한을 예로 바꿔놓지 않으면 자꾸 이렇게 뜬다 ㅠ ㅠ ..

멍청하게 생긴 아이가 . . ㅠㅠ

 

 

 

3. 플랫폼 등록하기 

내 애플리케이션 -> 플랫폼 에 들어가면

안드로이드와 ios 플랫폼 등록이 나온다. 

각 플랫폼에 맞는 항목을 등록해주면 된다. 

나는 안드로이드이기 때문에 안드로이드 플랫폼을 등록해주었다. 

 

 

 

 

(1) 패키지명 등록하기

android/app/build.gradle 파일에 들어가면 

applicationID 부분이 나온다. 

이게 패키지명이닷!

 

 

 

(2) 키-해시등록하기

$ keytool -exportcert -alias androiddebugkey -keystore debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

 

터미널에 이걸 입력하면 해시 가 뜬다!

마찬가지로 이것도...키-해시 항목 부분에 넣어주면 된다. ㅎㅎ

 

 

4. 안드로이드 설정

일단 나는 안드로이드만 할 것이기 때문에 안드로이드 설정만 추가해주었다. 

🤔 다음엔 ios 설정도 해보고싶다. . 

 

<activity
	android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity"
	android:launchMode="singleTask"
	android:theme="@style/AuthCodeHandlerTheme"
  	android:exported="true"
	tools:replace="android:theme">
    <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="@string/kakao_scheme" android:scheme="kakaod{본인의api}" />
   </intent-filter>
</activity>

 

본인의 api 키 부분에는 아까 발급받았던 앱 키 를 넣어주면 된다. 

이 부분은 공식문서에 잘 나와있다. 

 

5. strings.xml 수정하기

<resources>
    <string name="app_name">Synergy</string>
    <string name="kakao_app_key">{본인의 app key} </string>
</resources>

 

strings.xml 파일에서 자신의 app key 를 다시한번 넣어준다. 

 

6. 로그인 페이지 구현 with tsx

타입스크립트로 구현해보았다. 

npm install react-native-seoul/kakao-login

import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import * as KakaoLogin from '@react-native-seoul/kakao-login';
import { useNavigation } from '@react-navigation/native';

const Login: React.FC = () => {
  const navigation = useNavigation();

  useEffect(() => {
    const handleKakaoLogin = async () => {
        try {
          const profile = await KakaoLogin.getProfile();
          console.log('GetProfile Success', JSON.stringify(profile));
      
  
          navigation.navigate('홈');
        } catch (error) {
          console.error('Login Failed', error);
        }
      };
      
    handleKakaoLogin();
  }, [navigation]);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>카카오 로그인 중...</Text>
    </View>
  );
};



export default Login;

 

로그인이 완료되면 홈으로 넘어가게끔 하였다. 

 

 

 

 

7. 디자인수정하기

 

이 버튼을 구현하고자 하였다. 

카카오 디벨롭스에 제공되어있는 디자인 정책 페이지를 보고 만들었다. 

https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide#kakaologin-button-guide-symbol

Kakao Developers

 

 

<TouchableOpacity style={styles.loginButton} onPress={handleLoginPress}>
	<Image
		source={require('../../components/assets/images/kakao_login_medium_wide.png')}
    	style={styles.kakaoSymbol}
	/>
</TouchableOpacity>

 

 

제공해주는 이미지팩이 있어 개꿀이다. 이걸 TouchableOpacity 로 넣어 터치가능한 영역으로 넣어주었음!

다음번에는...카카오디벨롭스 활용 2차를 포스팅해보겠담 ㅎ

 

 

reference

공식문서 https://developers.kakao.com/docs/latest/ko/kakaologin/common

https://devbksheen.tistory.com/entry/React-Native-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0