การผสานรวม Google Sign-In เข้ากับแอป iOS หรือ macOS

หน้านี้จะแสดงวิธีผสานรวม Google Sign-In เข้ากับแอป iOS หรือ macOS คุณอาจต้องปรับคำแนะนำเหล่านี้ให้เหมาะกับวงจรการใช้งานหรือโมเดล UI ของแอป

ก่อนเริ่มต้น

ดาวน์โหลดการขึ้นต่อกัน กำหนดค่าโปรเจ็กต์ Xcode และตั้งค่ารหัสไคลเอ็นต์

ลองใช้แอปตัวอย่าง iOS และ macOS เพื่อดูวิธีการทำงานของการลงชื่อเข้าใช้

1. จัดการ URL เปลี่ยนเส้นทางสำหรับการตรวจสอบสิทธิ์

หลังจากที่ผู้ใช้ตรวจสอบสิทธิ์กับ Google แล้ว โฟลว์การตรวจสอบสิทธิ์จะเปลี่ยนเส้นทางกลับไปยังแอปของคุณด้วย URL ที่มีการตอบกลับการตรวจสอบสิทธิ์ ซึ่งรวมถึงโทเค็นรหัสของผู้ใช้ การส่ง URL นี้ไปยัง GIDSignIn จะช่วยให้ SDK แยกวิเคราะห์การตอบกลับและส่งคืนข้อมูลเข้าสู่ระบบของผู้ใช้ไปยังแอปของคุณได้

iOS: UIApplicationDelegate

ในเมธอด application:openURL:options ของ AppDelegate ให้เรียกใช้เมธอด handleURL: ของ GIDSignIn ดังนี้

Swift

func application(
  _ app: UIApplication,
  open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]
) -> Bool {
  var handled: Bool

  handled = GIDSignIn.sharedInstance.handle(url)
  if handled {
    return true
  }

  // Handle other custom URL types.

  // If not handled by this app, return false.
  return false
}

Objective-C

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  BOOL handled;

  handled = [GIDSignIn.sharedInstance handleURL:url];
  if (handled) {
    return YES;
  }

  // Handle other custom URL types.

  // If not handled by this app, return NO.
  return NO;
}

macOS: NSApplicationDelegate

  1. ใน AppDelegate ของแอป ให้ลงทะเบียนตัวแฮนเดิลสำหรับเหตุการณ์ kAEGetURL ใน applicationDidFinishLaunching ดังนี้

    Swift

    func applicationDidFinishLaunching(_ notification: Notification) {
  // Register for GetURL events.
  let appleEventManager = NSAppleEventManager.shared()
  appleEventManager.setEventHandler(
    self,
    andSelector: "handleGetURLEvent:replyEvent:",
    forEventClass: AEEventClass(kInternetEventClass),
    andEventID: AEEventID(kAEGetURL)
  )
}

    Objective-C

    - (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
  // Register for GetURL events.
  NSAppleEventManager *appleEventManager = [NSAppleEventManager sharedAppleEventManager];
  [appleEventManager setEventHandler:self
                     andSelector:@selector(handleGetURLEvent:withReplyEvent:)
                     forEventClass:kInternetEventClass
                     andEventID:kAEGetURL];
}

  2. กำหนดตัวแฮนเดิลสำหรับเหตุการณ์เหล่านี้ที่เรียกใช้ handleURL ของ GIDSignIn ดังนี้

    Swift

    func handleGetURLEvent(event: NSAppleEventDescriptor?, replyEvent: NSAppleEventDescriptor?) {
    if let urlString =
      event?.paramDescriptor(forKeyword: AEKeyword(keyDirectObject))?.stringValue{
        let url = NSURL(string: urlString)
        GIDSignIn.sharedInstance.handle(url)
    }
}

    Objective-C

    - (void)handleGetURLEvent:(NSAppleEventDescriptor *)event
           withReplyEvent:(NSAppleEventDescriptor *)replyEvent {
      NSString *URLString = [[event paramDescriptorForKeyword:keyDirectObject] stringValue];
      NSURL *URL = [NSURL URLWithString:URLString];
      [GIDSignIn.sharedInstance handleURL:url];
}

SwiftUI

ในหน้าต่างหรือฉากของแอป ให้ลงทะเบียนตัวแฮนเดิลเพื่อรับ URL และเรียกใช้ handleURL ของ GIDSignIn ดังนี้

Swift

@main
struct MyApp: App {

  var body: some Scene {
    WindowGroup {
      ContentView()
        // ...
        .onOpenURL { url in
          GIDSignIn.sharedInstance.handle(url)
        }
    }
  }
}

