[ Flutter / 애플 로그인 ] Firebase를 이용한 SignIn With Apple 구현

 

 

 

 

Flutter 소셜 로그인을 개발중인데,

듣기론 ( WEB / Android / ios 13버전 이하 지원의 경우 )Apple 로그인이 난이도 헬이라는 이야기를 들었다..😱

하지만 나는 ios 13 이상 지원에 ios Apple 로그인만 지원하기 때문에 굉장히 간단하게 구현할 수 있었다!😍

 

 

이제 차근 차근 애플 로그인에 대해 뿌셔보도록 하겠다..!

🔥 준비하기


😙 ios 13.0 이상의 애플 로그인만 지원할 경우 
- Firebase에 ios 프로젝트가 생성돼 있어야 한다.
- 애플 개발자 프로그램에 유료 회원으로 가입돼 있어야 한다.

😨 ios 13.0 이하 버전 및 web, Android 애플 로그인을 지원 할 경우  
- Firebase에 ios 프로젝트가 생성돼 있어야 한다.
- 애플 개발자 프로그램에 유료 회원으로 가입돼 있어야 한다.
- App Service ID 및 Key 필요.
- 애플 서버의 콜백을 받을 외부 서버가 필요하지만, 플러그인을 사용하면 Glitch를 이용하여 서버리스로 구현 가능.

 

 

전체 Flow 는 아래의 링크들을 바탕으로 진행하면 된다.

👉 Pub Dev의 sign_in_with_apple 참고

👉 FlutterFire Social Auth - Apple 참고

 

 

 

 

 

---

 

 

🧚🏻‍♂️  플러터 애플 로그인 기본 세팅 시간  🧚🏻‍♂️

 

 

 

 

* 아래의 내용에 해당되는 전체 세팅 방법은 👉Setup-Register an App ID 참고

sign_in_with_apple | Flutter Package

 

 

 

 

 

 

1. Apple Developer )  App ID를 등록한다. (애플 로그인을 이용할 App ID 등록)

 

Apple개발자 페이지 -> Certificates, Identifiers & Profiles / Identifiers 클릭하여 새로운 App ID 등록.

- "Register an App ID"을 클릭

- "App IDs"를 선택하고 "Continue" 클릭.

- "Description"과 "Bundle ID"를 설정하고, "Sign In with Apple" 로그인 기능 선택.

-  일반적으로 여기서는 "Enable as a primary App ID"의 기본 설정으로 충분.

- "Continue"클릭 후  "Register"을 클릭하여 App ID 생성 완료.

 

 

 

 

 

 

 

 

 

2. Apple Developer ) 웹 or Android 통합을 위한Service ID 생성.

나는 <IOS 13.0 이하 >에서만 애플 로그인을 지원할거라서 원래 패스지만, 글 대충 읽고 따라해버림.ㅎ.

 

애플 서버와 통신을 위한 Key 생성 화면 - Apple Developer

Sign in with Apple 체크 후 오른쪽 Configure 버튼을 클릭하여, 위의 과정에서 생성된 앱 id를 선택한다.

그리고 Continue 를 클릭하면 키를 다운로드 할 수 있다. 상단에 키 다운로드에 대한 안내문이 나오는데,

키를 다운로드한 후에는 서버 복사본이 제거되므로 키를 다시 다운로드 할 수 없다고 한다.

당장 키를 다운받을 준비가 안돼있다면 Done을 클릭 후 나중에 다운로드 하라는 안내가 나온다.

나는 바로 다운로드 했지만, 지금은 ios13 이상만 애플 로그인을 지원하기 때문에 쓸 일 없음.. 나중엔 쓰겠지..

 

 

 

 

 

 

 

 

 

3. Apple Developer ) 앱에 Apple로 로그인을 사용 설정하기.

      ( Apple 개발자 사이트의 Certificates, Identifiers & Profiles 페이지에서 설정.)

 

 

 

 

 

 

 

 

 

 

4. Firebase ) Firebase Authentication에서 Apple 로그인 활성화.

 

Firebase / Myproject(내 프로젝트 명) / Authentication / Sign-in method

 

 

 

 

 

 

 

 

