Firebase 인증 SwiftUI 애플리케이션 생성

SwiftUI 프레임워크는 이미 세 번째 교체 단계에 들어섰고, 교체가 진행됨에 따라 생산에 사용할 수 있는 응용 프로그램을 잘 실현하였다.이런 응용 프로그램은 틀림없이 어떤 신분 검증이 필요할 것이다.사용자에 대한 인증이 까다로울 수 있기 때문에 타사 솔루션, 예를 들어Firebase에 의존해야 할 수도 있습니다.문제는 Firebase 및 Google을 SwiftUI 애플리케이션에 로그인하는 방법입니다.
이 문서는 SwiftUI를 사용하여 iOS 응용 프로그램을 만들고 Firebase 프로젝트를 만든 다음 Firebase 인증을 사용하여 Google 로그인 SDK를 SwiftUI 응용 프로그램에 통합하는 방법을 보여 줍니다.
이 문서에서는 다음 항목을 다룹니다.

Firebase 프로젝트 만들기

SwiftUI 라이프 사이클 애플리케이션 생성

코코아팟을 사용한 의존 관계 처리

처리 코드 내의 신분 검증

설계 UI 요소

Firebase 프로젝트 작성

SwiftUI 응용 프로그램에서 Firebase를 사용하기 위해서는 Firebase console에 새 Firebase 프로젝트를 만들어야 합니다.항목을 추가하려면 누르십시오. 새 항목을 만듭니다.
프로젝트 만들기 페이지를 연 후 프로젝트 이름을 입력합니다.

다음 단계는 구글 분석을 사용하거나 사용하지 않는 것입니다.이 프레젠테이션은 필요없기 때문에 당신이 사용하십시오.
프로젝트의 대시보드가 열리면 iOS 아이콘을 클릭합니다.

다음은 등록 응용 프로그램의 양식을 작성합니다.Apple Bundle ID는 Bundle 식별자와 같아야 하기 때문에 나중에 Xcode 항목에서 사용할 것입니다.다른 두 필드는 선택할 수 있습니다.응용 프로그램이 응용 프로그램 상점에 업로드될 때만 응용 프로그램 상점 ID가 필요하지만, 이 강좌에서는 그렇지 않습니다.

앱 등록을 클릭하세요.
다음은 구글 서비스 정보를 다운로드해야 한다.plist 파일, 나중에 Xcode 항목에 추가됩니다.

3단계와 4단계에서 "다음"을 누르면 됩니다. 왜냐하면 이 강좌의 뒷부분에서 그것들을 상세하게 소개할 것입니다.응용 프로그램 등록을 완료하려면 계속을 클릭하여 콘솔에 들어갑니다.
Firebase 프로젝트를 거의 완성했습니다.마지막으로, 우리는 신분 검증을 사용해야 한다.
인증 을 클릭한 다음 시작 을 클릭합니다.

현재 구글을 로그인 방법 제공자로 선택했다.

마지막으로, 사용 단추를 전환하고, 대중을 위한 프로젝트 이름과 프로젝트 지원 전자메일을 추가해서 사용합니다.변경 사항을 저장하려면 저장 단추를 누르십시오.

Firebase 설정이 완료되었습니다. 이제 실제 인코딩을 시작하겠습니다!

SwiftUI 라이프 사이클 애플리케이션 생성

다음 단계에서는 Xcode 항목을 실제로 생성합니다.Xcode를 열고 새 Xcode 항목 만들기 옵션을 선택합니다.새 창이 열리면 제목에 iOS가 선택되어 있는지 확인하고 App을 선택합니다.다음을 클릭하십시오.
지금 우리는 이 프로젝트에 관한 세부 사항을 입력해야 한다.

제품명: demo

조직 표지부:com.firebase

커넥터: SwiftUI

언어: Swift이 강좌는 핵심 데이터와 테스트가 필요하지 않기 때문에 프로젝트에 포함할 수 있습니다.

[다음]을 클릭하고 Xcode 항목을 저장할 폴더를 선택합니다.
위대하다우리는 의존 관계를 CoCoapod으로 처리하기 위해 다음 섹션으로 넘어갈 준비가 되어 있습니다.

코코푸드로 의존 관계 처리

CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects. It has over 86 thousand libraries and is used in over 3 million apps. CocoaPods can help you scale your projects elegantly.

