iOS에서 Google Login

소개

이 가이드에서는 iOS용 Capgo Social Login으로 Google Login을 설정하는 방법을 알아봅니다. 이미 다음 내용을 읽었다고 가정합니다: 일반 설정 가이드.

iOS에서 Google login 사용하기

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

1. Google 콘솔에서 iOS 클라이언트 ID 생성

   1. 검색창을 클릭하세요

      

   2. 검색: credentials 를 클릭하세요 APIs and Services 해당 항목(스크린샷의 2번)

      

   3. 다음을 클릭하세요: create credentials

      

   4. 선택 OAuth client ID

      

   5. 다음을 선택하세요: Application type 대상 iOS

      

   6. Bundle ID 찾기

      1. Xcode 열기

      2. 더블 클릭: App

         

      3. 다음 위치에 있는지 확인하세요 Targets -> App

         

      4. 해당 항목을 찾으세요 Bundle Identifier

         

      5. Google Console로 돌아가서 다음을 붙여넣으세요 Bundle Identifier 앱으로 보내도록 Bundle ID

         

   7. 선택적으로 추가하세요 App Store ID 또는 Team ID 앱을 App Store에 게시했다면 클라이언트 ID에 추가하세요

   8. 모든 세부 정보를 입력한 후 클릭하세요 create

      

   9. 클릭 OK

      

   10. 새로 생성된 iOS 클라이언트 열기

       

   11. 다음 데이터 복사

       

       참고

       이 nr. 1 이 이미지에서 나중에 iOSClientId 플러그인의 initialize 호출을 매핑합니다.

       이 nr. 2 이 이미지에서 나중에 YOUR_DOT_REVERSED_IOS_CLIENT_ID

2. 앱의 Info.plist 수정하기

   1. Xcode를 열고 다음을 찾으세요 Info.plist 파일

      

   2. 이 파일을 우클릭해 Open As Source code로 여세요

      

   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

   6. 파일을 다음 내용으로 저장하세요 Command + S

3. 다음을 수정하세요: AppDelegate.swift

   1. AppDelegate를 엽니다

      

   2. 삽입 import GoogleSignIn 파일 맨 위에

      

   3. 다음 func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) 함수

      

   4. 함수를 다음과 같이 수정하세요

      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)
      }

      

   5. 파일을 다음 내용으로 저장하세요 Command + S

4. JavaScript/TypeScript code에서 Google 로그인 설정하기

   1. 가져오기 SocialLogin 및 Capacitor

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

   2. initialize 메서드를 호출하세요 (한 번만 호출해야 합니다)

      기본 설정 (온라인 모드 - 대부분의 앱에 권장):

      // onMounted is Vue specific
      onMounted(() => {
        SocialLogin.initialize({
          google: {
            iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
            mode: 'online' // Default mode
          }
        })
      })

      추가 Client 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'
          }
        })
      })

      참고

      Client ID 요구사항:

      • iOSClientId: 필수 - 반드시 다음으로 끝나야 합니다 googleusercontent.com (위의 1단계에서)
      • webClientId: 선택 사항 - 웹 플랫폼도 지원하거나 고급 기능이 필요한 경우에만 필요합니다
      • iOSServerClientId: 선택 사항 - 다음 값과 같아야 합니다: webClientId 제공된 경우

      고급 설정을 위해 webClientId 및 iOSServerClientId다음 웹 설정 가이드 를 참조하여 이 자격 증명을 생성하세요.

      주의

      오프라인 모드 안내: 사용하는 경우 mode: 'offline', 로그인 응답에 사용자 데이터가 직접 포함되지 않습니다. 대신 서버 인증 code를 받게 되며, 이를 백엔드 서버를 통해 사용자 정보로 교환해야 합니다. SocialLogin.refresh({ provider: 'google' }) 이 모드에서는 사용할 수 없습니다. 교환 후 백엔드에서 refresh해야 합니다. serverAuthCode. 구현 세부 사항은 일반 설정 가이드 를 참조하세요.

   3. 로그인 함수를 구현하세요. 버튼을 만들고 클릭 시 다음 code를 실행하세요.

      온라인 모드:

      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
      // Do not call SocialLogin.refresh() in offline mode
      console.log('Server auth code:', res.result.serverAuthCode)

5. 애플리케이션 테스트

   1. 앱을 빌드하고 실행하세요 cap sync

   2. 모든 단계를 올바르게 수행했다면 Google 로그인 플로우가 정상적으로 작동하는 것을 확인할 수 있습니다

      

참고

Google 프롬프트의 언어는 기기의 언어 설정에 따라 달라집니다.

알려진 문제

Privacy Screen 플러그인 호환성 문제

Google Login 플러그인은 다음과 호환되지 않습니다: @capacitor/privacy-screen. 두 플러그인을 함께 사용하면 Google 로그인 웹뷰가 Privacy Screen에 의해 중단됩니다.

우회 방법: 호출하세요 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: {}
});

iOS에서 Google Login 계속하기

사용 중이라면 iOS에서 Google Login 인증 및 계정 흐름을 설계할 때, 이를 다음 항목과 연결하세요: @capgo/capacitor-social-login 사용하기 @capgo/capacitor-social-login 사용 시 네이티브 기능을 위해, @capgo/capacitor-social-login @capgo/capacitor-social-login의 구현 세부 사항은, @capgo/capacitor-passkey @capgo/capacitor-passkey의 구현 세부 사항은 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric의 구현 세부 사항은, 2단계 인증 2단계 인증의 구현 세부 사항에 대해서는