[flutter] 파이어베이스 이용 / SNS 로그인 구현하기 - ① iOS 환경 설정

이번 포스팅에서는 파이어베이스를 이용해서 SNS 로그인 (ex. 구글, 페이스북, 카카오톡)을 할 수 있도록

 

간단한 로그인 페이지를 만들어 보려고 합니다.

 

안드로이드와 iOS 모두 진행을 할 것이기 때문에 맥으로 진행하도록 하겠습니다.

 

 

1. 플러터 프로젝트 생성

 

우선 안드로이드 스튜디오에서 새 프로젝트를 생성해 보도록 하겠습니다.

 

 

프로젝트 이름과 Organization 부분을 작성해줍니다.

 

 

 

다 적고 나서 Finish를 눌러줍니다.

 

 

2. firebase console 에 프로젝트 등록하기

 

프로젝트가 만들어 졌다면 다음 할 일은 firebase console에 접속합니다.

 

파이어 베이스 콘솔 : https://firebase.google.com/

Firebase

 

 

위 사이트에 접속 한 후 다음 화면과 같이 시작하기를 눌러줍니다.

 

 

 

프로젝트 추가 버튼을 눌러줍니다.

 

 

 

프로젝트 이름을 적고 '계속'을 눌러줍니다.

 

프로젝트 이름에는 숫자, 문자, 공백, 느낌표, - , 작은따옴표, 큰 따옴표만 포함될 수 있으니 조건에 맞게 프로젝트 이름을 정해주세요.

 

 

 

 

다음 화면에서 '계속'을 눌러준 다음, 아래 화면에서 계정을 선택하시거나 만들어줍니다.

 

기존에 있는 계정을 사용하셔도 되고 새로 만드셔도 됩니다. 새로 만드신다면 아래와 같이 국가를 선택하고 동의를 해주신 후

 

계속 진행을 해주시면 됩니다.

 

 

 

 

프로젝트가 다 생성되면 다음과 같이 콘솔 메인화면이 나타나게 됩니다.

 

 

 

3. iOS 프로젝트 세팅하기

 

ios 세팅을 하기 위해 iOS 버튼을 클릭해줍니다.

 

아래와 같은 화면이 나타나는데 빨간색으로 네모 친 부분 중 위에 번들 ID는 필수적으로 적어 주셔야하고

 

아래 앱 닉네임은 선택사항입니다. 필요한 부분을 채워 주도록 합시다.

 

 

 

 

우선 iOS 번들 ID를 확인하는 방법입니다.

 

안드로이드 스튜디오로 가서 아까 만들어 놓은 프로젝트 폴더 안의 ios 폴더를 우클릭해서 Flutter > Open iOS module in Xcode 를 선택해줍니다.

 

 

 

그러면 다음과 같이 Xcode가 열리게 되는데 Runner 를 더블클릭하면 오른쪽과 같이 정보화면이 나타나게 됩니다.

 

저기에서 Bundle Identifier 부분에 있는 것이 번들 아이디가 되는데 여기에서 주의할 점은,

 

번들 아이디에 대문자가 포함되면 안되기 때문에 대문자를 소문자로 바꿔주어야 합니다.

 

저는 번들 아이디를 "com.snslogin.sns-login" 으로 바꿔 주도록 하겠습니다.

 

 

 

 

대문자를 소문자와 "-" 를 이용해 수정해 주었다면 그 번들 아이디를 복사해서 아까 firebase console 에 붙여 넣어줍니다.

 

번들 ID를 잘 적어 주셨다면 앱 등록을 눌러서 진행해줍니다.

 

 

 

plist 파일을 다운로드 해 줍니다.

 

 

 

 

다운받은 파일을 Xcode에 추가해 주도록 하겠습니다.

 

드래그 드롭이 아닌 다음 방법을 이용해서 추가 해 주도록 하겠습니다.

 

Xcode 안에 Runner 폴더를 우클릭 해서 Add Files to "Runner"...를 클릭해줍니다.

 

 

SMALL

 

 

위 목록에서 다운받은 파일을 더블클릭 해주고 Destination: Copy items if needed 를 체크해준 다음 Add 를 눌러서

 

파일을 붙여 넣어줍니다.

 

 

 

그리고 나서 추가된 파일을 더블클릭 해 보면 REVERSED_CLIENT_ID 라는 항목이 보이고 그 뒤에 값을 복사해줍니다.

 

 

 

다시 Runner > info 로 가서 URL Types 아래에 + 를 눌르고 해당 부분에 붙여 넣기 하시면 됩니다.

(갑자기  Xcode의 테마색이 바뀌어서 혼란이 오실 수 있는데 신경쓰지 않고 진행하시면됩니다.)

 

 

 

그런 다음 다시 firebase 콘솔 화면으로 돌아와서 다음 > 다음 > 다음 > 콘솔로 이동을 눌러주시면 iOS 세팅이 완료 됩니다.

 

 

 

다음 포스팅에서는 안드로이드 세팅을 하는 법을 알아보도록 하겠습니다.