플러터에 Firebase Auth로 애플 로그인(Sign in with Apple) 구현하기

이번에는 플러터로 애플 로그인을 구현해볼려고 합니다.

 

다만 애플 로그인을 안드로이드에서 구현할 경우에는 Apple ServiceID, Firebase Hosting 등을 설정해야하기 때문에 여기서는 iOS에서만 로그인을 구현하도록 하겠습니다. 왜냐면 안드로이드 사용자들은 애플 로그인을 어차피 거의 안쓰니까요.

 

애플 로그인을 구현하기 위해서는 먼저 Apple Developer Program을 구매하셔야 합니다.

이곳을 눌러 자세한 정보를 확인할 수 있습니다.

 

저희는 애플 로그인을 Firebase와 연동하여 구현할 계획입니다.

만약 Firebase 프로젝트가 없다면 새로 생성해주시기 바랍니다. 프로젝트 생성은 여기에서 따로 다루지는 않겠습니다.

 

Firebase의 카테고리에서 'Authentication'을 선택해줍니다.

화면에서 'Sign-in method'를 클릭한 후 '새 제공업체 추가' 버튼을 눌러준 후 Apple을 선택합니다.

사용 설정 스위치를 켜준 후 저장을 눌러줍니다. 여기서 다른 설정은 진행하지 않습니다.

 

다음으로 아래 링크되어 있는 두 개의 라이브러리를 프로젝트에 추가해줍니다. Firebase와의 연동을 위해 'firebase_auth', 애플 로그인 구현을 위해 'sign_in_with_apple' 라이브러리가 필요합니다.

firebase_auth | Flutter Package

sign_in_with_apple | Flutter Package

반응형

---

다음으로 Apple Developer 홈페이지에서 어플리케이션 ID를 등록해줍니다. 이곳을 눌러 사이트로 들어갈 수 있습니다.

사이트에 있는 파란색 + 버튼을 눌러줍니다.

많은 ID 종류중에서 'App IDs'를 누른 후 'Continue' 버튼을 눌러줍니다.

앱 종류에서 'App'을 누른 후 'Continue' 버튼을 눌러줍니다.

여기서 Description에는 앱 이름(영어로 하는걸 추천!), Bundle ID에는 'com.companyname.appname'와 같은 개발하고 있는 앱의 ID를 적어줍니다.

그 후 Capabilities 리스트에서 'Sign in with Apple'을 찾아 체크박스를 눌러 활성화를 진행합니다.

그 후 홈페이지 오른쪽 상단에 있는 Continue 버튼을 누르고, Register 버튼을 눌러 ID 등록을 완료합니다.

---

'Signing & Capabilities' 탭에서 '+Capability' 버튼을 누른다음, 'Sign in with Apple'을 찾아 클릭하여 추가해줍니다.

 ㄴ 애플 로그인 기능이 추가된 모습.

---

이제 Flutter 코드를 추가하여 Apple 로그인 기능을 생성합니다.

 

Apple 로그인 버튼

GestureDetector(
  onTap: () {
    if (Platform.isAndroid) {
      Get.snackbar('애플 로그인 오류', '현재 안드로이드 기기에서 \n애플 로그인은 지원되지 않습니다.', snackPosition: SnackPosition.BOTTOM);
    } else if (Platform.isIOS) {
      signInWithApple();
    }
  },
  child: Container(
    width: _width * 0.842,
    height: _height * 0.08,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.black,
    ),
  ),
),

플러터에서 제공하는 Platform.isXXX 함수를 활용하여 iOS에서만 기능이 동작하도록 설정합니다.

 

로그인 버튼 같은 경우 애플에서 제시하는 가이드라인에 따라 디자인을 설정해주세요.

출시하는 IOS 앱에 애플 로그인이 사용된다면 반드시 지켜야 할 사항

 

 

Apple 로그인 진행 함수.

void signInWithApple() async {
    try {
      final appleCredential = await SignInWithApple.getAppleIDCredential(
        scopes: [
          AppleIDAuthorizationScopes.email,
          AppleIDAuthorizationScopes.fullName,
        ],
      );
 
      final oauthCredential = OAuthProvider("apple.com").credential(
        idToken: appleCredential.identityToken,
        accessToken: appleCredential.authorizationCode,
      );
 
      UserCredential _authResult = await FirebaseAuth.instance.signInWithCredential(oauthCredential);
 
      updateAccount(); //실제 로그인/회원가입을 진행할 떄 필요한 코드를 작성하시면 됩니다.
    } catch(error) {
      print(error);
    }
}

 

이제 실제로 실행을 해보면 정상적으로 로그인이 작동하는 모습을 확인할 수 있습니다.

 

---

Reference

1. https://www.kyulabs.app/cdeb8cb1-55ae-438e-8b6b-e80faa742d46