[React Native] 네이버 소셜 로그인 구현하기

SSAFY 특화 프로젝트를 진행하면서, 네이버 소셜 로그인을 구현하고자 한다.

 

프로젝트를 진행할 때, 소셜 로그인을 이용하면 간편한 점이 많다.

소셜 로그인 중 카카오, 네이버, 구글, Apple 등이 많지만 그 중에서도, 네이버 소셜 로그인을 React Native로 구현하고자 했다.

 

네이버 소셜로그인은 WEB, Android, iOS를 공식 지원하지만, 다들 알다시피 Android 그리고 iOS의 중간인 React Native는 어중간한 위치에 있다(공식 지원을 안해준다!).

이를 해결하기 위해, React Native 네이버 소셜 로그인 라이브러리를 만들어 주신 고마운 분들이 계신다.

 

공식 문서는 다음과 같다. 

https://github.com/react-native-seoul/react-native-naver-login

GitHub - react-native-seoul/react-native-naver-login: 리엑트 네이티브 네이버 로그인 라이브러리

 

배포와 맥북의 부재 그리고 정해진 마감시간으로 인해 우리는 우선적으로 Android만 개발하기로 했다.

Android을 위한 설치와 설정은 정말 간단하다.

React Native 버전이 0.6 이하인 사람은 공식문서를 따라하면 될것이다.

 

우선적으로, 밑 링크에서 어플리케이션을 안드로이드로 등록하면서 네이버 로그인API 사용 신청을하고, Client Key와 Client Secret을 발급 받으면 된다.

https://developers.naver.com/main/

NAVER Developers

 

설치 명령어는 다음과 같다.

yarn add @react-native-seoul/naver-login

 

설치를 한 이후, 공식문서에서 지원하는 예시 코드는 다음과 같은데,

밑에 ConsumerKey에는 위에서 가져온 Client Key, ConsumerSecret에는 Client Secret, ServiceAppName에는 등록한 어플의 이름을 적으면 된다.

import React from "react";
import {
  Alert,
  SafeAreaView,
  StyleSheet,
  Button,
  Platform
} from "react-native";
import { NaverLogin, getProfile } from "@react-native-seoul/naver-login";

const iosKeys = {
  kConsumerKey: "VC5CPfjRigclJV_TFACU",
  kConsumerSecret: "f7tLFw0AHn",
  kServiceAppName: "테스트앱(iOS)",
  kServiceAppUrlScheme: "testapp" // only for iOS
};

const androidKeys = {
  kConsumerKey: "QfXNXVO8RnqfbPS9x0LR",
  kConsumerSecret: "6ZGEYZabM9",
  kServiceAppName: "테스트앱(안드로이드)"
};

const initials = Platform.OS === "ios" ? iosKeys : androidKeys;

const App = () => {
  const [naverToken, setNaverToken] = React.useState(null);

  const naverLogin = props => {
    return new Promise((resolve, reject) => {
      NaverLogin.login(props, (err, token) => {
        console.log(`\n\n  Token is fetched  :: ${token} \n\n`);
        setNaverToken(token);
        if (err) {
          reject(err);
          return;
        }
        resolve(token);
      });
    });
  };

  const naverLogout = () => {
    NaverLogin.logout();
    setNaverToken("");
  };

  const getUserProfile = async () => {
    const profileResult = await getProfile(naverToken.accessToken);
    if (profileResult.resultcode === "024") {
      Alert.alert("로그인 실패", profileResult.message);
      return;
    }
    console.log("profileResult", profileResult);
  };

  return (
    <SafeAreaView style={styles.container}>
      <Button
        title="네이버 아이디로 로그인하기"
        onPress={() => naverLogin(initials)}
      />
      {!!naverToken && <Button title="로그아웃하기" onPress={naverLogout} />}

      {!!naverToken && (
        <Button title="회원정보 가져오기" onPress={getUserProfile} />
      )}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-evenly",
    alignItems: "center"
  }
});

export default App;

 

하지만 막상 안드로이드 에뮬레이터를 실행했더니 에러를 맞이했다.

yarn android를 친 결과

 

이는 공식 문서 issues에서 같은 문제를 해결해주신 분이 계셨다.

https://github.com/react-native-seoul/react-native-naver-login/issues/104

Could not find com.naver.nid:naveridlogin-android-sdk:4.2.6 error 해결방법 공유합니다. · Issue #104 · react-native-se

 

android/build.gradle 폴더에 다음과 같이 jcenter()를 넣어주니 해결됐다.

 

네이버 소셜 로그인을 통해 구현하고자 하는 과정은 다음과 같았다.

 

1. 네이버 소셜 로그인을 통해 naver에서 유효한 token값을 발급 받는다.
2. 발급 받은 token값을 서버로 보내 DB에 회원 정보가 있는지 확인한다.
   
   1. 회원정보 O : 홈 화면으로 보낸다.
   2. 회원정보 X : 회원가입 화면으로 보낸다.

 

로그인 버튼을 누르면 이와 같은 로직이 한 번에 수행되도록 하였다. (naverLogin과 getUserProfile을 약간 수정했다)

로그인 과정

변경한 네이버 로그인과 유저정보 가져오기

 

 

결과물