React Native 앱에 Apple 로그인 기능 추가하기

React Native 앱에 Apple 로그인 기능을 추가하는 방법에 대해 알아보겠습니다. react-native-apple-authentication 라이브러리 설치부터 애플 ID 로그인 버튼 구현 및 사용자 데이터 처리까지, 단계별로 상세하게 설명합니다.

 

Apple 로그인 소개 및 장점

Apple ID 로그인 기능은 사용자가 별도의 계정을 만들 필요 없이, 기존 Apple ID를 사용해 간편하게 로그인할 수 있도록 합니다. 특히 iOS 사용자에게 친숙하고 안전한 방법으로 애플 로그인 기능을 제공하는 것은 사용자 경험을 크게 향상시키는 요소입니다. 더욱이 Apple은 앱 스토어에 새로 등록되는 앱에서 제3자 로그인 기능을 사용할 경우, 반드시 Apple 로그인 옵션을 추가하도록 권고하고 있습니다. 이러한 점에서 Apple 로그인은 필수적인 기능이 되었습니다.

 

react-native-apple-authentication 소개

react-native-apple-authentication 라이브러리는 Apple에서 제공하는 로그인 기능을 React Native 앱에서 손쉽게 사용할 수 있도록 돕는 라이브러리입니다. 이 라이브러리를 사용하면 iOS 13 이상 기기에서 Apple 로그인을 손쉽게 구현할 수 있으며, Apple의 디자인 가이드라인을 따르는 기본 로그인 버튼 UI도 제공합니다.

 

설치를 위해 다음 명령어를 사용합니다.

npm install @invertase/react-native-apple-authentication

 

또는 yarn을 사용한다면

yarn add @invertase/react-native-apple-authentication

 

설치 후, iOS 프로젝트에서 애플 인증을 위한 기본 설정을 해주어야 합니다. 예를 들어 Xcode에서 인증 관련 설정을 추가하고, Info.plist 파일에 필요한 권한을 명시합니다.

 

애플 로그인 구현을 위한 사전 준비

Apple 로그인을 구현하기 전에 Apple Developer 계정에서 애플 로그인 기능을 활성화해야 합니다. 이를 위해서는 다음과 같은 단계를 수행해야 합니다.

• Apple Developer 계정에 로그인합니다.
• 애플 로그인 기능을 사용할 앱 ID를 선택하거나 새로 생성합니다.
• 해당 앱 ID에서 'Sign in with Apple' 기능을 활성화합니다.
• 서비스 ID(Service ID)를 생성하고, 리디렉션 URL을 설정합니다.

이러한 준비 과정을 통해 애플 로그인에 필요한 설정을 완료할 수 있으며, 이는 앱과 Apple 서버 간의 인증을 가능하게 해줍니다.

 

React Native 프로젝트에 라이브러리 설치 및 설정

라이브러리 설치 후, @invertase/react-native-apple-authentication을 iOS 프로젝트와 통합하는 작업이 필요합니다. 이 작업은 Xcode에서 이루어지며, Apple 로그인 기능이 정상적으로 작동하도록 하기 위해 몇 가지 권한을 추가해야 합니다.

• Xcode 설정: 프로젝트를 Xcode에서 열고, Signing & Capabilities 탭으로 이동하여 'Sign in with Apple' 기능을 활성화해야 합니다.
• Info.plist 수정: 사용자 인증과 관련된 권한을 Info.plist 파일에 추가합니다. 이를 통해 애플 인증과 관련된 모든 필수 권한이 설정됩니다.

<key>NSAppleIDUsageDescription</key>
<string>Apple ID를 사용하여 로그인하기 위해 필요합니다.</string>

 

Apple 로그인 버튼 추가 및 기능 구현

애플 로그인 버튼을 화면에 추가하기 위해 react-native-apple-authentication에서 제공하는 AppleButton 컴포넌트를 사용합니다. 버튼을 추가하고, 사용자가 버튼을 클릭했을 때 인증 과정을 처리하는 코드를 구현해야 합니다.

import React from 'react';
import { View } from 'react-native';
import { AppleButton } from '@invertase/react-native-apple-authentication';

const App = () => {
	return (
		<View>
			<AppleButton
				buttonStyle={AppleButton.Style.BLACK}
				buttonType={AppleButton.Type.SIGN_IN}
				style={{ width: 200, height: 44 }}
				onPress={() => onAppleButtonPress()}
			/>
		</View>
	);
};

const onAppleButtonPress = async () => { // 애플 로그인 요청 처리
	try {
		const appleAuthResponse = await appleAuth.performRequest({
			requestedOperation: appleAuth.Operation.LOGIN,
			requestedScopes: [
				appleAuth.Scope.EMAIL,
				appleAuth.Scope.FULL_NAME,
			],
		});
		console.log('애플 로그인 성공:', appleAuthResponse);
	} catch (error) {
		console.error('애플 로그인 실패:', error);
	}
};

export default App;

 

이 예시에서 AppleButton을 사용해 기본적인 로그인 UI를 구현하고, onAppleButtonPress 함수에서 Apple 로그인을 처리하는 코드를 작성했습니다. 사용자의 이메일 및 이름과 같은 정보를 요청할 수 있으며, 성공 시 관련 데이터를 앱에서 활용할 수 있습니다.

 

애플 로그인 데이터 처리 방법

애플 로그인이 성공하면, user 객체와 identityToken, authorizationCode 등을 받아올 수 있습니다. 이러한 정보는 서버와 통신하거나, 사용자 프로필을 업데이트하는 데 활용됩니다.

 

로그인 후 받은 정보를 앱 내에서 저장하거나, 필요한 경우 백엔드 서버에 전달하여 사용자 계정을 생성하거나 갱신하는 작업을 수행할 수 있습니다. 이 과정에서 데이터의 안전한 처리를 위해 적절한 암호화 방식을 사용하는 것이 중요합니다.

 

마무리하며

React Native에서 Apple 로그인을 구현하면 iOS 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다. 특히 간편한 인증 절차를 통해 사용자 이탈률을 낮추고, 애플 생태계의 다양한 기능을 활용할 수 있습니다. 위에서 소개한 react-native-apple-authentication 라이브러리를 활용해 쉽고 빠르게 Apple ID 로그인을 추가해 보세요.