react-native-naver-login
Deprecated!
해당 모듈은 @react-native-seoul/naver-login으로 이전 되었습니다.
React Native 네이버 로그인 라이브러리 입니다. 세부 예제는 NaverLoginExample 폴더 안의 Example 프로젝트를 확인해주시면 감사하겠습니다.Repository 주소: https://github.com/react-native-seoul/react-native-naver-login
Getting started
$ npm install react-native-naver-login --save
Mostly automatic installation
$ react-native link react-native-naver-login
Manual installation
iOS
프로젝트 링크(Xcode project 와 Build Phase에 libRNNaverLogin.a 파일 링크)는 react-native link 명령어를 통하여 세팅이 되며 추가적인 세팅, 주의사항은 아래와 같습니다.
- [info.plist] 파일 LSApplicationQueriesSchemes 항목에 아래 항목을 추가합니다.
- naversearchapp
- naversearchthirdlogin
- 세팅 후 Facebook 관련 세팅을 할 때 이 항목이 지워지는 경우가 있습니다.
- 네이버 문서와 같이 세팅 페이지의 info 탭의 URL Types 에 URL Schemes 를 추가합니다.
- AppDelegate 클래스에 추가되는 세팅은 매뉴얼로 하셔야 합니다. [application: openURL: options] 에서는 if ([url.scheme isEqualToString:@"your_apps_urlscheme"]) 을 통하여 이 함수를 사용하는 다른 액션과 구별하시면 됩니다.
- NLoginThirdPartyOAuth20InAppBrowserViewController.m 파일의 다음 2군데에서 Crash 가 날 때가 있습니다. 이 부분은 웹뷰를 띄울 경우 언어별 메시지를 표시하는 부분입니다만 에러가 나는 경우가 있어 현재는 영어로 표시했습니다.
bannerMessage.text = kNaverAuthBannerMessage;
NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc] initWithString:kNaverAuthBannerDownloadLink];
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.dooboolab.naverlogin.RNNaverLoginPackage;
to the imports at the top of the file - Add
new RNNaverLoginPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-naver-login' project(':react-native-naver-login').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-naver-login/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-naver-login')
Additional Check in Android
- Check if applicationId is set in your defaultConfig in app/build.gradle file.
android {
compileSdkVersion 23
buildToolsVersion "23.0.3"
...
defaultConfig {
applicationId "com.my.app.name"
...
}
- 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
}
}
- 필요하면 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" />
- 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
- 실제 예는 다음 소스를 참고하세요.
- https://github.com/dooboolab/react-native-naver-login/blob/master/NaverLoginExample/src/components/pages/First/index.js
; // 현재 라이브러리는 3가지의 브릿지 함수로 구현되어 있습니다.// 1. login// 2. getProfile// 3. naverLogin// NaverLoginExample에 보시면 어떻게 쓰는지 확인할 수 있습니다. 간략한 코드는 아래 기재하겠습니다. // 우선 네이버 로그인에 필요한 값들을 설정합니다.console;const initials = kConsumerKey: 'VN6WKGFQ3pJ0xBXRtlN9' kConsumerSecret: 'AHBgzH9ZkM' kServiceAppName: 'dooboolab' kServiceAppUrlScheme: 'dooboolaburlscheme' // only for iOS; const naverLogin = { return { console; NaverLogin; };}; const naverLogout = { NaverLogin;}; const getNaverProfile = async { let result = null; try result = await ; catch err console; console; return result;}; // 위와 같이 함수를 짜주고 아래서 사용한다.onNaverLogin = async { try const result = await ; console; if result console; const profileResult = await ; console; console; if profileResultresultcode === '024' Alert; return; resultprofile = profileResult; // 성공시 다음 페이지로 넘어간다. thispropsnavigation; else console; catch err console; console; };