[React-Native] 네이버 간편로그인(react-native-naver-login 라이브러리 사용)

1. react-native-seoul/naver-login 라이브러리 설치

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

npm install @react-native-seoul/naver-login --save

 

 

2. ios와 안드로이드 각각 설정을 해줘야한다.

ios

1) Launch Services Queries Schemes 추가 : 네이버 간편 로그인을 하면 네이버 앱을 실행시키는데 이를 위해 Launch Services Queries Schemes를 등록해줘야한다. iOS/프로젝트명/Info.plist 파일 안에

<!-- 애플리케이션이 다른 애플리케이션을 호출할 수 있도록 허용하는 URL 스키마를 지정하는 키 -->
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>naversearchapp</string>
  <string>naversearchthirdlogin</string>
</array>
<!-- 문자열 배열로 지정하며 네이버 검색 앱과, 네이버 써드파티 로그인 기능을 호출하겠다는 것 -->

 

위와같이 추가해준다. 

* info.plist : iOS 애플리케이션의 설정 및 구성 정보를 저장하는 파일로 애플리케이션의 기본 정보, 권한 설정, URL 스키마 등 다양한 설정을 정의한다

 

2) custom URL scheme 추가 : 로그인 완료 후 다시 사용하고 있던 앱으로 돌아오기위해 URL Scheme를 동일한 파일인 Info.plist 에 정의한다.

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>naver</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>{{ CUSTOM URL SCHEME }}</string>
    </array>
  </dict>
</array>

 

{{ CUSTOM URL SCHEME }} 이 부분은 로그인 후 돌아와서 사용되는 기존 앱의 URL을 넣어주는데 네이버 개발자 콘솔의 URL Scheme와 동일한 값을 넣어준다.

 

3) AppDelegate의 application:openURL:options 에서 URL 핸들링 로직 추가 : 네이버 로그인이 성공한 후 사용하던 앱으로 다시 돌아왔을 때 URL을 처리하기 위한 과정이다. iOS/프로젝트명/AppDelegate.mm에 작성하고, 나는 네이버 말고도 다른 간편로그인 작업들이 있었으므로 아래와 같이 작성해줬다.

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  // naver
  if ([url.scheme isEqualToString:@"{{ CUSTOM URL SCHEME }}"]) {
    return [[NaverThirdPartyLoginConnection getSharedInstance] application:app openURL:url options:options];
  }

  // kakao
  if([RNKakaoLogins isKakaoTalkLoginUrl:url]) {
    return [RNKakaoLogins handleOpenUrl: url];
  }
  ...
}

 

{{ CUSTOM URL SCHEME }} 이 부분도 앞의 Info.plist에 설정한 것과 동일하게 넣어준다

 

Android

app/build.gradle 설정에 minifyEnabled이 true로 설정이 되어있다면 android/app/proguard-rules.pro에 아래와같이 추가해준다.

-keep public class com.navercorp.nid.** { *; }

 

 

3. 초기화

로그인을 실행하기 전에 초기화함수를 호출한다.

const consumerKey = '여기엔 네이버 ClientID를 넣어준다';
const consumerSecret = '여기엔 Client Secret을 넣어준다.';
const appName = '설정한 앱 이름';

/** setup in iOS */
const serviceUrlScheme = 'Info.Plist에 작성한 CUSTOM URL SCHEME와 동일하게 넣어준다.';

const NaverLoginButton = (): ReactElement => {
  useEffect(() => {
    NaverLogin.initialize({
      appName,
      consumerKey,
      consumerSecret,
      serviceUrlSchemeIOS: serviceUrlScheme,
      disableNaverAppAuthIOS: true,
      /** (iOS) 네이버앱을 사용하는 인증을 활성화 한다. */
    });
  }, []);

 

 

4. 로그인 함수와 프로필 조회 함수 호출

async/await으로 login()을 호출하고 successResponse가 있으면 결과값의 엑세스토큰을 사용해 getProfile()을 호출한다.

가져온 프로필에는 이름, 생년월일, 이메일 등이 있다.

  const onNaverLogin = async (): Promise<void> => {
    const { failureResponse, successResponse } = await NaverLogin.login();
    if (successResponse) {
      // 토큰으로 프로필 가져오기
      const profileResult = await NaverLogin.getProfile(successResponse!.accessToken);
      console.log(profileResult);
    } else {
      console.log(failureResponse);
    }
  };

 

 

 

** 기타 알아야 할 사항

1. 프로필 조회에서는 CI는 포함되지 않는다.

(CI : 본인인증 기관에서 부여하는 개인식별정보로 인증기관이 달라도 개인의 CI는 일치한다)

이 CI로 중복 회원가입을 막을 수 있지만 CI를 받기 위해서는 따로 네이버에 요청해야한다. 

CI 조회 권한 추가 방법 : 네이버 로그인 고객센터

 

2. 테스트를 하기 위해서는 신청한 네이버 오픈 API의 멤버관리 - 관리자 등록에서 id를 따로 등록해줘야 한다.

 

3. 제일 처음 테스트를 했을 때 아래와 같은 창이 나왔다.

그런데 잘못된 줄 알고 한참 헤메다가

use without an account를 클릭했더니 네이버 로그인 창이 나옴..

뭐든 잘 읽어보자...

 

 

.

이런 간편로그인 같은 기능은 뭔가 대단히 복잡하고 어려울 거라고 생각했는데 라이브러리를 사용하니 생각보다 간단했다. 생각보다 간단했지만 작업시간은 오래 걸림(?).. 아무튼 이렇게 복잡하다고 생각했던 것을 알아가는 재미가 있는 것 같다.