[React Native] naver login / 네이버 로그인

0. 환경

react-native: 0.62.0

@react-native-seoul/naver-login: 2.1.0

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

react-native-seoul/react-native-naver-login

1. 설치

$ npm install @react-native-seoul/naver-login --save
또는
$ yarn add @react-native-seoul/naver-login

$ cd ios && pod install && cd ..

 

1) iOS Post Installation

github.com/react-native-seoul/react-native-naver-login#manual-installation-post-installation-%EF%B8%8Fimportant

react-native-seoul/react-native-naver-login

이 곳을 보고 그대로 따라한다.

 

참고) 2번 URL Schemes 예시

2번  URL Schemes 예시

(출처: baked-corn.tistory.com/119)

 

2) Android Post Installation

autolinking이 지원되어 별도의 설정이 필요하지 않고, 아래만 따라하면 된다.

github.com/react-native-seoul/react-native-naver-login#additional-check-in-android

 

Proguard 적용 제외 설정 네이버 아이디로 로그인 라이브러리는 ProGuard로 코드 난독화를 적용하면 안 됩니다. 네이버 아이디로 로그인 라이브러리를 사용하는 애플리케이션을 .apk 파일로 빌드할 때 ProGuard를 적용한다면, 다음과 같이 proguard-project.txt 파일을 수정해 ProGuard 적용 대상에서 네이버 아이디로 로그인 라이브러리 파일을 제외합니다. 라이브러리 파일의 이름과 폴더는 버전이나 개발 환경에 따라 다를 수 있습니다. (혹은 proguard-rules.pro)

-keep public class com.nhn.android.naverlogin.** {
  public protected *;
}

 

2. 애플리케이션 등록

2-1. 등록

developers.naver.com/apps/#/list

이곳에서 애플리케이션을 등록한다.

 

2-2. 환경 추가 (iOS)

naver developers

> 내 애플리케이션

> API 설정

> 로그인 오픈 API 서비스 환경

> 환경 추가 클릭

> iOS 선택

> 다운로드 url과 url scheme 입력 

ex.

 

2-2. 환경 추가 (Android)

naver developers

> 내 애플리케이션

> API 설정

> 로그인 오픈 API 서비스 환경

> 환경 추가 클릭

> Android 선택

> 다운로드 url과 applicationId 입력

 

3. Usage

github.com/react-native-seoul/react-native-naver-login#usage

import { NaverLogin } from "@react-native-seoul/naver-login";

const iosKeys = {
  kConsumerKey: "your_client_id", // client id
  kConsumerSecret: "your_client_key", // client key
  kServiceAppName: "눈송이",
  kServiceAppUrlScheme: "naverlogin" // only for iOS
};

const androidKeys = {
  kConsumerKey: "your_client_id", // client id
  kConsumerSecret: "your_client_key", // client key
  kServiceAppName: "눈송이"
};

  const naverLogin = props => {
    return new Promise((resolve, reject) => {
      NaverLogin.login(props, (err, token) => {
        console.log('🤢 naver token', token);
        if (err) {
          reject(err);
          return;
        }
        resolve(token);
      });
    });
  };
  const _signInWithNaver = async () => {
    try {
      console.log('🤢 네이버 가입을 해보자');
      const result = await naverLogin(naverInitials);
      llog('🤢result', result);
    } catch (error) {
      console.log('💢 naver error', error);
      Alert.alert('오류', '네이버 로그인 실패');
    }
  };

client id와 client key는

내 애플리케이션 - 개요

에서 바로 볼 수 있다.

 

주의

하지만 naver login api로 얻은 accessToken을 서버에 보내려고 했지만, 서버에서는 state라는 파라미터도 필요하다고 했다. 그렇지만 이 라이브러리를 사용하면서 state를 얻을 수 있는 방법은 없다.

해결방법을 아직 찾지 못해 네이버 로그인을 서비스에 적용시키지는 못했다.

해결하면 다시 업데이트 하겠습니다!

 

 

에러

github.com/react-native-seoul/react-native-naver-login#additional-check-in-android

안드로이드 빌드 안되면 이곳을 보자!