React Native cli Naver 로그인 연동하기

Expo가 아닌 React Native cli 환경에서 네이버 로그인을 구현하려고 한다. 

카카오 로그인이 필요한 사람은 다음 링크를 참고해도 좋다. 

 

작업 환경은 iOS ( Macbook ) 환경이다. 

 

환경 설치

첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 개발 환경도 함께 올린다. 

공식 사이트에서 without Framework의 내용을 보고 설치를 진행하였다. 

npx @react-native-community/cli@latest init [프로젝트명]

 

프로젝트 설치가 끝나면 네이버 로그인 라이브러리를 설치한다. 

yarn add @react-native-seoul/naver-login

 

설치가 끝나면 iOS 환경 설정을 위해서 pod 라이브러리를 설치해줘야 한다. 

npx pod-install

 

여기까지 끝나면 프로젝트에서 추가로 설치할 부분은 없다. 

지금까지의 버전을 공유하자면,

"dependencies": {
  "@react-native-seoul/naver-login": "^4.0.1",
  "react": "18.2.0",
  "react-native": "0.74.2"
},
"devDependencies": {
  "@babel/core": "^7.20.0",
  "@babel/preset-env": "^7.20.0",
  "@babel/runtime": "^7.20.0",
  "@react-native/babel-preset": "0.74.84",
  "@react-native/eslint-config": "0.74.84",
  "@react-native/metro-config": "0.74.84",
  "@react-native/typescript-config": "0.74.84",
  "@types/react": "^18.2.6",
  "@types/react-test-renderer": "^18.0.0",
  "babel-jest": "^29.6.3",
  "eslint": "^8.19.0",
  "jest": "^29.6.3",
  "prettier": "2.8.8",
  "react-test-renderer": "18.2.0",
  "typescript": "5.0.4"
},

 

다음과 같다. 

 

환경 설정 - iOS

네이버 로그인의 경우 iOS 정도만 추가적인 설정할 것이 있다. 

 

1. Launch Service Queries Schemes 추가 

로그인 시에 네이버 앱을 실행시키기 위해 info.plist에 추가해야 할 항목이 있다. 

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>naversearchapp</string>
  <string>naversearchthirdlogin</string>
</array>

 

ios폴더에 프로젝트명으로 작성된 폴더가 있을 것이다. 

여기서 info.plist에 코드를 추가시켜주면 된다. 

 

2. custom URL scheme 추가 

네이버 로그인이 완료된 뒤 다시 앱으로 돌아오기 위해서 URL scheme 설정을 추가해줘야 한다. 

Launch Service ... 머시깽과 마찬가지로 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 scheme가 네이버 개발자 콘솔에 기입한 URL Scheme와 동일해야 한다. 

 

3. AppDelegate에 URL 핸들링 로직 추가 

네이버 로그인 성공 후 다시 앱으로 돌아와서 URL처리를 위한 필요 과정이다. 

//...
#import <NaverThirdPartyLogin/NaverThirdPartyLoginConnection.h>

// ...
- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
   return [[NaverThirdPartyLoginConnection getSharedInstance] application:application openURL:url options:options];
}

 

여기서 핵심은 마지막 라인에 있는 application:application 부분이다. 

깃허브에서는 application:app 로 되어 있어서 빌드 시 계속 오류가 발생했다. 해당 방식으로 해도 되는건지

모르겠지만 명칭을 통일 시키니 문제가 없었다. 

 

환경 설정 - Android

안드로이드는 프로젝트에서 특별한 설정을 따로 해야할 것은 없습니다. 

네이버 개발자센터에서 안드로이드 앱 패키지 이름에 등록만 해주면 됩니다. android폴더 안에 있는 app폴더의 build.gredle의 namespace를 등록해주면 됩니다. 

 

사용하기

const consumerKey = '';
const consumerSecret = '';
const appName = 'testapp';
const serviceUrlSchemeIOS = 'naverlogin';

const Login = () => {  
  // ...
  
  useEffect(() => {
    NaverLogin.initialize({
      appName,
      consumerKey,
      consumerSecret,
      serviceUrlSchemeIOS,
    });
  }, []);
  
  // ...
}

 

실제 사용하기 위해서는 네이버 로그인을 진행하는 곳에서 초기화가 필요하다. 

이때 사용된 속성들의 설명을 하자면 

• consumerKey : 네이버 개발자 센터의 client ID를 입력하면 된다. 
• consumerSecret : 네이버 개발자 센터의 client Secret을 입력하면 된다. 
• appName : 어플의 이름을 입력해주면 된다. 
• serviceUrlSchemeIOS : 앞서 Custom Url Scheme를 넣어주면 된다. 
• disableNaverAppAuthIOS : 네이버앱을 사용하는 인증을 비활성화 한다. ( default: false )

여기까지 왔다면 성공이다.