iOS에서 Google 로그인

GitHub

이 플러그인을 설치하는 방법과 전체 마크다운 가이드를 포함한 설정 프롬프트를 복사합니다.

Introduction

일반 설정 가이드를 이미 읽었다고 가정하고 Google 로그인과 Capgo Social Login for iOS를 설정하는 방법을 배울 것입니다. general setup guide.

iOS에서 Google 로그인을 설정하는 방법을 배웁니다.

iOS 클라이언트 ID를 Google 콘솔에서 생성합니다.
1. 검색 바를 클릭합니다.
2. 검색어를 입력하고 credentials 결과에서 2번 스크린샷에 표시된 APIs and Services APIs 및 Services가 강조된 자격 증명 옵션을 보여주는 검색 결과
3. Google 콘솔에서 자격 증명 만들기 버튼을 클릭합니다. create credentials
4. Select OAuth client ID
5. Select the Application type 에서 iOS
6. iOS Bundle ID를 찾으세요.
  1. Xcode를 열어보세요.
  2. Xcode 프로젝트 탐색기에서 App
  3. Xcode에서 App이 선택된 Targets 섹션에 있습니다. Targets -> App
  4. iOS Bundle ID를 찾으세요. Bundle Identifier
  5. Go back to the Google Console and paste your Bundle Identifier __CAPGO_KEEP_0__ Bundle ID
7. __CAPGO_KEEP_1__ App Store ID __CAPGO_KEEP_2__ Team ID App Store에 앱을 배포한 경우에만
8. Create 버튼을 클릭하여 iOS 클라이언트 생성 양식 하단에 create
9. OK 버튼을 클릭하여 클라이언트 ID 생성 확인 대화 box OK
10. __CAPGO_KEEP_3__
11. 다음 데이터를 복사하세요.
  
  이미지의 nr. 1 이미지의 iOSClientId 호출. initialize 이미지의
  앱의 Info.plist를 수정하세요. nr. 2 iOS 클라이언트가 새로 생성된 인증 정보 목록에 추가되었습니다. YOUR_DOT_REVERSED_IOS_CLIENT_ID
다음 데이터를 복사하세요.
1. Xcode를 열고 프로젝트 탐색기에서 Info.plist 파일
2. 이 파일을 오른쪽 클릭하고 소스 code로 열기
3. 파일의 하단 부분에서 Plist 태그 </dict> Info.plist 파일의
4. 닫는 태그 바로 앞에 다음 구문을 삽입하세요 </dict> URL 스키마를 포함한 Info.plist __CAPGO_KEEP_0__를 닫는 태그 앞에 삽입하세요
```
<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

수정 AppDelegate.swift

AppDelegate를 열어
Insert 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)
}

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

Setup Google login in your JavaScript/TypeScript code
1. Import SocialLogin and Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Call the initialize method (this should be called only once)
  
  Basic setup (online mode - recommended for most apps):
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
  Advanced setup with additional client IDs:
```
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'
    }
  })
})
```
  Note
  Client ID Requirements:
  - iOSClientId: Required - __CAPGO_KEEP_0__으로 끝나야 합니다. googleusercontent.com (1번 단계에서부터)
  - webClientId: 선택 사항 - 웹 플랫폼도 지원하거나 고급 기능이 필요할 경우에만 필요합니다.
  - iOSServerClientId: 선택 사항 - __CAPGO_KEEP_0__의 동일한 값이어야 합니다. webClientId when 제공될 때
  고급 설정과 webClientId 및 iOSServerClientId__CAPGO_KEEP_0__를 생성하는 데 사용하는 웹 설정 가이드 를 참조하십시오.
  오프라인 모드에 대해: 을 사용할 때 mode: 'offline', 로그인 응답에는 사용자 데이터가 직접 포함되지 않습니다. 대신, 서버 인증 code을 받게 되며, 이 인증을 백엔드 서버에서 사용자 정보로 교환해야 합니다. SocialLogin.refresh({ provider: 'google' }) 이 모드에서는 사용할 수 없습니다; 새로 고침은 백엔드에서 인증을 교환한 후에야 가능합니다. serverAuthCode자세한 구현 방법은 일반 설정 가이드 에서 확인할 수 있습니다.
3. 로그인 함수를 implement하세요. 버튼을 만들고 클릭 시 다음 code을 실행하세요.
  
  온라인 모드:
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))
```
  offline 모드에 대해:
```
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)
```
애플리케이션을 테스트하세요
1. 앱을 빌드하고 실행하세요 cap sync
2. 모든 것을 올바르게 수행했다면, Google 로그인 흐름이 올바르게 작동하는 것을 볼 수 있어야 합니다.

알려진 문제

Privasy Screen 플러그인 불일치

Google 로그인 플러그인은 @capacitor/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 로그인 계속하기 인증 및 계정 흐름을 계획하고 연결하려면 @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의 구현 세부 사항을 참조하세요. 두 단계 인증 두 단계 인증의 구현 세부 사항을 참조하세요.