3. Xcode ) Xcode에서 Apple Login 기능 활성화

 

Xcode에서 Capability를 더블 클릭 하면 아래처럼 나오는데,

여기에 아래의 이미지처럼 Sign in with Apple 서치해서 더블 클릭하면 적용된다.

 

따란 ! 기본 셋팅 완료 ✨

 

 

 

 

 

 

 

 

 

 

👉 애플 개발자 계정으로 해야할 것들 정리.

•   App ID를 등록한다. (애플 로그인을 이용할 App ID 등록) - 등록 방법은 Setup-Register an App ID 참고
•  웹 / Android 통합 인증을 위한 Service ID 생성. - IOS에서만 애플 로그인을 구현한다면 패스-!
•  애플 로그인 사용 활성화 -  Identifiers 리스트에서 애플 로그인 서비스를 활성화 시킬 앱을 클릭 후 App Services 에서  Sign In With Apple 활성화 후 저장.
•  애플 서버와 통신을 위한 Key 생성.  - IOS에서만 애플 로그인을 구현한다면 패스-!

 

 

👉 firebase에서 해야할 것들 정리.

• Firebase Authentication에서 Apple 로그인 활성화.

 

 

---

 

 

 

 

 

위의 기본 세팅을 끝내고 Flutter로 넘어와서 pub dev의 sign_in_with_apple 플러그인 을 보면

애플 로그인에 대한 통합 설명이 나오는데

 

자격 증명을 받은 후에는 애플 서버의 (인증 정보 유효성 체크 및 언급된 유저와 실제 관련이 있는지) 확인 후
당신의(개발자) 시스템에서 새로운 세션을 파생해야 한다.
당신의(개발자) 서버는 매일 애플과의 세션을 확인해야하고(초기 유효성 검사에서 얻은 refresh token을 통해)
애플에서 authorization을 중단 시킨다면, 당신의 시스템에서 세션을 페지해야 한다.

 

라고 나와있는 듯... ( 오역 가능성 있음..😂)

 

 

...ㅎㄷㄷ 이걸 보고 나는 서버 통신을 위한 키를 생성을 했지만, 내 상황에서는 키 생성은 필요없다. ( 다시 얘기하지만,

나는 ios 13이상 버전만 ios에서 지원할 예정이라-! )

 

그 이유는 pub dev의 sign_in_with_apple 플러그인 에는

이미 Glitch를 이용해서 서버리스로 애플 로그인을 구현해놨기 때문이당-!

꺄핳🤩

 

 

 

 1. pub.dev 의 sign_in_with_apple 패키지 설치

 

 

 flutter pub add sign_in_with_apple
 flutter pub get

Installing을 참고하여

프로젝트 루트에서 flutter pub add sign_in_with_apple 명령어를 입력하여 dependency 추가 후

flutter pub get 해주고

 

 

import 'package:sign_in_with_apple/sign_in_with_apple.dart';

애플 로그인 기능을 구현할 파일에 위와 같이 import 해주면 플러그인 사용 준비 끝. 

 

 

 

그리고 애플 로그인을 눌렀을 때 발생하는 이벤트는

import 'dart:convert';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:sign_in_with_apple/sign_in_with_apple.dart';

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

  // Create an `OAuthCredential` from the credential returned by Apple.
  final oauthCredential = OAuthProvider("apple.com").credential(
    idToken: appleCredential.identityToken,
    accessToken: appleCredential.authorizationCode,
  );

  // Sign in the user with Firebase. If the nonce we generated earlier does
  // not match the nonce in `appleCredential.identityToken`, sign in will fail.
  return await FirebaseAuth.instance.signInWithCredential(oauthCredential);
}

이렇게 만들어주고 simulator (ios 13 버전 이상) 에서 돌려보니 잘 된당 🎉 짝짝짝 🎉

 

 

 

 

 

 

 

 

 

 

 

 

 

* Flutter 파이어베이스 애플 로그인 ( ios 13 버전 이상 ) 방법이 어렵다면,

이 유튜브 를 참고 해서 따라하면 쉽게 따라할 수 있다.

( Flutter 개발자인 지인분께서 해당 유튜브 알려주심ㅎ.ㅎ )