[Swift] iOS 프로젝트 Google Login 구현하기

친구들과 같이 진행하는 프로젝트에 Google Login 기능을 넣기로 했다.

https://developers.google.com/identity/sign-in/ios/start-integrating

iOS 및 macOS용 Google 로그인 시작하기  |  Authentication  |  Google Developers

구글에서 제공하는 공식 문서가 너무 친절해서 보고 따라 하기만 하면 된다.

1. Dependency

CocoaPods를 이용해서 프로젝트에 GoogleSignIn 라이브러리를 추가한다.

프로젝트 경로에서 터미널을 열고,

pod init

입력하면 Podfile이 생긴다.

vi Podfile

vi로 Podfile을 열고 i를 눌러 입력 모드로 전환한다.

vi Podfile

pod 'GoogleSignIn'

SwiftUI를 사용하는 경우 다른 하나를 더 install 해야 된다는데,
나는 UIKit을 사용해서 이거 하나만 작성했다.

 

Podfile 내부에 pod 'GoogleSignIn'를 입력하고 esc를 눌러 입력 모드에서 나와 :wq 저장하고 끈다.

 

저장하고 나와서 install 하면 되는데..

pod install

install이 되지 않는다.

M1 기반 맥에서 pod install 할 때 error가 있다고 한다.

sudo arch -x86_64 gem install ffi

# Podfile이 있는 경로에서 실행
arch -x86_64 pod install

밑에 있는 명령어까지 실행시켜주면

error가 났었던 GoogleSignIn install이 자동으로 됐다.

자동으로 안 됐으면 다시 pod install을 하면 될 것 같다.

 

Pods 라이브러리를 추가하면 프로젝트 폴더에서 [프로젝트명].xcworkspace로 프로젝트를 열어야 한다.

2. 클라이언트 ID

https://console.developers.google.com/

Google 클라우드 플랫폼

Google 클라우드 플랫폼에 프로젝트를 등록해서 클라이언트 ID를 받아야 한다.

다른 팀원이 먼저 프로젝트를 생성해 놓아서 앱용 클라이언트 ID만 발급받았다.

(처음에 웹 클라이언트 ID를 다른 팀원이 먼저 생성해놔서 이걸 그대로 썼는데 안 됐다.. 웹과 앱은 따로 아이디가 발급된다.)

 

콘솔에서 API 및 서비스 -> 사용자 인증 정보

OAuth 클라이언트 ID 생성

APP 유형 - iOS

애플리케이션 유형, 이름, 번들 ID 세 가지 필수 값을 채우고 만들면 된다.

생성된 클라이언트ID

3. Add URL Scheme

XCode 왼쪽에 프로젝트 이름을 클릭하면 나오는 Setting 화면에서 info 탭에 들어가면 URL Types 섹션이 있다

URL Schemes에 클라이언트 ID를 역순으로 입력한다.

info.plist에서도 추가할 수 있다.

이렇게 까지 하면 준비 끝

4. Google Sign-In 구현

AppDelegate

import UIKit
import GoogleSignIn

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    
    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        var handled: Bool
        
        handled = GIDSignIn.sharedInstance.handle(url)
        if handled {
            return true
        }
        
        return false
    }
    
    // 생략
}

AppDelegate에 파라미터로 url를 받는 application 함수에 코드 추가

 

Check User Sign-In State

import UIKit
import GoogleSignIn

/**
 앱 실행 시 로그인 상태에 따른 분기처리를 위한 View
 */
class IsUserLoginViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Check Google Login State
        GIDSignIn.sharedInstance.restorePreviousSignIn { user, error in
            if error != nil || user == nil {
                // 로그아웃 상태
                // LoginView 이동
            } else {
                // 로그인 상태
                // 가입 여부 판단
                // 가입 페이지 이동 or Main 이동
            }
        }
    }

}

