React Native cli Apple 로그인 연동하기

2024. 8. 3. 16:23·React Native/JavaScript
반응형

끝이 다가오고 있다. 

네이버, 카카오, 구글을 구현하고 이번엔 애플 로그인을 구현할 계획이다. 

 

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

 

환경 설정 

환경을 설치하는 것은 따로 올리지 않으려고 했지만 첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 올린다.

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

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

 

프로젝트 구성이 끝나면 바로 애플 로그인 라이브러리를 설치하였다. 

yarn add @invertase/react-native-apple-authentication

 

설치가 끝나면 iOS환경에서도 로그인이 필요하므로 npx pod-install 명령어를 바로 사용해서 pod 라이브러리를

추가로 설치해준다. 

npx pod-install

 

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

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

"dependencies": {
  "@invertase/react-native-apple-authentication": "^2.3.0",
  "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

애플 로그인은 라이브러리 깃허브에 그냥 떠먹여주고 있지만 내가 이런 글을 작성하는 이유는 언제가 사라질 수 있고 

확인할 수 없는 경우가 생긴다면 링크를 띡 하고 공유했을 때 곤란한 경우가 발생하기 때문에 작성하겠다.... 

 

애플 개발자 센터에서 이것저것 등록을 해줘야 한다. 

 

Identifiers 설정

identifiers를 설정해줘야 하는데 없다면 파란색 + 버튼을 눌러서 App ID를 만들어준다. 

그렇게 되면 App ID Configuration에서 Sign In with Apple을 발견할 수 있다. 

Edit을 눌러서 선택지가 Enable as a primary App ID인지 확인해준다. 

Bundle ID와 Description을 등록하고 저장을 한다. 

 

Keys 설정 

Identifiers 설정이 끝나면 Keys를 등록해줘야 한다. + 버튼을 눌러서 새롭게 등록해주자. 

Key Name과 Sign In with Apple을 선택해준다. 그리고 Configure을 들어가서 앞서 만들었던 Identifiers를

Primary App ID에서 골라준다. 끝나면 Save를 눌러준다. 

마지막으로 저장해준다. 

 

xcode 설정 

개발자 센터에서 설정이 끝나면 Xcode에서 추가로 설정을 해준다. 

another project로 작업중인 프로젝트를 선택해준다. 

target에서 프로젝트를 선택해준다. 

Signing & Capabilities 설정을 들어가서 + Capability를 눌러준다. 

그러면 Sign in with Apple이 나옵니다. 그것을 선택하면 아래에 Sign in with Apple이 생깁니다. 

 

프로젝트에서도 해당 설정으로 파일이 추가되어 있을 것입니다. 

 

이렇게 설정하면 iOS 설정은 끝이다. 

 

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

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

React Native cli Google 로그인 연동하기  (2) 2024.07.24
React Native cli Naver & Kakao 연동하기  (1) 2024.07.20
React Native cli Naver 로그인 연동하기  (2) 2024.07.17
React Native cli Kakao 로그인 연동하기  (2) 2024.07.14
React Native 개발 환경 구성하기  (2) 2024.05.27
'React Native/JavaScript' 카테고리의 다른 글
  • React Native cli Google 로그인 연동하기
  • React Native cli Naver & Kakao 연동하기
  • React Native cli Naver 로그인 연동하기
  • React Native cli Kakao 로그인 연동하기
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (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)
  • 태그

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

티스토리툴바