[React Native] Naver Login 구현하기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

NAVER Developer 등록

 

1. NAVER 로그인 후 Application을 등록해준다.

그림 1-1. Naver Developer Application 등록

 

 

 

 

2. Application의 이름을 입력하고 사용 API에서 네이버 로그인을 선택해준다.

그림 1-2. Naver Developer Application API 등록

 

 

 

 

3. 네이버 로그인 시 제공 받을 정보를 선택한다.

그림 1-3. Naver Developer Application 제공 정보 선택

 

 

 

 

4. 아래의 환경 추가를 눌러 사용할 플랫폼을 추가해준다.

필자는 안드로이드로 개발 중이기 때문에 안드로이드를 추가해주고 아래와 같이 입력해 주었다.

그림 1-4. Naver Developer Application 개발 환경 추가

 

 

 

 

5. 등록 버튼을 누르면 아래와 같이 Client ID와 Client Secret이 제공된다.

그림 1-5. Naver Developer Application 등록 완료

728x90

 

 

 

 

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>
   );
   
}

 

 

 

 

테스트 화면

 

그림 2-1. Naver Login 구현 화면

 

 

그림 2-2. Naver Login 로그인 화면

 

 

그림 2-3. Naver Login 정보 제공 동의 화면

 

 

그림 2-4. Naver Login 성공 시 LOG