iOS에서 Google 로그인

설치 단계와 이 플러그인의 전체 마크다운 가이드를 포함한 설정 명령어를 복사하세요.

소개

이 가이드에서 Google 로그인을 설정하는 방법을 배우고 Capgo Social Login for iOS를 사용하는 방법을 배웁니다. 이 가이드를 읽기 전에 이미 이 플러그인의 사용 방법을 읽었다고 가정합니다. 설정 가이드.

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

iOS 클라이언트 ID를 Google 콘솔에서 생성하세요.
1. 검색 바 클릭
2. 검색 credentials 그리고 APIs and Services 2번 스크린샷에 표시된
3. 자격 증명 옵션에 클릭하세요. create credentials
4. 선택 OAuth client ID
5. 를 Application type iOS 옵션을 선택하여 애플리케이션 유형을 선택하세요. iOS
6. Xcode를 열어보세요.
  1. Xcode 프로젝트 탐색기에서
  2. App App
  3. 프로젝트 탭에서 App을 선택하세요. Targets -> App
  4. Find your Bundle Identifier
  5. Google Console로 돌아가서 Bundle Identifier 에 붙여넣으세요. Bundle ID
7. 선택적으로, App Store ID 에 붙여넣으세요. 만약 앱을 App Store에 출시한 적이 있다면. Team ID 모든 정보를 입력한 후,
8. iOS 클라이언트 생성 양식 하단의 create
9. 클라이언트 ID 생성 확인 대화 상자에서 OK
10. iOS 클라이언트를 새로 생성한 것을 열어보세요.
11. 다음 데이터를 복사하세요.
  
  이 nr. 1 이 사진에서 나중에 iOSClientId 이 initialize 호출.
  이 nr. 2 이 사진에서 나중에 YOUR_DOT_REVERSED_IOS_CLIENT_ID
애플리케이션의 Info.plist을 수정하세요.
1. Xcode를 열고 프로젝트 탐색기에서 Info.plist 파일
2. 이 파일을 오른쪽 클릭하고 소스 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

이 값을 수정하십시오. AppDelegate.swift

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

파일을 저장하기 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. 초기화 메서드를 호출하세요 (이 메서드는 한 번만 호출해야 합니다.)
  
  기본 설정 (온라인 모드 - 대부분의 앱에 권장):
```
// 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', 로그인 응답에 사용자 데이터가 직접 포함되지 않습니다. 대신 서버 인증 code을 받게 되며, 이 인증을 백엔드 서버에서 사용자 정보로 교환해야 합니다. SocialLogin.refresh({ provider: 'google' }) 이 모드에서는 사용할 수 없습니다; 새로 고침은 백엔드에서 교환된 후에야 합니다. 자세한 내용은 serverAuthCode일반 설정 가이드 implementation details. 로그인 함수를 implement하세요. 버튼을 만들고 클릭 시 다음 __CAPGO_KEEP_0__을 실행하세요.
3. Implement the login function. Create a button and run the following code on click
  
  For offline mode:
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))
```
  __CAPGO_KEEP_1__
```
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)
```
__CAPGO_KEEP_2__
1. __CAPGO_KEEP_3__ cap sync
2. __CAPGO_KEEP_4__

__CAPGO_KEEP_9__

개인 정보 보호 화면 플러그인 불일치

Google 로그인 플러그인은 @capacitor/privacy-screen개인 정보 보호 화면이 Google 로그인 웹뷰를 중단할 수 있습니다.

해결 방법: Call 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 로그인으로 계속하기를 사용 중이시면 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의 구현 세부 정보를 위해 두 가지 인증 방법 두 단계 인증 두 단계 인증의 구현 세부 정보를 위해

iOS에서 Google 로그인

소개

iOS에서 Google 로그인 사용하기

__CAPGO_KEEP_9__

개인 정보 보호 화면 플러그인 불일치

iOS에서 Google 로그인으로 계속하기