[Swift] 파이어 베이스(Cloud Firestore), 구글 로그인, Authentication 세팅

안녕하세요~

 

이번엔 Firebase, 그 중에서도 Cloud Firestore 데이터 베이스를 통한

구글 로그인에 대해 다뤄보려고 합니다!

참고로 Firebase가 구글에 속한 기업이기 때문에(예전에 구글이 인수했죠)

구글 로그인이 비교적 제일 간단하다고 합니다

 

그리고 진행하기에 앞서

이전 글에서 Firebase와 Cloud Firestore 세팅을 했었는데요,

그 부분이 먼저 진행되어 있어야 합니다!

( 이전 글 링크 )

---

0. 문서를 따라가며 진행합니다!
(이따 바로 복사할 주소가 필요하니 아래 링크를 눌러서 확인하세요!)

https://firebase.google.com/docs/auth/ios/google-signin?hl=ko&authuser=0

Apple 플랫폼에서 Google 로그인을 사용하여 인증  |  Firebase Authentication

(시작하기 전에 부분 까지는 이전 글에서 세팅되어 있습니다!)

 

1.프로젝트에 Google 로그인 SDK 추가

저기 저 링크를 복사해두시고~

Xcode 프로젝트의 상단의 Add Packag를 실행합니다.

이후 오른쪽 하단의 검색 부분에 아까 복사해둔 주소를 입력하고 Add Package를 눌러주시면 됩니다!

 

2. Firebase 프로젝트에서 Google 로그인 사용 설정

 

Firebase 프로젝트에 들어가서 Authentication을 누르고 시작하기를 누릅니다.

 

그리고 로그인 방법을 누르면 이런 창이 뜰텐데 당연하지만 여기서 Google을 눌러주세요

 

그리고 사용 설정을 체크하고 프로젝트 지원 이메일을 입력합니다.(저는 파이어 베이스 이메일을 입력했습니다.)

그리고 바로 저장을 눌러주세요!

 

그러면 이렇게 최신 구성 파일 다운으로 창이 뜹니다!

이전 글에서 보았던 그 파일와 이름이 동일한 파일인데

기존 프로젝트에 저 파일로 교체해주시면 됩니다.

(정상적으로 교체했다면 Xcode에서 저 파일에 들어갔을 때 REVERSERD_CLIENT_ID라는 항목이 생성되었을 겁니다.)

 

3. 필수 헤더 파일 가져오기

구글 로그인을 구현하려는 파일에 임포트 합니다.

4. Google 로그인 구현

이제 살짝 좀 복잡해집니다!

4 - 1

세부 항목이 있어서 4-1이라고 하겠습니다.

 

기존에 추가했던 파일인 GoogleService-Info.plist 파일의 REVERSED_CLIENT_ID 키 값 복사

 

Xcode 프로젝트 -> 왼쪽의 파일 목록 중 최상단 프로젝트 -> Targets -> Info -> 아래의 URL Types -> + 버튼

-> URL Schemes에 복사했던 키 값 붙여넣기

 

4 - 2

(이전 글에서 @main이 있던 파일에 클래스를 추가했었는데 거기 포함된 내용입니다! 확인해보시면 이미 있을 거에요)

 

4 - 3

AppDelegate 클래스에 함수를 추가해줍니다.

추가하시면 Appdelegate 코드가 아래와 같아지실 겁니다.

class AppDelegate: NSObject, UIApplicationDelegate {
  func application(_ application: UIApplication,
                   didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    FirebaseApp.configure()
    return true
  }
}

 

 

 

4 - 4, 5 6

구글 로그인을 실행시키는 코드 입니다.

저는 func loginGoogle()이라는 함수로 만들어서 사용했습니다.

 

그리고 코드를 그대로 복사해서 붙여넣으시면 저 코드가 UIKit 기반이기 때문에

UIViewController를 ContentView로 변환할 수 없다는 에러가 뜰겁니다.

 

저 자리에 로그인 화면을 띄우는 뷰 타입이 들어가야 할겁니다.

그래서 UIViewControllr 타입의 rootViewController 생성해서 대체해줍니다.

 

4-5,6내용은 그냥 버튼을 만들어서 연결해주는 것이기 때문에 설명을 생략했습니다.

전체 코드는 아래와 같습니다.

import SwiftUI
import FirebaseCore
import FirebaseAuth
import GoogleSignIn

struct ContentView: View {
    var body: some View {
        VStack {
            Button {
                loginGoogle()
            } label: {
                Text("구글 로그인")
            }
            .buttonStyle(BorderedProminentButtonStyle())
        }
    }
    
    func loginGoogle() {
    
  		// UIViewControllr 타입의 rootViewController 생성
        guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
              let window = windowScene.windows.first,
              let rootViewController = window.rootViewController
        else { return }
        
        guard let clientID = FirebaseApp.app()?.options.clientID else { return }
        
        // Create Google Sign In configuration object.
        let config = GIDConfiguration(clientID: clientID)
        GIDSignIn.sharedInstance.configuration = config
        
        // Start the sign in flow!
        GIDSignIn.sharedInstance.signIn(withPresenting: rootViewController) { result, error in
            guard error == nil else {
                // ...
                return
            }
            
            guard let user = result?.user,
                  let idToken = user.idToken?.tokenString
            else {
                // ...
                return
            }
            
            let credential = GoogleAuthProvider.credential(withIDToken: idToken,
                                                           accessToken: user.accessToken.tokenString)
            
            // ...
        }
    }
}//: body

 

이렇게 코드를 입력하고 로그인 버튼을 누르면 드디어!

구글 로그인 창으로 연결됩니다

 

하지만!!!

 

이메일을 입력하고 로그인을 진행하셔도 저렇게 사용자 항목이 비어있을 겁니다

로그인이 아직 완성되지 않았다는 뜻이죠...갈 길이 정말 머네요

5 - Firebase에 인증(마지막)

아까 함수 마지막줄에 이 코드를 추가해줍니다...

 

그리고 다시 시뮬레이터를 돌려서 로그인을 진행하시면

요렇게 로그인 정보가 나옵니다!

 

제가 사용한 방법 외에도 기본으로 제공해주는 UI를 통해 구글 인증을 하는 방법도 문서에 있네요

역시 대기업이라 그런지 문서가 잘 정리되어 있습니다

https://firebase.google.com/docs/auth/ios/firebaseui?hl=ko&authuser=0

FirebaseUI로 손쉽게 iOS 앱에 로그인 추가

 

긴 글 읽어주셔서 감사합니다~

---

참고

https://firebase.google.com/docs/auth/ios/google-signin?hl=ko&authuser=0

Apple 플랫폼에서 Google 로그인을 사용하여 인증  |  Firebase Authentication