RN - Apple Social Login with Firebase

애플 정책에 따라, 앱이 Social Login 기능을 지원할 경우

Apple Login 을 강제하고 있습니다.

애플의 갑질은 참... 음냐 ..

 

우선, Firebase 통해 Apple 인증 및 로그인 하기 위해서는

아래 RN 가이드에 따라 진행해야 합니다

rnfirebase.io/auth/social-auth#apple

Social Authentication | React Native Firebase

 

본문은 IOS 용 Apple Auth 이고,

안드로이드 용 Apple Auth 는 별도 코드 작성이 필요하기 때문에

Platform.OS flag 로 IOS 만 Apple Auth 적용 시켰습니다.

필요하신 분은 아래 참고하세요~

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

 

installation

npm i @invertase/react-native-apple-authentication 

또는

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

cd ios  (IOS 의 경우 진행)

pod install

다음 아래 코드 적용

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

async function onAppleButtonPress() {
  // Start the sign-in request
  const appleAuthRequestResponse = await appleAuth.performRequest({
    requestedOperation: appleAuth.Operation.LOGIN,
    requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
  });

  // Ensure Apple returned a user identityToken
  if (!appleAuthRequestResponse.identityToken) {
    throw 'Apple Sign-In failed - no identify token returned';
  }

  // Create a Firebase credential from the response
  const { identityToken, nonce } = appleAuthRequestResponse;
  const appleCredential = auth.AppleAuthProvider.credential(identityToken, nonce);

  // Sign the user in with the credential
  return auth().signInWithCredential(appleCredential);
}


function AppleSignIn() {
  return (
    <AppleButton
      buttonStyle={AppleButton.Style.WHITE}
      buttonType={AppleButton.Type.SIGN_IN}
      style={{
        width: 160,
        height: 45,
      }}
      onPress={() => onAppleButtonPress().then(() => console.log('Apple sign-in complete!'))}
    />
  );
}

 

그리고, apple 실행해보면 아래 에러 로그와 함께 제대로 Auth Login 되지않습니다.

com.apple.AuthenticationServices.AuthorizationError error 1000. 

다음을 반드시 추가해줘야 합니다.

그럼 정상적으로 Sign in with Apple 동작 확인 완료.

단, Apple 은 Sign Out 이 현재 없습니다.

 

Instructions

For the purpose of demonstration, suppose we created a fresh React Native project called testAppleButton.

• Open your project in Xcode by clicking open another project, and navigating to this file: testAppleButton/ios/testAppleButton.xcodeproj

• Click testAppleButton under the target's header.

• Click Signing and capabilities to show the below noted view. Click + Capability and from the menu select Sign in with Apple which will appear at the bottom as highlighted.

• You will need to sign in as a team if you have this error message.

• If successful, your status should show no error message like below.

• Head over to Apple's developer console. Click Account in the nav bar at the top. You will either have to sign in, or create an account. Your account dashboard ought to look like this. If you do not see Certificates, IDs & profiles as an option in the left-hand sidebar, it means you have not yet enrolled in the Apple developer program which is a prerequisite for Apple product development.

• Click on Identifiers in the left-hand sidebar. Click on your project in the list, in our case, testAppleButton.

• Tick the checkbox for Sign in with Apple and click the Edit button. Select Enable as a primary App ID and click Save button.

• Click the Save button at the top of the screen.

• Please note: If you choose another app to be your primary app, you will have to go through the above noted process, up until you navigate to the Apple developer console, and choose the Group with existing primary App ID option & the testAppleButton ID.

• Click on keys in left-hand sidebar and create a new key.

• Give your new key a name. Tick the checkbox next to Sign In with Apple, and click Configure.

• Select testAppleButton as our primary app ID.

• Register your key, download it and keep it secure. Initial setup is now complete.

If you're also enabling Android support, a few extra steps are necessary.

Check out the guide for more information.

 

추가로, apple auth 적용 시 warning email 을 받게 됩니다.

반드시 수정할 필요는 없으니, app upload 마다 계속 메일을 받게됩니다.

수정을 위해서는 2가지 수정 필요.

1) 애플 개발자 웹사이트에 접속해서 Certificates, Identifiers & Profiles 항목으로 들어갑니다. 거기서 Identifiers 항목을 선택해서 내 App ID 에 해당하는 항목을 클릭합니다.

거기서 Application Services 목록을 보면 Push Notifications 관련한 설정이 녹색으로 되어있는지 확인합니다. 노란색으로 되어있다면 인증서 정보를 갱신해야 합니다. 하단의 [Edit] 버튼을 눌러서 나오는 편집창에서 [Create Certificate]를 선택해서 신규 인증서를 설정해 줍니다.

2) xcode - sign & capabilities - +버튼 클릭해서 - Push Notifications 추가

 

 

참조 by github.com/invertase/react-native-apple-authentication/blob/master/docs/INITIAL_SETUP.md