안녕하세요 개발자 베베입니다.
저번 포스팅에 이어서 플러터 ios 애플 로그인 구현 마지막 단계에 대해 알아보도록 하겠습니다.
이전 포스팅
1. Xcode에서 Apple Sign In 활성화
빌드될 앱 파일에 애플 로그인의 기능이 사용된다는 정보를 넣어주기 위해 Xcode에서 애플 로그인 기능을 활성화해줘야 합니다. /ios 디렉토리를 오른쪽 클릭으로 눌러서 Xcode를 열고 아래 과정을 거쳐 애플 로그인 기능을 활성화 해줍니다.
과정을 잘 따라오시기 바랍니다.
- Xcode 좌측 Runner를 클릭합니다. 클릭하면 Xcode 중간에 Runner 파일이 열립니다.
- 중간에 [Targets] -> Runner를 선택하면 빌드에 대한 설정 화면이 뜹니다. 그중에서 Signing & Capabilities를 선택합니다.
- All을 누릅니다. 지금부터 적용하는 기능을 모든 빌드 모드에서 동일하게 설정하겠다는 의미입니다.
- 앱을 빌드할 때 서명용 Team ID를 선택해줍니다.
- + Capability를 눌러서 애플 로그인 기능을 활성화시켜줘야 됩니다.누르면 아래와 같은 창이 뜹니다.
sign 이라고 치면 [Sign in with Apple]이 검색되는데, 클릭하셔서 추가해줍니다.
애플 로그인을 위한 모든 설정이 끝났습니다. 이제부터는 애플 로그인을 위한 코드를 작성해보도록 하겠습니다.
2. 코드 작성
먼저 애플 로그인을 위한 플러그인 하나를 설치해주도록 하겠습니다. 제가 사용할 플러그인 패키지는 apple_sign_in 입니다.
이 패키지를 사용해서 애플 로그인을 실행시키게 되면 IOS 앱에서는 아무 문제 없이 작동이 되지만 Android에서는 실행되지 않습니다. 그럼에도 제가 이 패키지를 사용하는 이유는 이 패키지는 Android에 대한 부분을 과감히 포기했기 때문에 잔고장이 적습니다.
솔직히 안드로이드 유저가 애플 로그인을 쓸 이유도 없고, 애초에 애플 로그인을 구현하는 이유가 애플에서 강제했기 때문이라 안드로이드에 구현할 이유는 저같은 경우에는 없더라구요.
어쨋든, pubspec.yaml을 열어서 패키지를 추가해줍니다.
애플 로그인 창을 띄우는 함수를 작성해줍니다. 아래 signInWithApple() 함수를 호출하게 되면 애플 로그인 창이 뜹니다. (참고로 애플 로그인은 ios 13이상부터 지원합니다)
import 'package:apple_sign_in/apple_sign_in.dart';
import 'package:firebase_auth/firebase_auth.dart';
Future signInWithApple() async {
// 애플 로그인은 IOS 13부터 지원한다
bool isAvailable = await AppleSignIn.isAvailable();
if (!isAvailable) {
return null;
}
AuthorizationResult result;
// 로그인 요청
try {
result = await AppleSignIn.performRequests([
AppleIdRequest(requestedScopes: [Scope.email, Scope.fullName])
]);
} catch (e) {
print(e);
return null;
}
switch (result.status) {
// 성공
case AuthorizationStatus.authorized:
final oAuthProvider = OAuthProvider('apple.com');
final oAuthCredential = oAuthProvider.credential(
idToken: String.fromCharCodes(result.credential.identityToken),
accessToken:
String.fromCharCodes(result.credential.authorizationCode),
);
// 파이어베이스 인증
try {
UserCredential userCredential =
await FirebaseAuth.instance.signInWithCredential(oAuthCredential);
return userCredential;
} catch (e) {
return null;
}
break;
// 에러
case AuthorizationStatus.error:
print("Sign in failed: ${result.error.localizedDescription}");
break;
// 유저가 취소한 경우
case AuthorizationStatus.cancelled:
print('User cancelled');
break;
}
return null;
}
signInWithApple 함수에 대한 코드 설명을 해드리자면, 먼저 6번째 줄에서 사용자의 기기가 애플 로그인이 가능한 상태인지 확인합니다.
애플 로그인은 ios 13 부터 지원하기 때문에, 반드시 사용 전에 AppleSignIn.isAvailable() 함수로 체크를 해줘야 합니다.
bool isAvailable = await AppleSignIn.isAvailable();
실질적으로 애플 로그인 창을 띄우는 코드는 15번째 줄 performRequests입니다.
await AppleSignIn.performRequests( ~ );
이 함수는 애플 로그인을 한 후에 얻을 수 있는 정보의 범위를 인자 값으로 받습니다. 보통 이메일 주소랑 이름을 요청 값으로 넣어줍니다.
애플 로그인이 정상적으로 수행되면 거기서 끝이 아닙니다. 이 인증 값을 통해서 OAuth 통신을 해주어야 하는데, 여기서 파이어베이스 인증의 도움을 받습니다. 구글 로그인같은 경우에는 전용 인증 함수가 있었지만 애플은 따로 없어서 oAuth 값으로 인증해주어야 합니다.
FirebaseAuth.instance.signInWithCredential(oAuthCredential);
파이어베이스 인증까지 완료되면 파이어베이스 프로젝트에 애플 로그인 인증 계정이 생성됩니다.
3. 예시 프로젝트
버튼을 누르면 애플 로그인을 진행하는 간단한 플러터 프로젝트를 작성해보았습니다.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
home: MyHomePage(),
);
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Memo'),
),
body: Container(
width:double.infinity,
height:double.infinity,
child:Center(
child:RaisedButton(
onPressed:(){
signInWithApple().then((value){
if(value!=null){
print(value);
}else{
print('failed');
}
});
}
),
),
),
);
}
}
여기서는 그냥 RaisedButton을 누르면 애플 로그인이 수행되도록 해놨지만, 애플 로그인은 반드시 애플에서 지정한 규격의 UI 버튼에서 수행되어야만 합니다. 만약 그렇지 않을 경우 앱 심사가 거부됩니다..;
애플 로그인 버튼 UI 지침에 대한 내용은 아래 포스팅에 설명해두었습니다.
여기까지 플러터에서 애플 로그인을 사용하는 방법에 대해 알아보았습니다. 도움이 되셨다면 공감과 댓글 부탁드리겠습니다. ^^