[React Native] Apple Login 애플 로그인 구현하기 / Sign in with Apple

성공적인 루틴 관리를 원하시나요? 지금 바로 스토어에서 "루빗"을 검색해보세요!

[ 제가 직접 개발에 참여한 어플입니다 :) ]

 

루빗 홈페이지

플레이스토어

앱스토어

✨ 와디즈 펀딩 오픈예정 구경하기 ✨

와디즈 오픈예정 | 내 손 안의 매니저 루빗 : 습관, 하루 루틴, 할 일까지 관리해드릴게요

---

 

- 환경

react-native: 0.61.5

 

- 목적

iOS 앱에 소셜로그인(카카오, 네이버 등)이 포함되어있다면, 애플로그인도 꼭 포함해야함. 귀찮다!!!!!

https://developer.apple.com/kr/news/?id=09122019b

Apple로 로그인에 대한 신규 가이드라인 - 뉴스 - Apple Developer

아무튼 그래서 애플 로그인을 추가해볼 예정이다.

 

 

- 라이브러리

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

invertase/react-native-apple-authentication

https://github.com/invertase/react-native-apple-authentication/blob/master/docs/interfaces/_lib_index_d_.rnappleauth.appleauthrequestoptions.md#optional-user

invertase/react-native-apple-authentication

interface

- 설치

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

cd ios && pod install

 

- Usage

1) 애플로그인 버튼 만들고 (이 라이브러리에도 자체적으로 애플로그인 버튼 제공. 나는 커스텀으로 만듦!)

 

2) Implement the login process. 로그인 로직 구현해보자.

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
  const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);

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

 

2-1) 에러1

💢AppleLogin Error: The operation couldn’t be completed. (com.apple.AuthenticationServices.AuthorizationError error 1000.)

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

 

시뮬레이터에선 안될 수도 있다고 함. 실제 아이폰 기기로 실행해보자!!!!

안된다.

 

다른 솔루션

xcode에서 capabillities에 sign in with apple을 추가해보자! (이건 진짜 되겠지?)

된다! 계속 실제 device에서 진행중.

 

 

로그인 로직 아주 잘된다.

identityToken이 유저마다 다르게 가지고 있는 고유한 값이다.

 

 

3. 로그아웃은 지원하지 않는다.

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

Logout launching Apple Sign In process · Issue #10 · invertase/react-native-apple-authentication

개발자가 자체적으로 로그아웃을 만들어야 함. 애플에 문의 보냈지만 적절한 답변을 얻지 못한 모양이다.

이건 각자 알아서 하자!

 

 

- 출처

https://byline.network/2020/02/21-78/

편의인가 갑질인가…4월부터 ‘애플로 로그인’ 의무화 - Byline Network

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

Auth failed with com.apple.AuthenticationServices.AuthorizationError error 1000 · Issue #9 · invertase/react-native-apple-authen