2. พยายามกู้คืนสถานะการลงชื่อเข้าใช้ของผู้ใช้

เมื่อแอปเริ่มต้นขึ้น ให้เรียกใช้ restorePreviousSignInWithCallback เพื่อพยายามกู้คืนสถานะการลงชื่อเข้าใช้ของผู้ใช้ที่ลงชื่อเข้าใช้ด้วยบัญชี Google แล้ว การดำเนินการดังกล่าวจะช่วยให้ผู้ใช้ไม่ต้องลงชื่อเข้าใช้ทุกครั้งที่เปิดแอป (เว้นแต่จะออกจากระบบ)

แอป iOS มักจะดำเนินการนี้ในเมธอด application:didFinishLaunchingWithOptions: ของ UIApplicationDelegate และ applicationDidFinishLaunching: ของ NSApplicationDelegate สำหรับแอป macOS ใช้ผลลัพธ์เพื่อกำหนดมุมมองที่จะแสดงต่อผู้ใช้ เช่น

Swift

func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
  GIDSignIn.sharedInstance.restorePreviousSignIn { user, error in
    if error != nil || user == nil {
      // Show the app's signed-out state.
    } else {
      // Show the app's signed-in state.
    }
  }
  return true
}

Objective-C

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GIDSignIn.sharedInstance restorePreviousSignInWithCompletion:^(GIDGoogleUser * _Nullable user,
                                                                  NSError * _Nullable error) {
    if (error) {
      // Show the app's signed-out state.
    } else {
      // Show the app's signed-in state.
    }
  }];
  return YES;
}

SwiftUI

หากใช้ SwiftUI ให้เพิ่มการเรียกใช้ restorePreviousSignIn ใน onAppear สำหรับมุมมองเริ่มต้น

Swift

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
        // ...
        .onAppear {
          GIDSignIn.sharedInstance.restorePreviousSignIn { user, error in
            // Check if `user` exists; otherwise, do something with `error`
          }
        }
    }
  }
}

3. เพิ่มปุ่ม Google Sign-In

เพิ่มปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ลงในมุมมองการลงชื่อเข้าใช้ คอมโพเนนต์พร้อมใช้งานสำหรับ SwiftUI และ UIKit ซึ่งจะสร้างa ปุ่มที่ปฏิบัติตาม หลักเกณฑ์การสร้างแบรนด์ของ Google โดยอัตโนมัติ

การใช้ SwiftUI

  1. ตรวจสอบว่าคุณได้เพิ่มทรัพยากร Dependency สำหรับปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ของ SwiftUI ลงในโปรเจ็กต์แล้ว

  2. ในไฟล์ที่ต้องการเพิ่มปุ่ม SwiftUI ให้เพิ่มการนำเข้าที่จำเป็นที่ด้านบนของไฟล์

    import GoogleSignInSwift

  3. เพิ่มส่วนขยาย UIApplication เพื่อดึงข้อมูลรากของ ViewController ที่ใช้งานอยู่สำหรับการนำเสนอ

    extension UIApplication {
  // Minimal implementation to retrieve the active root view
  // controller for presentation. Apps presenting sign-in from deeper
  // within an existing view hierarchy should ensure they select the
  // appropriate view controller.
  var rootViewController: UIViewController? {
    let windowScene = connectedScenes
      .compactMap { scene in scene as? UIWindowScene }
      .first { scene in scene.activationState == .foregroundActive }
    return windowScene?.windows.first(where: { window in window.isKeyWindow })?.rootViewController
  }
}

  4. เพิ่มปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ลงในมุมมองและระบุการทำงานที่จะเรียกใช้เมื่อกดปุ่ม

    GoogleSignInButton(action: handleSignInButton)

  5. ทริกเกอร์กระบวนการลงชื่อเข้าใช้เมื่อกดปุ่มโดยเพิ่มการเรียกใช้เมธอด signIn(withPresenting:completion:) ของ GIDSignIn ในการทำงาน

    func handleSignInButton() {
  guard let rootViewController = UIApplication.shared.rootViewController else {
    // Handle error
    return
  }

  GIDSignIn.sharedInstance.signIn(withPresenting: rootViewController) { signInResult, error in
    guard let result = signInResult else {
      // Inspect error
      return
    }
    // If sign in succeeded, display the app's main content view.
  }
}

