끝이 다가오고 있다.
네이버, 카카오, 구글을 구현하고 이번엔 애플 로그인을 구현할 계획이다.
작업 환경은 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 |