애플 소셜 로그인(1) / @invertase/react-native-apple-authentication

이번에는 애플 소셜 로그인 기능에 대해 구현해보려고 한다. 

2020년 04월 Apple 신규 가이드라인에 따르면, 소셜 로그인 서비스를 사용하는 앱은 필수적으로 Apple 로그인 역시 제공해야한다고 한다. 그렇기 때문에 기존에 구현했던 구글에 애플 버튼도 추가하여 로그인 서비스를 구현해야 하고, 추가적으로는 이를 백단에 어떤 분기점을 준 상태로 넘겨줘야 하는지도 고민해봐야할 것 같다.

https://developer.apple.com/kr/app-store/review/guidelines/#sign-in-with-apple 

(애플 개발자 계정(Apple Developer)에서 내 계정에 'Sign In With Apple' 기능을 추가하여 Xcode 상에 적용하는 과정은 생략하겠다.)

 

Apple Social Login 

애플 로그인은 iOS 디바이스에만 구현이 될 것이며, 의존성 라이브러리는 다음을 사용할 계획이다. (https://github.com/invertase/react-native-apple-authentication)

GitHub - invertase/react-native-apple-authentication: A React Native library providing support for Apple Authentication on iOS a

 

Installation

설치 과정은 늘 진행하듯이 yarn add ~ 와 pod install 로 완료해준다.

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

(cd ios && pod install)

추가적으로, Apple Login Token은 JWT(Json Web Token) 기반이기 때문에 받아온 identityToken을 디코딩해주기 위해 필요한 라이브러리로서 'jwt-decode'를 설치해줬다.

npm install jwt-decode

 

Code.

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

/*
...
*/
const AppleSignIn = async () => {
  const appleAuthRequestResponse = await appleAuth.performRequest({
    // performs login request
    requestedOperation: appleAuth.Operation.LOGIN,
    requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
  });
  //get user auth
  const credentialState = await appleAuth.getCredentialStateForUser(
    appleAuthRequestResponse.user,
  );
  if (credentialState === appleAuth.State.AUTHORIZED) {
    console.log('Apple Login Test');
  }
};

로그인 로직에 대한 함수를 불러오는 방식은 생각보다 간단하다. 그리고 AppleButton을 배치해줬다.

return (
    <Container>
      <Title>Login View</Title>
      <Button title="Sign In" onPress={() => navigation.navigate('SignUp')} />
      <GoogleSigninButton
        style={{width: 192, height: 48}}
        size={GoogleSigninButton.Size.Wide}
        color={GoogleSigninButton.Color.Dark}
        onPress={GoogleSignIn}
      />
      <AppleButton
        buttonStyle={AppleButton.Style.WHITE}
        buttonType={AppleButton.Type.SIGN_IN}
        style={{
          width: 160,
          height: 45,
        }}
        onPress={() => Alert.alert('apple sign in test')}
      />
    </Container>
  );