Flutter 프로젝트에서 Apple Login 설정하기

이 포스팅은 Firebase를 통해 Apple Login 기능 구현할 때 설정해야 하는 것들에 대한 내용이다.

즉, 아래 링크 작업이 선행되어야 한다.

2024.11.14 - [개발노트/Flutter] - Flutter 프로젝트에서 Firebase 이용하기 (공통 설정)

---

1. Firebase Console 설정 - 1

1-a. Apple Login 기능 활성화

Firebase Console 좌측 메뉴 빌드 카테고리에서 Authentication 메뉴를 클릭하면 된다.
제공업체 중에서 Apple을 선택하여 사용 설정을 on 해준다.

(저장 버튼이 아래 있는데 스크롤이 가끔 이상하니 잘 찾아서 꼭 눌러주자)

아래에 있는 콜백 URL도 복사해둔다.

 

 

2. Apple Developers 설정 - 1

🔗 Apple Developers 사이트

2-a. 앱 아이디 추가

인증서, 식별자 및 프로파일 카테고리에서 ```식별자(Identifiers)```를 선택한다.

1. 앱 아이디 추가 (+ 버튼) → App IDs → App
2. 설명과 번들 아이디 입력 후, 하단 기능 목록에서 Sign In with Apple & Edit 클릭
3. Server-to-Server Endpoint에 파이어베이스에서 복사해온 콜백 URL 붙여넣기, Save
4. Register

 

2-b. 키 추가

좌측 메뉴에서 ```Keys```를 선택한다.

1. 키 추가 (+ 버튼)
2. 키 이름 설정
3. 하단 목록에서 Sign in with Apple 체크 후 Configure에서 방금 추가한 앱 아이디 선택
4. 등록 후 다운로드

❗️ 한 번 다운로드 받으면 이후 분실 시에도 재다운로드 받을 수 없으니 잘 보관해야 한다

---

(-- 혹시라도 iOS만 지원한다면 여기까지만 해주면 된다 --)

---

 

3. Firebase Console 설정 - 2

1-a 항목에서 Authentication에 추가해뒀던 Apple 구성을 수정한다.
값 입력 후 저장 버튼 클릭 필수

3-a. 서비스 ID 입력

바로 아래 단계에서 애플 개발자 센터에 추가해줄 ID 값이다.

일반적으로 앱 아이디의 역순으로 짓는다. 
(ex. App Bundle ID/Pacakge Name이 co.company.app 이라면 서비스 아이디는 app.company.co)

 

3-b. OAuth 코드 흐름 구성 입력

• 팀 아이디: xcodeproj, 개발자 사이트 등 여기저기에서 찾을 수 있는 그 팀 아이디 값이다.
• 키 아이디: iOS 지원 과정에서 만든 키의 아이디. 사이트 상세페이지에서도 확인해볼 수 있고, 지금 다운로드 받은 파일의 이름도 이 키 아이디 값이다

 

 

4. Apple Developers 설정 - 2

4-a. 서비스 아이디 추가

2-a 항목에서처럼 인증서, 식별자 및 프로파일 카테고리에서 ```식별자(Identifiers)```를 선택한다.

1. 서비스 추가 (+ 버튼) → Service IDs
2. 설명과 아이디 입력(바로 위, 3-a에서 입력한 서비스 아이디)
3. Register

 

4-b. 콜백 URL 추가

1. Identifiers 리스트에서 방금 만든 아이디 클릭
   (혹시라도 리스트에서 안 보인다면 우측 검색 버튼 옆 필터가 ‘Service IDs’로 되어있는지 확인)
2. Sign in with Apple & Configure 클릭
   • Domains and Subdomains: 아래 콜백 URL에서 앞의 https:// 와 뒤의 /__/auth/handler를 제외한, ```Firebase_App_ID.firebaseapp.com``` 
   • Return URLs: 2-a에서 앱 아이디 생성할 때 Server-to-Server Endpoint에도 입력해줬던, 파이어베이스 콘솔에서 복사해온 콜백 URL

 

 

5. 프로젝트 설정

구글 로그인 기능을 이미 구현했다면 넘어가도 되는 항목이다.

 

Flutter 프로젝트에서 Google Login 설정하기

위 링크에서 2-a, 2-b에 해당하는 작업 진행해주면 된다.

 

 

6. 기타 참고 사항

6-a. Apple Developers 사이트에 로그인 시

만약 애플 계정이 팀 아이디라면 초대된 각자의 계정으로도 접근이 가능하지만,

애플 계정이 개인 아이디라면 해당 관리자 아이디로만 접근 가능하다.

(= 업체에서 개인 아이디를 제공해줬다면 업체 쪽에 로그인 인증 번호 요청해야 할 수 있다는 소리)

 

6-b. sign_in_with_apple 패키지

기존에는 ```sign_in_with_apple``` 패키지를 추가 설치하여 appleCredential 값을 얻은 뒤, 그걸 통해 FirebaseAuth에서 로그인을 진행하는 방식으로 구현했지만,

최근 Flutter 코드는 ```FirebaseAuth-AppleAuthProvider```를 사용하고 있다.

기존 방식을 사용하면 Android는 웹을 사용할 수 있게 추가 설정을 해주는 등 더 귀찮은 작업이 추가되니, Firebase 패키지에서 제공해주는 AppleAuthProvider를 간편하게 쓰도록 하자.

 

6-c. 구글 로그인은 되는데 애플 로그인은 안 돼요 (Android)

정확히는 디버그 모드에서는 잘 되는데, 내부 테스트로만 올리면 안 되는 경우다.

실제로 이런 문제가 발생한 프로젝트가 하나 있었는데, 사실 아직도 이해가 안 가긴 한다🤔

하지만 어쨌든 플레이 스토어의 sha1 값이 누락되어 있던 것 같다.(역시 정말 이해가 안 간다. 이게 누락됐는데 구글 로그인은 왜 되지)

Play Store Console → 해당 앱 프로젝트 → 좌측 네비게이션 바의 설정 → 앱 서명에 있는 SHA1을 추가