iOS에서 Google 로그인

GitHub

설치 단계와 이 플러그인의 전체 마크다운 가이드를 포함한 설정 프롬프트를 복사하기.

소개

Capgo iOS용 Social Login을 설정하는 방법을 배울 것입니다. 이 가이드를 읽기 전에 이미 일반 설정 가이드를 읽었다고 가정합니다. iOS에서 Google 로그인 사용.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__에서 iOS 클라이언트 ID를 생성하세요.
1. __CAPGO_KEEP_0__의 검색 바를 클릭하세요.
2. __CAPGO_KEEP_0__에서 credentials 및 __CAPGO_KEEP_0__의 APIs and Services 스크린샷의 2번에 해당하는 옵션
3. __CAPGO_KEEP_0__의 create credentials
4. __CAPGO_KEEP_0__에서 OAuth client ID
5. __CAPGO_KEEP_0__에서 Application type to iOS
6. Bundle ID를 찾으세요
  1. Xcode를 열어보세요
  2. App target을 Xcode 프로젝트 탐색기에서 두 번 클릭하세요 App
  3. Google Console로 돌아가서 Bundle ID를 붙여넣으세요 Targets -> App
  4. Bundle Identifier 필드를 찾으세요 Bundle Identifier
  5. Bundle ID를 찾으세요 Bundle Identifier Bundle ID를 찾으세요 Bundle ID
7. __CAPGO_KEEP_1__ (App Store에 앱을 배포한 경우) App Store ID __CAPGO_KEEP_2__ ID에 추가할 수 있습니다. Team ID __CAPGO_KEEP_3__
8. 모든 세부 정보를 입력한 후 하단의 create
9. __CAPGO_KEEP_5__ 버튼을 클릭합니다. 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> Insert the following fragment just before the closing
```
<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 변경값을 이전 단계에서 복사한 값을 __CAPGO_KEEP_0__으로 바꿔보세요
  
  이 값을 시작 으로 com.googleusercontent.apps
6. __CAPGO_KEEP_0__ 파일을 저장하세요. Command + S

__CAPGO_KEEP_0__을 수정하세요. AppDelegate.swift

__CAPGO_KEEP_0__ Xcode 프로젝트 탐색기에서 AppDelegate.swift 파일을 열세요.
위에 import GoogleSignIn __CAPGO_KEEP_0__을 삽입하세요.
찾아보기 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

Setup Google login in your JavaScript/TypeScript code

import SocialLogin 및 Capacitor

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

__CAPGO_KEEP_0__을 호출하세요 (한 번만 호출해야 함)

기본 설정 (온라인 모드 - 대부분의 앱에 권장):
```
// 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: 필수 - __CAPGO_KEEP_0__으로 끝나야 함 googleusercontent.com (1 단계에서 위에)
- webClientId: 선택 사항 - Only needed if you also support web platform or need advanced features
- iOSServerClientId: 선택 사항 - 동일한 값으로 webClientId 제공된 경우
고급 설정을 위해 webClientId 및 iOSServerClientId, 를 참조하십시오. 웹 설정 가이드
주의입니다: When using mode: 'offline', 로그인 응답에서 사용자 데이터가 직접 포함되지 않습니다. 대신 서버 인증 code을 받게 되며, 이 인증을 통해 사용자 정보를 백엔드 서버에서 가져와야 합니다. SocialLogin.refresh({ provider: 'google' }) 는 이 모드에서 사용할 수 없습니다. 새로 고침은 사용자 인증을 받은 후 백엔드에서만 가능합니다. serverAuthCode. 자세한 구현 방법은 일반 설정 가이드 를 참조하세요.

로그인 함수를 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 로그인 흐름이 올바르게 작동되어야 합니다

알려진 문제

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

Google 로그인 플러그인은 @capacitor/privacy-screen. Google 로그인 웹뷰가 개인화 화면에 의해 중단될 수 있습니다.

Workaround: Call await PrivacyScreen.disable(); Google 로그인 함수를 호출하기 전에

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

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

iOS에서 Google 로그인을 사용하는 경우 Google 로그인 iOS를 사용하여 인증 및 계정 흐름을 계획하고 계정 흐름을 연결하려면 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하여 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login의 네이티브 기능을 사용합니다. @capgo/capacitor-social-login을 사용하여 @capgo/capacitor-social-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 구현 세부 사항에 대해, 두 단계 인증 두 단계 인증 구현 세부 사항에 대해.

iOS에서 Google 로그인

소개

제목이 'iOS에서 Google 로그인 사용'인 섹션

알려진 문제

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

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