이 자습서는 프로젝트 종속성 처리를 위해 CocoaPods를 사용합니다.개발기기에 코코아팟이 설치되어 있지 않으면 코코아팟 공식 페이지Getting Started 안내를 따르십시오.
터미널을 사용하여 항목을 탐색합니다.이와 유사한 명령을 사용합니다: cd your/project/path.
프로젝트 경로에 들어간 후 실행 pod init 명령을 통해 빈pod 파일을 초기화합니다.이 프로젝트에 필요한 의존 항목을 추가하기 위해 새로 만든 Podfile을 엽니다.
다음을 추가합니다.

target 'swiftui' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for swiftui
  pod 'Firebase/Core'
  pod 'Firebase/Auth'
  pod 'GoogleSignIn'
  pod 'SDWebImageSwiftUI'

end

이러한 종속성을 설치하려면 pod install 명령을 실행합니다.
경탄할 만한!프로젝트 설정이 완료되었고 의존 항목이 성공적으로 설치되었습니다.

코드에서 인증 처리

첫 번째는 구글 서비스 정보를 얻는 것이다.plist 파일Firebase 프로젝트를 만드는 부분에서 다운로드하여 Xcode 프로젝트에 끌어다 놓았습니다.파일이 프로젝트에 추가되면, 프로젝트 설정에 역방향 고객 ID 키를 추가해야 합니다.

역방향 클라이언트 ID 키 처리

다음을 수행합니다.

항목 설정 열기: 왼쪽 트리 뷰에서 항목 이름을 두 번 클릭합니다.[대상] 섹션에서 응용 프로그램을 선택하고 [정보] 탭을 선택한 다음 [URL 유형] 섹션을 확장합니다.

+ 단추를 누르면 역방향 고객 ID에 URL 방안을 추가합니다. 이 값을 찾으려면 구글 서비스 정보를 엽니다.plist 구성 파일에서 대칭 이동된 CLIENT ID 키를 찾습니다.키의 값을 복사하여 구성 페이지의 URL Schemes 상자에 붙여넣습니다.다른 필드는 비워 둡니다.
구성이 완료되면 애플리케이션별 값은 다음과 비슷해야 합니다.

이제 우리는 약간의 인코딩을 시작할 수 있다.

AppDelegate 추가

애플은 iOS 14와 SwiftUI 2.0 이후 SwiftUI Lifecycle 애플리케이션에 앱 Delegate를 추가하는 기능을 추가해 프로젝트에 추가해야 한다.
Xcode 왼쪽 트리 뷰에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 New file을 선택합니다.AppDelegate라는 새 Swift 파일을 추가합니다.만든 후 파일에 다음을 추가합니다.

import Firebase
import GoogleSignIn

class AppDelegate: NSObject, UIApplicationDelegate {

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

    func application(
      _ app: UIApplication,
      open url: URL,
      options: [UIApplication.OpenURLOptionsKey : Any] = [:]
    ) -> Bool {
        return GIDSignIn.sharedInstance.handle(url)
    }
}

보조 함수 추가

잠시 후 사용할 signInWithConfiguration:presentingViewController:callback: 방법에 대해 ViewController와 GID configuration 설정을 보여 주어야 하기 때문에 두 개의 조수 함수를 실현해야 합니다.
GIDConfigurationExtensions.스위프트:

import Firebase
import GoogleSignIn

extension GIDConfiguration {

    /// Get GIDConfiguration instance by providing clientID from GoogleService-Info.plist file
    /// - Returns: GIDConfiguration instance
    static func getGIDConfigurationInstance() -> GIDConfiguration {
        GIDConfiguration(clientID: FirebaseApp.app()?.options.clientID ?? "")
    }
}

UIApplicationExtensions.날래다

import UIKit

extension UIApplication {

    /// Get root UIViewController of application. If for whatever reason, UIViewController cannot be accessed,
    /// invoke fatalError() since UIViewController instance is crucial for application to work properly.
    /// - Returns: root UIViewController
    static func getRootViewController() throws -> UIViewController {
        let scenes = UIApplication.shared.connectedScenes
        let windowScene = scenes.first as? UIWindowScene
        let window = windowScene?.windows.first

        guard let uiViewController = window?.rootViewController else { fatalError() }
        return uiViewController
    }
}

완료되면 ViewModel을 시작할 수 있습니다.

LoginView 모델 구현

LoginViewModel이라는 새 Swift 파일을 생성합니다.
LoginView 모델:

import Firebase
import GoogleSignIn

final class LoginViewModel: ObservableObject {

    @Published var isUserLoggedIn = false

