[4]_1_2. (Firebase) Google id를 이용한 가입 / 로그인 / 로그아웃

 

 

 

 

 

준비작업 (3개 step)

 

---

Step1. Firebase 사이트 작업

 

사용할 앱에서 구글 id 사용을 위해

 

Firebase 홈페이지 > Authentication(인증) > Sign-in method > 버튼(새 제공업체 추가)에서

 

구글을 추가한다.

 

 

 

---

Step2. pod 설치

 

앞서 Firebase를 이용한 email/password 로그인을 작업했다는 전제하에 pod 'GoogleSignIn'을 설치해 준다.

 

최종적으로 email/password, Google 로그인을 사용할 경우, 아래처럼 두가지 라이브러리를 설치하면 된다.

설치하는 방법은

 

해당 프로젝트의 Podfile을 열고 > 위에처럼 작성하여 저장, 닫기 > 해당 프로젝트 폴더에서 터미널을 열어 pod install 실행.....설치 완료

 

 

 

---

Step3. Xcode 프로젝트에 URL 스키마 추가

 

Xcode 프로젝트 카테고리 영역에서 기존에 추가했던 GoogleServie-Info.plist파일을 보면

 

"REVERSED_CLIENT_ID"란 항목의 Value를 복사하고

 

 

다시 카테고리의 최상단 > TARGETS > Info > URL Types에서

 

아래에 있는 "+" 버튼을 눌러 아래와 같은 입력창을 추가시키고

 

URL Schemes에 복사했던 내용을 입력한다.

 

준비작업은 여기까지, 이제 코드 작업으로 넘어간다.

 

 

 

 

 

---

 

 

 

 

 

가입 / 로그인을 위한 코드작업 (2개 step)

 

 

---

Step4. AppDelegate 파일 작업

 

강의를 보니 Firebase 이전버전에서는 AppDelegate 파일에서 delegate 및 extension을 이용해 코드를 작성하는 것 같은데 

 

Firebase 최근 버전에서는 좀 바뀐 듯 한다. 

 

문서를 보고, 여기저기 검색해서 일단 할 수 있는 방법으로 해봤다.

 

 

 

우선, AppDelegate 파일에서 작성할 내용은 2가지이다.

 

 

(1) Firebase 초기화

 

이를 작업하지 않으면 빌드에서 에러가 난다. 비교적 처리하기 쉬운 빌드 에러지만 에러나기 전에 처리하는 게 제일 좋지 아니 한가.

 

작성할 내용은 FirebaseApp.configure()인데, FirebaseApp을 사용하기 위해 FirebaseCore를 import해준다.

import UIKit
import FirebaseCore

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        //Firebase 초기화 코드
        FirebaseApp.configure()
        return true
    }

 

 

(2) opend url 코드 작성

 

open url 코드를 추가해줘야 하는데, 이때 GIDSignIn을 사용하므로 GoogleSignIn을 import하여 작성한다.

import UIKit
import FirebaseCore
import GoogleSignIn

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        //Firebase 초기화 코드
        FirebaseApp.configure()
        return true
    }
    
    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        return GIDSignIn.sharedInstance.handle(url)
    }

이는 url을 호출하여 인증 프로세스가 끝날 때 애플리케이션이 수신하는 URL을 적절히 처리한다

 

...고 firebase의 홈페이지가 말씀하신다...고 내 눈이 읽었다...고 내 뇌가 전달한다.   옛설

 

 

 

---

Step5. ViewController에서 버튼 작업 구현하기

 

우선 구글 로그인을 구현할 것이니 여기 파일에서도 GoogleSignIn을 import해주고,

 

Google 로그인으로 사용할 버튼을 UIButton! 타입으로 IBOutlet 연결한 후 아래처럼 GIDSignInButton!으로 직접 타이핑한다.

import UIKit
import FirebaseCore
import FirebaseAuth
import GoogleSignIn

class ViewController: UIViewController {

    @IBOutlet var btnEmailPassword: UIButton!
    @IBOutlet var btnGoogle: GIDSignInButton!

그리고 AppDelegate 파일에서와 마찬가지로 FirebaseCore를 import해줬는데

 

(아래 작성한 코드를 보면) Google 로그인을 위해서는 최종적으로 credential 인스턴스가 필요하다.

 

(대충) 이를 위해서는 idToken, authentication 인스턴트가 필요하고,

 

            또 이들은 config 인스턴스가 필요한 핸들러 안에 작성되어야 하고,

 

            이 config는 clinentID가 필요한데, 이는 FirebaseApp에 있으므로

 

그래서 FirebaseApp을 가지고 있는 FirebaseCore를 import해줬다.

 

사실, Firebase 문서에서는 이들을 AppDelegate 파일에서 작성했는지 어쨌는지 정확히 파악할 수가 없어서 많이 헤맸는데

 

이들은 꼬리에 꼬리를 물듯 연쇄적이어서 나는 버튼 작동 영역에 모두 작성하였다.

@IBAction func tabBtnGoogleLogin(_ sender: UIButton) {
        configureLogIn()
    }
    
    func configureLogIn() {
        guard let clientID = FirebaseApp.app()?.options.clientID else { return }
        let config = GIDConfiguration(clientID: clientID)
        GIDSignIn.sharedInstance.signIn(with: config, presenting: self) { [unowned self] user, error in
            guard let authentication = user?.authentication,
                  let idToken = authentication.idToken
            else { return }
            let credential = GoogleAuthProvider.credential(withIDToken: idToken, accessToken: authentication.accessToken)
            
            Auth.auth().signIn(with: credential) { authResult, error in
                if let error = error {
                    print("Firebase sign in error: \(error)")
                    return
                } else {
                    print("User is signed with Firebase & Google")
                    let storyboard = UIStoryboard(name: "Main", bundle: Bundle.main)
                    let welcomViewController = storyboard.instantiateViewController(withIdentifier: "WelcomeViewController")
                    self.navigationController?.pushViewController(welcomViewController, animated: true)
                }
            }
        }
    }

 

 

 

 

 

 

이러면 모달뷰로 구글로그인 화면이 나타나서 로그인을 진행하도록 해주고,

 

이후 navigationContoller로 어플의 최종 로그인 완료 페이지로 보냈다.

 

그러면 Firebase에도 신규 아이디가 추가되고, 기존 이메일/패스워드 사용자와 구별하여 확인할 수 있다.

 

 

 

 

 

구글 로그인 완료!

 

 

 

 

 

로그아웃은 별도의 작업이 필요없이 기존에 만들었던 이메일/패스워드 버튼 하나로 동일하게 작동한다.

 

효율적인 Firebase 집사님이시다.

 

 @IBAction func tabBtnLogout(_ sender: UIButton) {
        let firebaseAuth = Auth.auth()
        do {
            try firebaseAuth.signOut()
            self.navigationController?.popToRootViewController(animated: true)
        } catch let signOutError as NSError {
            print("Error: singout \(signOutError.localizedDescription)")
        }
    }