[Flutter] [Firbase] 간편 로그인 구현하기(Apple🍎)

간편 로그인 구현하기(Apple🍎)

저번 시간에는 Flutter에서 카카오 간편 로그인을 구현하는 방법과 Firebase Auth에 카카오를 연동하는 방법을 학습해봤습니다. 이번에는 Apple 로그인을 구현해보고 Firebase Auth에 등록해주겠습니다.

Firebase 인증 제공업체 추가하기

제일 먼저 파이어베이스 프로젝트에 들어가서 인증 제공업체를 추가하겠습니다.

아래 이미지를 보시면 저번에 했던 kakao, Apple, 익명이 등록된 것을 볼 수 있다.

그리고 Apple 로그인 방법을 등록할 때 아래 처럼 사용 설정 버튼을 활성화 해주고 맨 아래 승인 콜백 URL을 복사하면 됩니다.

이러면 파이어베이스에서 필요한 작업은 끝났습니다.

Apple Identifier 등록

아쉽게도 애플 로그인을 사용하려면 애플 개발자 계정이 필요합니다..!

만약 Sign in with Apple이 활성화되지 않는다면 개발자 계정이 활성화되지 않은 경우도 있습니다.

애플 개발자 사이트에서 계정에 가게 되면 아래 이미지 처럼 나오게 되는데 인증서를 눌러 주시면 됩니다.

그 다음 Identifiers 추가하기 버튼을 눌러 새로운 App ID를 생성합니다. 기존에 만들어둔 아이디가 있다면 수정하기로 들어가 다음 작업을 진행하시면 됩니다.

Register a new identifier 항목은 App IDs를 선택하고 다음으로 넘어갑니다.

타입은 App을 선택합니다.

이제 App ID 정보를 입력합니다. Description에는 아이디에 대한 간략한 설명을 추가하고, Bundle ID에는 현재 구현 중인 앱의 번들 아이디 값을 찾아서 입력합니다. 만약 다른 아이디 값을 입력하면 동작이 되지 않습니다.

그리고 계속하기 버튼을 누르면 사용할 기능에 대한 선택지가 나오는데 여기서 Sign In with Apple을 체크하고, Edit 버튼을 누릅니다.

그러면 아래 이미지가 나오게 되는데 첫 번째는 Enable as a primary App ID를 선택하고, 두 번째 입력란에는 맨 처음에 파이어베이스 설정 시 복사해 둔 콜백 URL을 입력하고 App ID 생성을 완료합니다.

위의 작업들을 모두 하셨다면 Apple Identifier 등록 작업은 모두 끝입니다.

Xcode 프로젝트 로그인 기능 추가

이제 프로젝트내에서 Sign in with Apple Capability를 추가해주면 됩니다.

아래 이미지에 있는 숫자 순서대로 들어가셔서 Sign in with Apple를 검색하시면 나옵니다.

만약 개발자 계정이 없으면 Sign in with Apple이 나오지 않을 수 있습니다.

애플 간편 로그인 코드 구현

모든 설정은 마무리가 되었습니다..!

이제 코드를 구현해서 로그인 기능이 잘 작동되는지 확인하면 됩니다.

우선 sign_in_with_apple Package를 프로젝트에서 추가해줍시다.

아래 명령어로 받을 수 있습니다.

flutter pub add sign_in_with_apple

2024.12.24일 기준으로 sign_in_with_apple 6.1.4 Version이 제일 최신 버전인데 이 버전은 3. 5. 1 version이 필요하다고 하네요. 저는 Dart SDK version이 3. 4. 3.인데.. 🥲

그래서 저는 dependecies에 sign_in_with_apple: ^6.1.2 을 추가하였습니다.

다행히 지금 제 버전과 맞아 문제가 없네요!

코드 입력

저는 간단하게 에러 처리를 해주었습니다. 추후에 Result 패턴을 사용하여 에러 핸들링을 다뤄보려 합니다

  Future<void> signInWithApple() async {
    try {
      final AuthorizationCredentialAppleID appleCredential = await SignInWithApple
          .getAppleIDCredential(
        scopes: [
          AppleIDAuthorizationScopes.email,
          AppleIDAuthorizationScopes.fullName,
        ],
      );

      final OAuthCredential credential = OAuthProvider('apple.com').credential(
        idToken: appleCredential.identityToken,
        accessToken: appleCredential.authorizationCode,
      );

      await FirebaseAuth.instance.signInWithCredential(credential);
    } on SignInWithAppleAuthorizationException catch (appleError) {
      throw Exception(
          'SignInWithAppleAuthorizationException Authentication failed: ${appleError.message}'); // 에러를 던짐
    } catch (error) {
      throw Exception('Apple Authentication failed: $error');
    }
  }

📱 화면

아래 화면을 보면 잘 작동되는 것을 확인할 수 있다! Firebase에 들어온 것을 확인해보자.

잘 들어온 것을 볼 수 있습니다. 👍

기타

Andrioid와 Web은 따로 설정을 해줘야 하는데 특히 Web은 유효한 Domain 주소가 필요한데 서버를 생성해야 할 것 같아 보입니다. 추후 다른 작업이 마무리가 되면 작업을 진행해보겠습니다~