React Native Apple 로그인 연동

현재 아이폰 앱심사시 Apple 로그인을 넣지 않으면 리젝 시키겠다는 강력한 Apple의지로 인해

울며 겨자 먹기로 구현해야 합니다. React Native에서 연동 부분을 설명하고자 합니다.

1. 관련된 라이브러리를 다운받으세요.

% yarn add @invertase/react-native-apple-authentication
yarn add v1.22.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @invertase/react-native-apple-authentication@1.1.2
info All dependencies
└─ @invertase/react-native-apple-authentication@1.1.2
✨  Done in 0.78s.    yarn add @invertase/react-native-apple-authentication

https://github.com/invertase/react-native-apple-authentication

invertase/react-native-apple-authentication

2. 내부 폴더 ios에서 pod install을 실행하세요. 확장자가 xcworkspace로 되어있는 파일이 생성됩니다.

% pod install
Auto-linking React Native module for target `AppleIDTestApp`: RNAppleAuthentication
Analyzing dependencies
Downloading dependencies
Installing RNAppleAuthentication (1.1.2)
Generating Pods project
Integrating client project
Pod installation complete! There are 48 dependencies from the Podfile and 39 total pods installed.

 

3. 구현하는 방법에는 두가지가 있습니다. 

    1) 라이브러리에서 제공하는 Apple 버튼을 이용한다.

    2) 커스터 마이징을 하여 Apple 연동을 구현한다.

    저는 2번을 선택하여 구현하겠습니다. 디자이너가 원하는 디자인이 있어서요..... ㅠㅠ

import appleAuth, {
  AppleButton,
  AppleAuthRequestOperation,
  AppleAuthRequestScope,
  AppleAuthCredentialState,
} from '@invertase/react-native-apple-authentication';

async function onAppleButtonPress() {
  // performs login request
  const appleAuthRequestResponse = await appleAuth.performRequest({
    requestedOperation: AppleAuthRequestOperation.LOGIN,
    requestedScopes: [AppleAuthRequestScope.EMAIL, AppleAuthRequestScope.FULL_NAME],
  });

  // get current authentication state for user
  // /!\ This method must be tested on a real device. On the iOS simulator it always throws an error.
  const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);

  // use credentialState response to ensure the user is authenticated
  if (credentialState === AppleAuthCredentialState.AUTHORIZED) {
    // user is authenticated
  }
}

     버튼을 클릭하였을때 onAppleButtonPress 함수를 호출하도록 구현 하시면 됩니다.

4. Xcode 환경설정이 필요합니다.

ios 폴더안에 확장자 xcworkspace로 되어있는걸 클릭하여 실행하세요.

+ Capability를 클릭하시면 팝업이 나오고 검색창에 sign이라고 입력하신다음 아래와 같이 Sign in with Apple을 클릭하세요.

그럼 아래와 같이 생성됩니다.

테스트 준비는 다 되었네요.

5. 실행

   콘솔창에 react-native run-ios 를 입력하여 emulator가 실행되도록 해주세요.

6. 애플 ID로그인 버튼 클릭

Settings Click -> Continue -> Continue with Password

7. 로그인 완성

 

# 주의사항

Apple ID 로그아웃은 소스코드는 있으나 실제 동작은 하지 않고 있어요.

이유는 모르겠습니다. 단지 로그아웃을 구현 할 수 없으니 화면상에서 로그아웃이 어렵다는 부분을 고객에게 알려줘야겠죠 ^^;;;