@react-native-seoul/naver-login
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.3 • Public • Published

    @react-native-seoul/naver-login

    npm version downloads license

    React Native 네이버 로그인 라이브러리 입니다. 자세한 예제는 NaverLoginExample에서 확인 가능합니다

    typescriptflow를 지원합니다

    Getting started

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

    Mostly automatic installation

    RN version < 0.60

    $ react-native link @react-native-seoul/naver-login

    RN version >= 0.60

    • Autolinking이 지원됩니다.

    • iOS의 경우 추가적으로 pod install이 필요합니다.

      cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step

    Manual installation (Post installation) ❗️Important

    iOS

    프로젝트 링크(Xcode project 와 Build Phase에 libRNNaverLogin.a 파일 링크)는 react-native link 명령어를 통하여 세팅이 되며 추가적인 세팅, 주의사항은 아래와 같습니다.

    1. [info.plist] 파일 LSApplicationQueriesSchemes 항목에 아래 항목을 추가합니다.
       <key>LSApplicationQueriesSchemes</key>
       <array>
         <string>naversearchapp</string>
         <string>naversearchthirdlogin</string>
       </array>
    • 세팅 후 Facebook 관련 세팅을 할 때 이 항목이 지워지는 경우가 있습니다.
    1. 네이버 문서와 같이 세팅 페이지의 info 탭의 URL Types 에 URL Schemes 를 추가합니다(공식문서를 자세히 읽어볼 것을 추천드립니다)

    2. AppDelegate 클래스에 추가되는 세팅은 매뉴얼로 하셔야 합니다.(예제 프로젝트를 참고 하세요) [application: openURL: options] 에서는 if ([url.scheme isEqualToString:@"your_apps_urlscheme"]) 을 통하여 이 함수를 사용하는 다른 액션과 구별하시면 됩니다.

      #import <NaverThirdPartyLogin/NaverThirdPartyLoginConnection.h>

      네이버 로그인만 사용하는 경우

      - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary *)options {
         return [[NaverThirdPartyLoginConnection getSharedInstance] application:app openURL:url options:options];
      }

      구글 로그인 등과 같이 사용하는 경우

      - (BOOL)application:(UIApplication *)application openURL:(nonnull NSURL *)url options:(nonnull NSDictionary<NSString *,id> *)options {
        if ([url.scheme isEqualToString:@"your_apps_urlscheme"]) {
          return [[NaverThirdPartyLoginConnection getSharedInstance] application:application openURL:url options:options];
        }
      
        return [RNGoogleSignin application:application openURL:url options:options];
      }
    3. 인증방법

    • 네이버 앱으로 인증하는 방식을 활성화하려면 앱 델리게이트 didFinishLaunchingWithOptions 메소드 내부에 다음 코드를 추가합니다.
    #import <NaverThirdPartyLogin/NaverThirdPartyLoginConnection.h>
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... }
    [[NaverThirdPartyLoginConnection getSharedInstance] setIsNaverAppOauthEnable:YES];
    • SafariViewContoller에서 인증하는 방식을 활성화하려면 다음 코드를 추가합니다.
    [[NaverThirdPartyLoginConnection getSharedInstance] setIsInAppOauthEnable:YES];

    Android

    RN >= 0.60에서는 Autolinking이 지원되어 proguard를 제외한 별도의 설정이 필요하지 않습니다.

    1. Open up android/app/src/main/java/[...]/MainApplication.java
    • Add import com.dooboolab.naverlogin.RNNaverLoginPackage; to the imports at the top of the file

    • Add new RNNaverLoginPackage() to the list returned by the getPackages() method

      List<ReactPackage> packages = new PackageList(this).getPackages();
      packages.add(new RNNaverLoginPackage());
    1. Append the following lines to android/settings.gradle:

      include ':react-native-seoul-naver-login'
      project(':react-native-seoul-naver-login').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-seoul/naver-login/android')
    2. Insert the following lines inside the dependencies block in android/app/build.gradle:

       implementation project(':react-native-seoul-naver-login')

    Additional Check in Android

    1. app/build.gradle file => defaultConfigapplicationId가 셋팅 되어 있는지 확인하세요
    android {
        compileSdkVersion 23
        buildToolsVersion "23.0.3"
        ...
    
        defaultConfig {
            applicationId "com.my.app.name"
            ...
    }
    1. Build 과정에서 WrongManifestParent 에러 발생 시 (로그에 나오는 대로)아래 코드를 app/build.gradle 에 추가해 줍니다.
    android {
        lintOptions {
            checkReleaseBuilds false
            // Or, if you prefer, you can continue to check for errors in release builds,
            // but continue the build even when errors are found:
            abortOnError false
        }
    }
    1. 필요하면 Manifest 파일에 Activity 를 추가합니다. 첫번째 항목이 있으면 중복된다는 에러가 날 수도 있습니다. (1.3 이후 기준)
    <activity
      android:name="com.nhn.android.naverlogin.ui.OAuthLoginActivity"
      android:screenOrientation="portrait"
      android:theme="@android:style/Theme.Translucent.NoTitleBar" />
    <activity
      android:name="com.nhn.android.naverlogin.ui.OAuthLoginInAppBrowserActivity"
      android:label="OAuth2.0 In-app"
      android:screenOrientation="portrait" />

    해당 코드에서 android:theme="@android:style/Theme.Translucent.NoTitleBar" 관련 오류가 발생할 시 style.xml 파일에 다음과 같이 작성합니다.

    <style name="Theme.Translucent.NoTitleBar">
        <item name="windowNoTitle">true</item>
        <item name="windowContentOverlay">@null</item>
    </style>
    1. Proguard 적용 제외 설정 네이버 아이디로 로그인 라이브러리는 ProGuard로 코드 난독화를 적용하면 안 됩니다. 네이버 아이디로 로그인 라이브러리를 사용하는 애플리케이션을 .apk 파일로 빌드할 때 ProGuard를 적용한다면, 다음과 같이 proguard-project.txt 파일을 수정해 ProGuard 적용 대상에서 네이버 아이디로 로그인 라이브러리 파일을 제외합니다. 라이브러리 파일의 이름과 폴더는 버전이나 개발 환경에 따라 다를 수 있습니다. (혹은 proguard-rules.pro)
    -keep public class com.nhn.android.naverlogin.** {
           public protected *;
    }
    

    Methods

    Func Param Return Description
    login Object Promise 로그인.
    getProfile String Promise 프로필 불러오기.
    logout 로그아웃.

    Usage

    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;

    Install

    npm i @react-native-seoul/naver-login

    DownloadsWeekly Downloads

    372

    Version

    2.1.3

    License

    MIT

    Unpacked Size

    101 kB

    Total Files

    22

    Last publish

    Collaborators

    • dooboolab