📱Mobile/React Native

[React Native] Kakao Login 구현하기

뉴발자 2023. 3. 28.

728x90

Kakao Login 라이브러리 설치

React Native Project에서 터미널을 키고 아래의 명령어로 Kakao Login 라이브러리를 설치한다.

npm i @react-native-seoul/kakao-login

Kakao Developer Application 등록

1. Kakao Login 후 Application을 등록해준다.

2. Application의 이름과 사업자명을 입력해주고 약관에 동의해준다.

그림 1-2. Kakao Developer Application 정보 입력

저장 버튼을 누르면 아래와 같이 앱 키를 생성해준다.

React Native로 개발 중이므로 네이티브 앱 키를 사용한다.

그림 1-3. Kakao Developer Application 앱 키 생성

3. 카카오 로그인 기능을 사용하기 위해 카카오 로그인 API를 활성화해준다.

그림 1-4. Kakao Developer Application Login API 활성화

그림 1-5. Kakao Developer Application Login API 활성화

그림 1-6. Kakao Developer Application Login API 활성화

그림 1-7. Kakao Developer Application Redirect URI 등록

그림 1-8. Kakao Developer Application Redirect URI 등록

그림 1-9. Kakao Developer Application Redirect URI 등록

안드로이드 플랫폼 설정

Kakao Developer 사이트 왼쪽 메뉴에 있는 플랫폼 탭으로 들어가서 안드로이드 플랫폼을 등록해준다.

패키지명은 React Native Project app 폴더 안의 build.gradle에서 applicationId를 적어주면 된다.

! RN와 Kakao Developer App의 패키지명이 불일치할 경우 Kakao Login 기능이 제대로 동작되지 않는다.

build.gradle 위치

{React Native Project}/android/app/build.gradle

Hash Key 발급 방법

[RN, Window] Hash Key 발급 (tistory.com)

[RN, Window] Hash Key 발급

React Native에서 Kakao Login 기능을 개발하던 중 Hash Key를 입력해야 하는 상황에 맞딱뜨렸고 발급하는 방법에 대해 찾아보고 정리해보려고 한다. Hash Key란? 해시라는 것은 임의의 길이를 가진 데이터

tlseoqja.tistory.com

React Native Project 설정

@react-native-seoul GitHub의 Android 설정 부분 참조

https://github.com/crossplatformkorea/react-native-kakao-login

GitHub - crossplatformkorea/react-native-kakao-login: react-native native module for Kakao sign in.

react-native native module for Kakao sign in. Contribute to crossplatformkorea/react-native-kakao-login development by creating an account on GitHub.

github.com

1. AndroidManifest.xml

android:scheme에 들어가는 내용은 kakao{Native App Key}이다.

Kakao Developer에 등록한 Application으로 들어가서 Native App Key를 확인 후 넣어주면 된다.

2. string.xml

<string> 태그 안에 Native App Key를 넣어주면 된다.

React Native Project 적용

Kakao Login 라이브러리 설치 및 Kakao Developer Application 등록 후 간단한 설정을 해주면 Kakao Login 기능을 사용할 수 있게 된다.

아래와 같이 코드를 작성해주면 Kakao Login 기능이 정상적으로 동작한다.

1. @react-native-seoul/kakao-login의 login 함수를 import 해준다.

로그인 유저의 프로필을 받아오려면 추가로 getProfile 함수도 import 해준다.

import { login, getProfile } from '@react-native-seoul/kakao-login';

2. login 함수를 이용해서 코드를 구현해준다.

const signInWithKakao = async() => {
   const token = await login();
   
   console.log(token);
   
   const profile = await getProfile();
   
   console.log(profile);
}

프로필 정보를 가져오려면 Kakao Developer 카카오 로그인의 동의 항목에서 원하는 항목을 설정해줘야 한다.

3. 함수를 호출하는 버튼을 생성해준다.

<View>
   <TouchableOpacity
      onPress={signInWithKakao}
   >
      <Text>
         카카오 로그인
      </Text>
   </TouchableOpacity>
</View>

4. 전체 코드

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { login, getProfile } from '@react-native-seoul/kakao-login';

export const App = () => {
   
   const signInWithKakao = async() => {
      const token = await login();
      
      console.log(token);
      
      const profile = await getProfile();
      
      console.log(profile);
   }
   
   return (
      <View>
         <TouchableOpacity
            onPress={signInWithKakao}
         >
            <Text>
               카카오 로그인
            </Text>
         </TouchableOpacity>
      </View>
   );
   
}

테스트 화면