처음 앱이 실행되면 사용자의 로그인 상태를 판단해 로그인 뷰를 보여줄지 로그인 이후의 메인으로 갈지 분기 처리를 위한 화면을 만들었다.

LaunchScreen과 같은 배경색을 써서 배경색만 있는 화면에 분기처리 코드로 바로 다음 화면으로 넘어간다.

현업에서는 이러한 부분이 어떻게 구현되는지 모르겠지만..

일단은 이렇게 구현했다.

(AppLifeCycle 찾아보면서 Appdelegate에 넣어야 하나 삽질을 꽤 오래 한 결과가 이것..ㅜㅜ)

 

Google Sign-In Button 추가

스토리보드에 UIButton을 추가하고 CustomClass를 적용시켜야 한다.

로그인 버튼을 추가한 스토리보드를 우클릭해서 소스코드로 연다.

Storyboard 우클릭 > Open As > Source Code

이렇게 열면 스토리보드가 xml로 보이는데 우리가 추가한 Button 태그를 찾고

빨간 네모 잘못 그렸당

태그 안에 customClass="GIDSignInButton" 추가한다.

다시 원래대로 스토리보드 인터페이스..?로 확인하면 CustomClass가 잘 적용된다.

class LoginViewController: UIViewController {

    @IBOutlet weak var signInWithGoogleButton: GIDSignInButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Google Login Button Setting
        setGoogleLoginButton()
    }
    
    // Google Login Button Setting
    func setGoogleLoginButton() {
        signInWithGoogleButton.colorScheme = .light
        signInWithGoogleButton.style = .wide
    }
    
}

 

버튼을 색, 크기를 기호에 맞게 꾸며주자

꾸민 버튼은 스토리보드에서는 확인할 수 없고, 앱을 실행시켜서 확인 가능하다.

 

Login Button Event

    // 클라이언트 ID
    let signInConfig = GIDConfiguration(clientID: Config().CLIENT_ID)
    
    // SignIn Google Action
    @IBAction func signInWithGoogle(_ sender: Any) {
        GIDSignIn.sharedInstance.signIn(with: self.signInConfig, presenting: self) { user, error in
            guard error == nil else { return }
            guard let user = user else { return }
            
            print(user.profile?.email ?? "no email")
            print(user.profile?.name ?? "no name")
            print(user.profile?.imageURL(withDimension: 320) ?? "no profile image")
            
            // 로그인 성공
            // 가입 여부 판단
            // 가입 or Main 페이지 이동
        }
    }

로그인 버튼을 누르면 발생하는 이벤트.

로그인이 정상적으로 잘 되었으면 콘솔에 email, name, profileImageUrl를 출력하고 페이지 이동을 한다.

클라이언트 ID는 노출되면 안 되니까 Config 클래스를 만들어서 저장하고 gitignore 시켰다.

 

5. Run

Button ColorScheme : Light, Style : Wide

Button Click > 계속

계정 선택

처음 로그인하는 경우에는 아이디와 비밀번호를 입력받았다.

그 이후로는 로그인했던 계정을 선택할 수 있다.

 

계정 선택하면 메인 페이지로 이동하고 콘솔에도 print 한 정보들이 잘 써진다.

 

Logout

Test Logout

메인 화면에는 로그아웃 테스트를 위한 버튼을 만들어놨다.

@IBAction func TestLogout(_ sender: Any) {
    print("logout !")
    GIDSignIn.sharedInstance.signOut()

    // LoginView 이동
}

한 줄이면 로그아웃 완료.

---

로그인한 사용자 정보는 TokenID에 담긴다.

이 토큰을 백엔드 서버로 전송해서 데이터 처리를 해야 된다.

 

다음에는 이 부분을 구현할 예정이다.

 

2022.11.01. 서버 구현 업로드 완료~

https://im-babycoder.tistory.com/entry/Swift-JAVA-iOS-프로젝트-Google-Login-서버-만들기

[Swift / JAVA] iOS 프로젝트 Google Login 서버 만들기