iOS에서 Google 로그인

GitHub

복사할 수 있는 설정 지시어와 이 플러그인의 설치 단계 및 전체 마크다운 가이드를 포함합니다.

소개

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

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

iOS 클라이언트 ID를 Google 콘솔에서 생성하세요.
1. 검색 바를 클릭하세요.
2. 검색하고 credentials 클릭하세요. APIs and Services 1번 (스크린샷에서 2번)
3. Google Console의 create credentials
4. 인증 정보 생성 메뉴에서 OAuth client ID
5. Live Update Application type iOS 옵션을 선택한 애플리케이션 유형 선택 iOS
6. Xcode를 열으세요
  1. Xcode 프로젝트 탐색기에서
  2. App Target을 더블 클릭하세요 App
  3. 이것을 확인하세요. Targets -> App
  4. 찾아보세요. Bundle Identifier
  5. Google 콘솔로 돌아가서 Bundle ID 필드에 자신의 Bundle Identifier 를 입력하세요. Bundle ID
7. 또는 App Store ID Google 콘솔 iOS 클라이언트 생성 양식의 Bundle ID 필드에 Team ID 입력하세요.
8. 선택적으로 create
9. 클릭 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> Info.plist 파일의 dict 태그
4. 구글 소셜 로그인 플러그인 iOS </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 이전 단계에서 복사한 값으로
  
  이 값이 시작해야합니다. STARTS com.googleusercontent.apps
6. 파일을 저장하세요. Command + S

수정하세요. AppDelegate.swift

AppDelegate를 열어보세요.
삽입하세요. import GoogleSignIn AppDelegate.swift 파일의 맨 위에 GoogleSignIn import를 추가하세요.
함수 func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) AppDelegate의 원래 openURL 함수를 찾으세요.

클립보드에 복사하세요.

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을 처리하는 애플리케이션 열기 URL 함수를 수정했습니다.

파일을 저장하세요. 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: 필수 - 끝에 googleusercontent.com (1 단계에서)
  - webClientId: 선택 - 웹 플랫폼도 지원하거나 고급 기능이 필요할 때만 필요합니다.
  - iOSServerClientId: 선택 - 위에서 제공한 값과 동일한 값이어야 합니다. webClientId 고급 설정과
  및 webClientId Capgo 마케팅 웹사이트의 페이지/영역: Capgo 마케팅 웹사이트. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 보이는 곳: trust.astro 페이지. 메시지 키 `and` (And). iOSServerClientId이러한 자격 증명을 만들기 위한 웹 설정 가이드를 참조하십시오. 주의 주의
  로그인 응답에는 사용자 데이터가 직접 포함되지 않습니다. 대신 서버 인증 __CAPGO_KEEP_0__을 받게 되며, 이 인증을 백엔드 서버에서 사용자 정보로 교환해야 합니다. refresh는 백엔드에서만 가능합니다. __CAPGO_KEEP_0__을 백엔드에서 교환한 후 refresh를 진행해야 합니다. 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이러한 자격 증명을 만들기 위한 웹 설정 가이드를 참조하십시오. 주의 주의
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)
```
애플리케이션을 테스트하세요
1. 앱을 빌드하고 실행하세요 cap sync
2. 모든 것을 올바르게 수행했으면 구글 로그인 흐름이 정상적으로 작동해야 합니다.

알려진 문제

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

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: {}
});

Google 로그인 iOS를 사용 중이라면 Google 로그인 iOS 인증 및 계정 흐름을 계획하고 연결하려면 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric Using @capgo/capacitor-social-login 두 단계 인증 두 단계 인증 구현 세부 사항에 대한 정보입니다.

iOS에서 Google 로그인

소개

iOS에서 Google 로그인을 사용하는 방법

알려진 문제

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

iOS에서 Google 로그인