iOS에서 Google 로그인

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

소개

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

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

Google 콘솔에서 iOS 클라이언트 ID를 생성하세요.
1. 검색 바를 클릭하세요.
2. 검색어를 입력하세요. credentials 스크린샷의 2번에 해당하는 APIs and Services APIs 및 Services가 강조된 자격 증명 옵션을 보여주는 검색 결과
3. Google Console create credentials
4. 선택 OAuth client ID
5. 선택하세요. Application type 으로 iOS
6. bundle ID를 찾으세요.
  1. Xcode를 열어보세요.
  2. __CAPGO_KEEP_0__ App
  3. __CAPGO_KEEP_1__ Targets -> App
  4. __CAPGO_KEEP_2__ Bundle Identifier
  5. Google 콘솔로 돌아가서 Bundle Identifier 를 Bundle ID
7. Optionally, 앱 스토어에 게시한 앱에 대한 App Store ID 또는 Team ID 를 클라이언트 ID에 추가하세요.
8. 모든 세부 정보를 입력한 후 create
9. Create 버튼을 클릭하세요. OK
10. OK 버튼 클릭하세요. 클라이언트 ID가 생성되었습니다.
11. __CAPGO_KEEP_0__을 복사하세요.
  
  이 이미지는 nr. 1 이미지에서 나중에 iOSClientId 이미지에서 나중에 initialize 호출.
  이미지에서 나중에 nr. 2 앱의 Info.plist을 수정하세요. YOUR_DOT_REVERSED_IOS_CLIENT_ID
iOS 클라이언트가 새로 생성된 자격 증명 목록에 추가되었습니다.
1. Xcode를 열고 프로젝트 탐색기에서 Info.plist 파일
2. 이 파일을 오른쪽 클릭하고 code으로 열기
3. 파일의 하단 부분에서 Plist 태그 </dict> Info.plist 파일의
4. 닫는 태그 바로 앞에 다음 코드를 삽입하세요 </dict> Info.plist에 URL schemes __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를 열기
삽입 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 및 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: 필수 - __CAPGO_KEEP_0__으로 끝나야 합니다. googleusercontent.com (1번 단계에서부터)
  - webClientId: 선택 사항 - 웹 플랫폼을 지원하거나 고급 기능이 필요할 경우에만 필요합니다.
  - iOSServerClientId: 선택 사항 - __CAPGO_KEEP_0__과 동일한 값을 사용해야 합니다. webClientId when 제공된 경우
  고급 설정과 webClientId see iOSServerClientId웹 설정 가이드 이러한 자격 증명을 만들기 위해 for creating these credentials.
  오프라인 모드에 대해: 를 사용할 때, 로그인 응답에는 사용자 데이터가 직접 포함되지 않습니다. 대신, 서버 인증 __CAPGO_KEEP_0__을 받게 됩니다. 이 인증을 백엔드 서버에서 사용자 정보로 교환해야 합니다. mode: 'offline', the login response will not contain user data directly. Instead, you’ll receive a server auth code that must be exchanged for user information via your backend server. SocialLogin.refresh({ provider: 'google' }) 일반 설정 가이드 serverAuthCode를 참조하세요. 로그인 함수를 implement하세요. 버튼을 생성하고 클릭 시 다음 __CAPGO_KEEP_0__을 실행하세요. 온라인 모드:
3. Implement the login function. Create a button and run the following code on click
  
  For online mode:
```
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)
```
애플리케이션 테스트
1. 앱 빌드 및 실행 cap sync
2. 모든 것을 올바르게 수행했는지 확인했으면, Google 로그인 흐름이 올바르게 작동하는 것을 볼 수 있어야 합니다.

알려진 문제

Privace Screen 플러그인 불일치

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

해결 방법: 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 로그인을 사용하는 방법

알려진 문제

Privace Screen 플러그인 불일치