Search
⏲️

flutter firebase Sign in with apple 애플 로그인 구현 (iOS Version)

생성일
2021/08/03 12:33
태그
Flutter
속성
Flutter third-party sign-in 2탄! Sign in with apple 입니다.
1편 구글 로그인은 여기서 볼 수 있습니다.
이번 글에서는 iOS 에서의 Sign in wth apple 만 다룹니다. 안드로이드는 다음에요... 안할 수도 있고..
왜냐면 Android 에서 Apple 로그인을 붙이는 과정은 매우 복잡하고,,, 사실 안드로이드 사용자들은 애플로그인 안쓸거거든요... 정말로 그 복잡도 (service id, key, firebase hosting) 를 가져가면서 얻을만한 가치는 없다고 생각합니다.

Dependency

flutter pub add sign_in_with_apple
Bash
복사

UI

Apple Login 버튼을 만들어줍니다. Apple의 경우 로그인 버튼에 규정이 있습니다. 색상과 로고가 정해져있어서 이를 따르지 않으면 심사 단계에서 reject을 먹습니다 :)
디자인 가이드는 다음에 따르고 이번엔 우선 기능 구현부터 갑니다.

Firebase 프로젝트 설정

Authentication 애플 로그인 활성화

Firebase Authentication에서 Apple 로그인을 활성화합니다. 하단의 콜백URL은 나중에 필요하니 메모장에 적어둡니다. 이 과정을 Staging, Production에 반복합니다.

Firebase Hosting 활성화

Firebase Hosting을 활성화 합니다. 추후 애플 로그인 시 인증에 필요하 작업을 할 때 사용합니다.
도메인은 미리 메모해둡시다.

Apple 개발자센터 설정

Identifier 설정

iOS앱에서 애플 로그인을 사용할 수 있도록 애플 개발자 센터에 등록해야 합니다. 이미 출시된 앱에 기능을 출시하는 것이니 신규 App ID 를 추가하지 않고 기존 appID를 클릭해서 애플 로그인 기능만 추가합니다.

XCode 설정

프로젝트 설정에서 +Capability 를 클릭합니다
Capabilities목록에 Sign in with Apple이 추가된 것을 확인합니다.
참 쉽죠?

Example

AuthProvider.dart

import 'package:sign_in_with_apple/sign_in_with_apple.dart'; ... Future<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, ); final authResult = await FirebaseAuth.instance.signInWithCredential(oauthCredential); setUser(authResult.user); return Future<void>.value(); } catch(error) { setUser(null); return Future<void>.value(); } }
Dart
복사
계속 사골 우려먹고 있는 AuthProvider.dart 파일에 애플 로그인을 위함 함수를 추가합니다.

LoginPage.dart

Padding( padding: EdgeInsets.symmetric(horizontal: 40), child: SizedBox( child: ElevatedButton( onPressed: () => { setState(() => { isLoading = true }), authProvider.signInWithApple().then((val) => { 👈👈👈👈👈 여기보세요~~ setState(() => { isLoading = false }) }) }, child: Text('Apple 로그인', style: TextStyle(fontSize: 18),), style: ButtonStyle(backgroundColor: MaterialStateProperty.all<Color>(Colors.red), ), ), width: double.infinity, height: 48, ) ),
Dart
복사
여기서 문제
iOS만 애플 로그인을 구현한다고 했습니다. 그러면 "Apple 로그인" 버튼은 Android 에서 어떻게 동작할까요?
네 동작안하고, 그러니까 iOS에서만 애플 로그인 버튼이 보이도록 해야합니다.
Platform.isIOS ? SizedBox(height: 12,) : SizedBox()
Dart
복사
Platform을 활용하면 됩니다. false인 경우 Widget을 그리지 않는 방법으로는 SizeBox를 넣었는데, Best Practice가 있다면 공유해주세요 :)

FYI

Sign in with Apple은 iOS13부터 공식 지원됩니다. iOS13 미만 버전에서도 웹을 통한 로그인이 가능하지만, 안드로이드에서 구현하는 것 처럼 복잡합니다.
깔끔하게 iOS target version을 13 으로 올리는게 정신건강에 좋습니다.