    func signIn() {
        do {
            let config = GIDConfiguration.getGIDConfigurationInstance()
            let uiViewController = try UIApplication.getRootViewController()

            GIDSignIn.sharedInstance.signIn(with: config, presenting: uiViewController) { user, error in
                guard error == nil else { return }
                guard user != nil else { return }
                self.isUserLoggedIn = true
          }
        } catch {
            print(error.localizedDescription)
        }
    }

    func signOut() {
        GIDSignIn.sharedInstance.signOut()
        isUserLoggedIn = false
    }
}

UI 요소 설계

지금은 수수께끼의 마지막 부분이다.SwiftUI 프레임워크를 사용하여 UI 요소를 설계하고 이전에 구현한 비즈니스 논리에 UI를 연결합니다.

LoginView

LoginView라는 새 SwiftUI 보기 파일을 만듭니다.
LoginView:

import SwiftUI

struct LoginView: View {

    @EnvironmentObject var viewModel: LoginViewModel

    var body: some View {
        VStack {
            Spacer()

            Button(action: {
                withAnimation {
                    viewModel.signIn()
                }
            }) {
                HStack {
                    Text("Sign in with google")
                        .fontWeight(.bold)
                }
            }
            .foregroundColor(.white)
            .padding()
            .frame(maxWidth: .infinity)
            .background(.black)
            .cornerRadius(12)
            .padding()

            Spacer()
        }
    }
}

struct LoginView_Previews: PreviewProvider {
    static var previews: some View {
        LoginView()
    }
}

LoginView의 모양은 다음과 같습니다.

HomeView

HomeView라는 새 SwiftUI 보기 파일을 만듭니다.
HomeView:

import GoogleSignIn
import SwiftUI
import SDWebImageSwiftUI

struct UserDetailView: View {

    let user: GIDGoogleUser?

    var body: some View {
        VStack {
            HStack {
                Text(user?.profile?.name ?? "")
                    .bold()
                    .font(.title2)

                Spacer()

                WebImage(url: user?.profile?.imageURL(withDimension: 75))
                    .resizable()
                    .placeholder(
                        Image(systemName: "person.fill")
                    )
                    .indicator(.activity)
                    .transition(.fade(duration: 0.5))
                    .frame(width: 75, height: 75, alignment: .center)
                    .scaledToFit()
                    .clipShape(Circle())
            }
            HStack {
                Text(user?.profile?.email ?? "")
                    .bold()
                    .font(.subheadline)
                Spacer()
            }

            Spacer()
        }
        .padding()
        .frame(height: 150, alignment: .center)
        .background(.thickMaterial)
        .cornerRadius(12)
    }
}

struct HomeView: View {

    @EnvironmentObject var viewModel: LoginViewModel
    private let user = GIDSignIn.sharedInstance.currentUser

    var body: some View {
        VStack {
            UserDetailView(user: user)

            Spacer()

            Button(action: {
                withAnimation {
                    viewModel.signOut()
                }
            }) {
                HStack {
                    Text("Sign out")
                        .fontWeight(.bold)
                }
            }
            .foregroundColor(.white)
            .padding()
            .frame(maxWidth: .infinity)
            .background(.black)
            .cornerRadius(12)
            .padding()
        }
        .padding()
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

HomeView의 모양은 다음과 같습니다.

연결

나머지는 DemoApp과 ContentView에 연결하는 것입니다.
DemoApp:

import SwiftUI

@main
struct DemoApp: App {

    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    @StateObject var viewModel = LoginViewModel()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(viewModel)
        }
    }
}

ContentView:

import SwiftUI

struct ContentView: View {

    @EnvironmentObject var viewModel: LoginViewModel

    var body: some View {
        if viewModel.isUserLoggedIn {
            HomeView()
        } else {
            LoginView()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

그렇지!Firebase 인증은 Google이 SwiftUI 응용 프로그램에 로그인하는 것과 통합되어 있으며, 저희 프로젝트는 시뮬레이터나 물리 장치에서 실행될 준비가 되어 있습니다.

결론

읽어 주셔서 감사합니다. Firebase 인증을 SwiftUI 생명주기 프로그램과 통합하는 것은 쉽지 않기 때문에 이 글이 당신에게 유용하길 바랍니다.
만약 당신이 나의 내용을 좋아하고 그것이 매우 유용하다고 생각한다면 DEV 커뮤니티에서 나를 주목하는 것을 고려해 주십시오.만약 당신이 특별히 관대하다고 생각한다면, 고려해 보세요. buying me a coffee
전화 좀 받아 주세요.