Google iOS에 로그인

소개

이 가이드에서는 iOS에 대한 Capgo 소셜 로그인을 사용하여 Google 로그인을 설정하는 방법을 알아봅니다. 일반 설정 가이드를 이미 읽으셨다고 가정합니다.

iOS에서 Google 로그인 사용

이 부분에서는 iOS에서 Google 로그인을 설정하는 방법을 알아봅니다.

Google 콘솔에서 iOS 클라이언트 ID를 생성합니다.
1. 검색창을 클릭하세요
2. credentials을 검색하고 ‘API 및 서비스’ 항목(스크린샷의 2번)을 클릭합니다.
3. ‘사용자 인증 정보 생성’을 클릭하세요.
4. OAuth client ID을 선택하세요.
5. iOS에 ‘애플리케이션 유형’을 선택합니다.
6. 번들 ID 찾기
  1. Xcode을 엽니다.
  2. App을 두 번 클릭합니다.
  3. Targets -> App에 있는지 확인하세요.
  4. ‘번들 식별자’를 찾으세요.
  5. Google 콘솔로 돌아가서 번들 식별자를 번들 ID에 붙여넣습니다.
7. 선택적으로 앱을 App Store에 게시한 경우 클라이언트 ID에 App Store ID 또는 ‘팀 ID’를 추가하세요.
8. 모든 세부정보를 입력한 후 create을(를) 클릭하세요.
9. OK을 클릭하세요.
10. 새로 생성된 iOS 클라이언트를 엽니다.
11. 다음 데이터를 복사하세요
  
  :::참고 이 이미지의 nr. 1은 나중에 initialize 호출에서 iOSClientId이 됩니다.
  
  이 이미지의 nr. 2은 나중에 YOUR_DOT_REVERSED_IOS_CLIENT_ID이 됩니다. :::
앱의 Info.plist 수정
1. Xcode을 열고 Info.plist 파일을 찾습니다.
2. 이 파일을 마우스 오른쪽 버튼으로 클릭하고 소스 코드로 엽니다.
3. Plist 파일 하단에 </dict> 태그가 표시됩니다.
4. 닫는 </dict> 태그 바로 앞에 다음 조각을 삽입합니다.
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. YOUR_DOT_REVERSED_IOS_CLIENT_ID를 이전 단계에서 복사한 값으로 변경합니다.
  
  :::주의 이 값이 com.googleusercontent.apps으로 STARTS되는지 확인하세요. :::
6. Command + S로 파일을 저장하세요.

AppDelegate.swift 수정

AppDelegate를 엽니다.
파일 상단에 import GoogleSignIn을 삽입하세요.
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) 함수를 찾으세요

다음과 같이 함수를 수정합니다.

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    // Called when the app was launched with a url. Feel free to add additional processing here,
    // but if you want the App API to support tracking app url opens, make sure to keep this call

    var handled: Bool

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

    return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
}

GoogleSignIn 처리로 애플리케이션 openURL 기능을 수정했습니다.

Command + S로 파일을 저장하세요.

JavaScript/TypeScript 코드에 Google 로그인을 설정하세요.

SocialLogin 및 Capacitor 가져오기

import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';

초기화 메소드를 호출합니다(한 번만 호출해야 함).기본 설정(온라인 모드 - 대부분의 앱에 권장):
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
추가 클라이언트 ID를 사용한 고급 설정:
```
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID',           // Optional: for web platform support
      iOSClientId: 'YOUR_IOS_CLIENT_ID',           // Required: from step 1
      iOSServerClientId: 'YOUR_WEB_CLIENT_ID',     // Optional: same as webClientId, needed for some advanced features
      mode: 'online'                               // 'online' or 'offline'
    }
  })
})
```
:::참고 클라이언트 ID 요구 사항:
- iOSClientId: 필수 - googleusercontent.com로 끝나야 합니다(위 1단계).
- webClientId: 선택 사항 - 웹 플랫폼도 지원하거나 고급 기능이 필요한 경우에만 필요합니다.
- iOSServerClientId: 선택 사항 - 제공된 경우 webClientId과 동일한 값이어야 합니다.
webClientId 및 iOSServerClientId을 사용한 고급 설정의 경우 이러한 자격 증명 생성에 대한 웹 설정 가이드를 참조하세요. :::

:::주의 오프라인 모드 정보: mode: 'offline'를 사용할 때 로그인 응답에는 사용자 데이터가 직접 포함되지 않습니다. 대신 백엔드 서버를 통해 사용자 정보로 교환해야 하는 서버 인증 코드를 받게 됩니다. 구현 세부정보는 일반 설정 가이드를 참조하세요. :::

로그인 기능을 구현합니다. 버튼을 만들고 클릭 시 다음 코드를 실행합니다.

온라인 모드의 경우:

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))

오프라인 모드의 경우:

const res = await SocialLogin.login({
  provider: 'google',
  options: {
    forceRefreshToken: true // Recommended for offline mode
  }
})
// res contains serverAuthCode, not user data
// Send serverAuthCode to your backend to get user information
console.log('Server auth code:', res.result.serverAuthCode)

애플리케이션 테스트
1. 앱을 빌드하고 ‘cap sync’를 실행하세요.
2. 모든 작업을 올바르게 수행했다면 Google 로그인 흐름이 제대로 작동하는 것을 볼 수 있습니다.

알려진 문제

개인정보 보호 화면 플러그인 비호환성

Google 로그인 플러그인은 @capacitor/privacy-screen과 호환되지 않습니다. 두 플러그인을 함께 사용하면 Google 로그인 웹뷰가 개인정보 보호 화면으로 인해 중단됩니다.

해결 방법: 로그인 기능을 호출하기 전에 await PrivacyScreen.disable();을 호출하세요.

import { PrivacyScreen } from '@capacitor/privacy-screen';
import { SocialLogin } from '@capgo/capacitor-social-login';

await PrivacyScreen.disable();
await SocialLogin.login({
  provider: 'google',
  options: {}
});