ซึ่งจะใช้ View Model เริ่มต้นที่ให้ข้อมูลการจัดรูปแบบมาตรฐานสำหรับปุ่ม หากต้องการควบคุมลักษณะที่ปรากฏของปุ่ม คุณต้องสร้าง GoogleSignInButtonViewModel ที่กำหนดเองและตั้งค่าเป็น viewModel ใน ตัวเริ่มต้นของปุ่มโดยใช้ GoogleSignInButton(viewModel: yourViewModel, action: yourAction) ดูข้อมูลเพิ่มเติมได้ที่ ซอร์สโค้ด GoogleSignInButtonViewModel

การใช้ UIKit

  1. เพิ่มปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ลงในมุมมองการลงชื่อเข้าใช้ คุณสามารถใช้คลาส GIDSignInButton เพื่อสร้างปุ่มที่มีการสร้างแบรนด์ของ Google โดยอัตโนมัติ (แนะนำ) หรือสร้างปุ่มของคุณเองด้วยการจัดรูปแบบที่กำหนดเอง

    หากต้องการเพิ่ม GIDSignInButton ลงใน Storyboard หรือไฟล์ XIB ให้เพิ่มมุมมองและตั้งค่าคลาสที่กำหนดเองเป็น GIDSignInButton โปรดทราบว่าเมื่อคุณเพิ่มมุมมอง GIDSignInButton ลงใน Storyboard ปุ่มลงชื่อเข้าใช้จะไม่แสดงใน Interface Builder ให้เรียกใช้แอปเพื่อดูปุ่มลงชื่อเข้าใช้

    คุณสามารถปรับแต่งลักษณะที่ปรากฏของ GIDSignInButton ได้โดยการตั้งค่าพร็อพเพอร์ตี้ colorScheme และ style ดังนี้

    พร็อพเพอร์ตี้สไตล์ของ GIDSignInButton
    colorScheme kGIDSignInButtonColorSchemeLight
    kGIDSignInButtonColorSchemeDark
    style kGIDSignInButtonStyleStandard
    kGIDSignInButtonStyleWide
    kGIDSignInButtonStyleIconOnly

  2. เชื่อมต่อปุ่มกับเมธอดใน ViewController ที่เรียกใช้ signIn: เช่น ใช้ IBAction ดังนี้

    Swift

    @IBAction func signIn(sender: Any) {
  GIDSignIn.sharedInstance.signIn(withPresenting: self) { signInResult, error in
    guard error == nil else { return }

    // If sign in succeeded, display the app's main content View.
  }
}

    Objective-C

    - (IBAction)signIn:(id)sender {
  [GIDSignIn.sharedInstance
      signInWithPresentingViewController:self
                              completion:^(GIDSignInResult * _Nullable signInResult,
                                           NSError * _Nullable error) {
    if (error) {
      return;
    }

    // If sign in succeeded, display the app's main content View.
  }];
}

4. เพิ่มปุ่มออกจากระบบ

เพิ่มปุ่มออกจากระบบลงในแอป ซึ่งผู้ใช้ที่ลงชื่อเข้าใช้จะมองเห็นได้ โดยปุ่มนี้จะเรียกใช้เมธอด signOut ของ GIDSignIn

การเรียกใช้ signOut จะล้างสถานะการลงชื่อเข้าใช้ที่จัดเก็บไว้ใน GIDSignIn และนำข้อมูลเข้าสู่ระบบของแอปออกจากพวงกุญแจ แอปของคุณมีหน้าที่รับผิดชอบในการอัปเดตสถานะและ UI ของตัวเอง การออกจากระบบจะมีผลกับแอปของคุณเท่านั้น โดยจะไม่นำผู้ใช้ออกจากระบบแอปหรือบริการอื่นๆ และจะไม่เพิกถอนสิทธิ์ที่ผู้ใช้ให้ไว้กับแอป

การใช้ SwiftUI

ใน SwiftUI ให้เพิ่ม Button ที่เรียกใช้ GIDSignIn.sharedInstance.signOut() ดังนี้

Button("Sign Out") {
  GIDSignIn.sharedInstance.signOut()
  // Calling signOut() may not automatically trigger UI updates.
  // Update your app's state as needed.
}

การใช้ UIKit

เชื่อมต่อปุ่มกับเมธอดใน ViewController ที่เรียกใช้ signOut: เช่น ใช้ IBAction ดังนี้

Swift

@IBAction func signOut(sender: Any) {
  GIDSignIn.sharedInstance.signOut()
}

Objective-C

- (IBAction)signOut:(id)sender {
  [GIDSignIn.sharedInstance signOut];
}

ขั้นตอนถัดไป

เมื่อผู้ใช้ลงชื่อเข้าใช้แอปด้วยบัญชี Google ได้แล้ว ให้ดูวิธีดำเนินการต่อไปนี้