react-native-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 를 추가합니다.
<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" />
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
import { NaverLogin, getProfile } from 'react-native-naver-login';
// 현재 라이브러리는 3가지의 브릿지 함수로 구현되어 있습니다.
// 1. login
// 2. getProfile
// 3. naverLogin
// NaverLoginExample에 보시면 어떻게 쓰는지 확인할 수 있습니다. 간략한 코드는 아래 기재하겠습니다.
// 우선 네이버 로그인에 필요한 값들을 설정합니다.
console.log('Naver Login');
const initials = {
kConsumerKey: 'VN6WKGFQ3pJ0xBXRtlN9',
kConsumerSecret: 'AHBgzH9ZkM',
kServiceAppName: 'dooboolab',
kServiceAppUrlScheme: 'dooboolaburlscheme', // only for iOS
};
const naverLogin = (props) => {
return new Promise(function (resolve, reject) {
console.log(props);
NaverLogin.login(props, (err, token) => {
console.log(`\n\n Token is fetched :: ${token} \n\n`);
if (err) {
reject(err);
return;
}
resolve(token);
});
});
};
const naverLogout = () => {
NaverLogin.logout();
}
const getNaverProfile = async(token) => {
let result = null;
try {
result = await getProfile(token);
} catch (err) {
console.log('err');
console.log(err);
}
return result;
}
// 위와 같이 함수를 짜주고 아래서 사용한다.
onNaverLogin = async() => {
try {
const result = await naverLogin(initials);
console.log('token: ' + result);
if (result) {
console.log('yes result');
const profileResult = await getNaverProfile(result);
console.log('profile');
console.log(profileResult);
if (profileResult.resultcode === '024') {
Alert.alert('로그인 실패', profileResult.message);
return;
}
result.profile = profileResult;
// 성공시 다음 페이지로 넘어간다.
this.props.navigation.navigate('Second', {
result,
profileResult,
});
} else {
console.log('no result');
}
} catch (err) {
console.log('error');
console.log(err);
}
}