[Flutter]Apple Login 구현

한상욱·2023년 12월 13일
1

Flutter

목록 보기
9/26
post-thumbnail

들어가며

지금까지 카카오, 구글 로그인에 대해서 알아보았습니다. 근데, 애플을 빼놓으면 섭섭하죠. 아시는 분들도 많겠지만, 소셜로그인을 사용하는 IOS 앱은 애플로그인이 반드시 구현되어 있어야 합니다. 그래서 이번에는 소셜로그인 중 애플로그인을 하는 법에 대해서 알아보겠습니다.

다만, 애플로그인은 반드시 Apple Developer 연회비를 내야만 사용할 수 있습니다. 그리고 저는 스토어 심사 통과가 목적이기 때문에 IOS에서의 방식만을 이번글에서 다룹니다. 추후에 Web과 Android에서 사용하는 방법에 대해서 다루도록 하겠습니다.

Apple Developer 설정

애플에서 제공하는 기능을 사용하기 위해서는 Apple Developer를 가입하고 연회비를 내야 사용할 수 있습니다. 저는 이미 Apple Developer를 가지고 있으니, 해당 과정은 생략하겠습니다. 생각보다 간단하니 금방 할 수 있을거라고 생각합니다.

가장 먼저, 기능을 사용할 앱을 등록해야 합니다.

Identifiers 옆 더하기 버튼을 클릭하여 우리가 사용할 앱을 등록해줍니다.

여기서 우리는 App IDs로 등록해주겠습니다.

Flutter 프로젝트에서 사용할것이기 때문에 앱을 선택합니다.

이제 우리의 앱 정보를 적어주면 되는데요. 왼쪽에는 설명만 적어주시면 됩니다. 오른쪽에는 번들ID를 적어줍시다. 번들은 Xcode에서 확인할 수 있습니다.

그리고 하단에서 애플로그인 기능을 찾아서 체크해줍니다.

이제 앱에서 사용할 키를 하나 생성해야됩니다. 이전에 제가 FCM 연습을 위해 생성한 키가 있는데 무시하세요.

이 키는 애플로그인을 위해서 필요합니다. 키 이름은 본인이 인지할 수 있는 이름으로 적으시면 됩니다. 그리고 이 키 생성하면 잃어버리시면 안됩니다.

이제 마지막으로 앱 ID를 등록하고 저장해줍니다.

이렇게 키 생성을 완료하였습니다.

이거는 키 잃어버리지 말라는 경고문입니다. 궁금하시면 한번 읽어보시는게 좋습니다.

프로젝트 설정

이제 Xcode로 프로젝트를 열어줍니다. 만약 Xcode로 여는법을 모른다면, 안드로이드 스튜디오를 이용해서 프로젝트를 열어서 IOS 디렉토리에 있는 아무 파일이나 잡으면 우측 상단에 Open in Xcode가 나타납니다.

여기서 애플로그인 기능을 추가할건데요. 좌측 상단에 Capabiltiy를 누르면 IOS에서 사용할 수 있는 여러 기능들이 나타납니다. 그 중 애플로그인을 찾아서 등록해주세요.

이제 모든 설정은 완료되었습니다.

sign with apple

기본적으로 여러분들의 에뮬레이터에서 애플로그인이 되어야 애플로그인을 사용할 수 있습니다. pub.dev에서 애플로그인을 위한 라이브러리를 설치하겠습니다.

여기에는 안드로이드와 web에서의 설정도 나와있는데요. 지금은 그냥 넘어갈게요.

$ flutter pub add sign_in_with_apple

이 라이브러리에서 애플로그인은 정말 간단한데요.

SignInWithApple.getAppleIDCredential(scopes: [
      // 사용할 사용자 정보 범위
    ]).then((AuthorizationCredentialAppleID user) {

      // 로그인 후 로직
    }).onError((error, stackTrace) {
      if (error is PlatformException) return;
      print(error);
    });

이렇게 작성하면 애플로그인 완료입니다. 아 그리고 로그아웃은 존재하지 않아요. 그래서 로그아웃은 여러분들이 만들어놓은 유저의 데이터를 임의로 없애주셔야 됩니다.

profile
자기주도적, 지속 성장하는 모바일앱 개발자가 되기 위해

2개의 댓글

comment-user-thumbnail
2024년 8월 22일

안녕하세요 좋은 정보 잘 보았습니다.
혹시 Web에서도 apple login 구현에 성공하셨는지요?
저는 iOS와 macOS는 성공을 하였는데 web쪽이 자꾸 실행하면 에러가 발생하네요. ㅠㅠ
에러 메시지는 typeerror: instance of 'typeerrorimpl': type 'typeerrorimpl' is not a subtype of type ‘jsobject’ 인데..
구글링을 해 본 후에 pub을 최신으로 업데이트도 해보았지만 여전히 해당 에러가 발생하네요..

계속 검색하던 중 web부분을 추후에 설명하신다는 글을 보고 질문드리게 되었습니다.
혹시라도 조언해주실 부분이 있다면 어떤 것이든 부탁드립니다.
감사합니다!

1개의 답글