React Native cli Naver 로그인 연동하기

2024. 7. 17. 14:41·React Native/JavaScript
반응형

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 )

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

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'React Native > JavaScript' 카테고리의 다른 글

React Native cli Google 로그인 연동하기  (2) 2024.07.24
React Native cli Naver & Kakao 연동하기  (1) 2024.07.20
React Native cli Kakao 로그인 연동하기  (2) 2024.07.14
React Native 개발 환경 구성하기  (2) 2024.05.27
[React Native] Chat GPT로 개발하기 - 10일차  (0) 2023.09.10
'React Native/JavaScript' 카테고리의 다른 글
  • React Native cli Google 로그인 연동하기
  • React Native cli Naver & Kakao 연동하기
  • React Native cli Kakao 로그인 연동하기
  • React Native 개발 환경 구성하기
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    바질
    next.js
    typescript
    타일러영어
    바질 키우기
    자바스크립트
    타입스크립트
    ReactNative
    Docker
    Node.js
    CCNA
    영어회화
    javascript
    영어독학
    리얼클래스
    react
    redux
    프로그래머스
    ChatGPT
    네트워크
    네이버 부스트캠프
    Babel
    webpack
    다이소
    리액트
    리얼학습일기
    알고리즘
    덤프
    식물
    CSS
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
React Native cli Naver 로그인 연동하기
상단으로

티스토리툴바