[React Native] Naver Login 구현하기
NAVER Login 라이브러리 설치
React Native Project에서 터미널을 키고 아래의 명령어로 NAVER Login 라이브러리를 설치한다.
npm i @react-native-seoul/naver-login@2.3.1
NAVER Login 2.3.1 버전 설치 이유
[RN, Error] NAVER Login Error (tistory.com)
[RN, Error] NAVER Login Error
에러 상황 React Native에서 NAVER Login 기능을 구현하고 버튼을 눌러 로그인 함수를 호출하면 아무런 에러 메시지도 없이 앱이 꺼져버리는 현상이 발생했다. 해결 방법 @react-native-seoul/naver-login 라이
tlseoqja.tistory.com
NAVER Developer 등록
1. NAVER 로그인 후 Application을 등록해준다.
2. Application의 이름을 입력하고 사용 API에서 네이버 로그인을 선택해준다.
3. 네이버 로그인 시 제공 받을 정보를 선택한다.
4. 아래의 환경 추가를 눌러 사용할 플랫폼을 추가해준다.
필자는 안드로이드로 개발 중이기 때문에 안드로이드를 추가해주고 아래와 같이 입력해 주었다.
5. 등록 버튼을 누르면 아래와 같이 Client ID와 Client Secret이 제공된다.
React Native Project 적용
NAVER Login 라이브러리와 Developer에 Application 등록이 끝나면 모든 설정이 끝난다.
아래와 같이 코드를 작성해주면 NAVER Login이 정상적으로 동작한다.
1. @react-native-seoul/naver-login의 NaverLogin 함수를 import 해준다.
로그인 유저의 프로필을 받아오려면 추가로 getProfile 함수도 import 해준다.
import { NaverLogin, getProfile } from '@react-native-seoul/naver-login';
2. NAVER Login을 구현할 JS 파일 안에 NAVER Login Config를 작성해준다.
const naverConfig = {
kConsumerKey: 'Client ID',
kConsumerSecret: 'Client Secret',
kServiceAppName: 'NAVER Developer Application명',
}
3. NaverLogin 함수를 이용해서 코드를 구현해준다.
const signInWithNaver = () => {
NaverLogin.login(naverConfig, async(err, token) => {
if(token) {
console.log(token);
console.log(token.accessToken);
const profile = await getProfile(token.accessToken);
console.log(profile);
}
if(err) {
console.log(err);
}
});
};
4. 함수를 호출하는 버튼을 생성해준다.
<View>
<TouchableOpacity
onPress={signInWithNaver}
>
<Text>
네이버 로그인
</Text>
</TouchableOpacity>
</View>
5. 전체 코드
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NaverLogin, getProfile } from '@react-native-seoul/naver-login';
export const App = () => {
const naverConfig = {
kConsumerKey: 'Client ID',
kConsumerSecret: 'Client Secret',
kServiceAppName: 'NAVER Developer Application Name',
};
const signInWithNaver = () => {
NaverLogin.login(naverConfig, async(err, token) => {
console.log(token);
console.log(token.accessToken);
const profile = await getProfile(token.accessToken);
console.log(profile);
if(err) {
console.log(err);
}
}
)
};
return (
<View>
<TouchableOpacity
onPress={signInWithNaver}
>
<Text>
네이버 로그인
</Text>
</TouchableOpacity>
</View>
);
}
테스트 화면
