React Native로 Kakao 로그인과 Instagram 로그인 구현하기

오늘은 React Native에서 Kakao와 Instagram 로그인을 구현하는 방법에 대해 알아보겠습니다. 두 플랫폼 모두 소셜 로그인을 제공하며, 이 기능을 앱에 통합하면 사용자 경험을 대폭 개선할 수 있습니다. 이번 포스팅에서는 각 플랫폼의 로그인 구현 방법을 코드와 함께 살펴보겠습니다.

1. 준비 사항

• React Native 개발 환경 설정
• Kakao 및 Instagram 개발자 계정
• 각 플랫폼의 API 키 발급

먼저 Kakao와 Instagram의 로그인을 구현하려면 각각의 개발자 계정에서 애플리케이션 등록과 API 키 발급을 받아야 합니다.

Kakao 개발자 계정 설정

1. Kakao Developers(https://developers.kakao.com/)에 접속하여 애플리케이션을 등록합니다.
2. 애플리케이션을 등록한 뒤, REST API 키와 Redirect URI를 설정합니다.
3. Redirect URI에는 kakao{YOUR_APP_KEY}://oauth 형태로 설정합니다.

Instagram 개발자 계정 설정

1. Instagram Developer(https://developers.facebook.com/products/instagram/)에서 애플리케이션을 생성하고, Instagram Basic Display를 설정합니다.
2. Instagram 앱을 설정한 뒤, Client ID와 Client Secret을 확보합니다.
3. Redirect URI는 https://localhost처럼 설정할 수 있습니다.

2. Kakao 로그인 구현하기

Kakao 로그인을 구현하기 위해 @react-native-seoul/kakao-login 패키지를 사용합니다. 이 패키지는 Kakao SDK와 통합되어 있어 간편하게 사용할 수 있습니다.

설치

먼저, Kakao 로그인 패키지를 설치합니다.

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

설치가 완료되면 iOS에서는 pod install을 통해 의존성을 추가해야 합니다.

cd ios && pod install && cd ..

기본 코드 작성

아래 코드는 Kakao 로그인을 구현한 간단한 예제입니다.

import React from 'react';
import {View, Button, Alert} from 'react-native';
import {KakaoOAuthToken, login, logout, getProfile} from '@react-native-seoul/kakao-login';

const KakaoLoginScreen = () => {
  const handleKakaoLogin = async () => {
    try {
      const token: KakaoOAuthToken = await login();
      console.log('Kakao token:', token);
      const profile = await getProfile();
      console.log('User Profile:', profile);
    } catch (err) {
      console.error('Kakao login failed:', err);
      Alert.alert('Login failed', err.message);
    }
  };

  const handleKakaoLogout = async () => {
    try {
      await logout();
      Alert.alert('Logged out', 'Successfully logged out from Kakao');
    } catch (err) {
      console.error('Logout failed:', err);
    }
  };

  return (
    <View>
      <Button title="Kakao Login" onPress={handleKakaoLogin} />
      <Button title="Kakao Logout" onPress={handleKakaoLogout} />
    </View>
  );
};

export default KakaoLoginScreen;

위 코드에서는 login() 함수를 호출해 사용자 인증을 요청하고, 성공하면 사용자 프로필 정보를 불러옵니다. logout() 함수로 로그아웃 기능도 구현했습니다.

3. Instagram 로그인 구현하기

Instagram 로그인을 구현하기 위해서는 react-native-webview를 사용하여 OAuth 인증을 처리합니다.

설치

Instagram 로그인을 위해 react-native-webview를 설치합니다.

npm install react-native-webview

Instagram OAuth 구현

Instagram은 OAuth 2.0 인증을 이용하기 때문에 WebView를 통해 로그인 페이지를 보여주고, 사용자가 로그인을 완료하면 Redirect URI로 인증 코드를 받게 됩니다.

import React, {useState} from 'react';
import {View, Button} from 'react-native';
import {WebView} from 'react-native-webview';

const InstagramLoginScreen = () => {
  const [showWebView, setShowWebView] = useState(false);
  const CLIENT_ID = 'YOUR_CLIENT_ID';
  const REDIRECT_URI = 'YOUR_REDIRECT_URI';
  const AUTH_URL = `https://api.instagram.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=user_profile,user_media&response_type=code`;

  const handleWebViewNavigationStateChange = (navState) => {
    const {url} = navState;
    if (url.includes('?code=')) {
      const code = url.split('?code=')[1];
      console.log('Authorization Code:', code);
      setShowWebView(false);
      // 이 Authorization Code를 이용해 서버에서 Access Token을 요청합니다.
    }
  };

  return (
    
       setShowWebView(true)} />
      {showWebView && (
        
      )}
    
  );
};

export default InstagramLoginScreen;

위 코드에서는 WebView를 통해 Instagram 로그인 화면을 표시하고, 인증이 완료되면 Redirect URI에서 인증 코드를 추출하여 처리합니다. 이 인증 코드를 서버로 전송해 Access Token을 받아 사용자 정보를 사용할 수 있습니다.

4. 마무리

Kakao와 Instagram 로그인을 구현하는 과정을 살펴보았습니다. 소셜 로그인은 사용자 편의성을 높이는 중요한 기능이니, 앱에서 적절히 활용해 보세요. 구현 과정에서 각 플랫폼의 정책이나 보안 규칙을 잘 따르는 것도 중요합니다.