Apple Sign-In 마이그레이션부터 @capgo/social-login까지

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

개요

이 안내서에서는 레거시 플러그인을 현대 플러그인으로 전환하는 방법을 설명합니다. @capacitor-community/apple-sign-in 레거시 플러그인에서 현대 플러그인으로 전환하는 방법을 설명합니다. @capgo/capacitor-social-login 새로운 플러그인은 여러 가지 사회 인증 제공자에 대한 통합 인터페이스를 제공하며 TypeScript 지원과 활발한 유지 보수가 개선되었습니다.

설치

레거시 플러그인을 제거하세요:
터미널 창
```
npm uninstall @capacitor-community/apple-sign-in
```

새로운 플러그인을 설치하세요:

npm install @capgo/capacitor-social-login
npx cap sync

Code 변경 사항

변경 사항 가져오기

import { SignInWithApple } from '@capacitor-community/apple-sign-in';
import { SocialLogin } from '@capgo/capacitor-social-login';

초기화

: 새로운 플러그인은 이전에 필요하지 않았던 초기화 단계가 필요합니다.클립보드 복사

// No initialization needed in old package
// For iOS: Basic configuration
await SocialLogin.initialize({
  apple: {} // Basic iOS configuration
});

// For Android: Additional configuration required
await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // Service ID from Apple Developer Portal
    redirectUrl: 'https://your-backend.com/callback' // Your backend callback URL
  }
});

: iOS에서는 기본적인 설정을 제공하지만 Android에서는 Service ID와 백엔드 callback URL을 포함한 웹 기반 OAuth 인증을 위한 추가적인 세부 정보가 필요합니다.클립보드 복사

로그인 프로세스는 여러 매개 변수에서 더 깨끗한 API:로 단순화됩니다.

const result = await SignInWithApple.authorize({
  clientId: 'com.your.app',
  redirectURI: 'https://your-app.com/callback',
  scopes: 'email name',
  state: '12345',
  nonce: 'nonce'
});

const result = await SocialLogin.login({
  provider: 'apple',
  options: {
    // Optional: Add scopes if needed
    scopes: ['email', 'name'],
    nonce: 'nonce'
  }
});

새로운 플러그인은 login() 와 provider: 'apple' 개별 구성 값처럼 clientId 와 redirectURI.

응답 유형 변경

결과에는 accessToken 객체와 만료 날짜 세부 정보가 포함됩니다. profile section, 원래 패키지의 평평한 응답 형식 대신 대체:

// Old response type
interface AppleSignInResponse {
  response: {
    user: string;
    email: string | null;
    givenName: string | null;
    familyName: string | null;
    identityToken: string | null;
    authorizationCode: string | null;
  };
}

// New response type
interface SocialLoginResponse {
  provider: 'apple';
  result: {
    accessToken: {
      token: string;
      expiresIn?: number;
      refreshToken?: string;
    } | null;
    idToken: string | null;
    profile: {
      user: string;
      email: string | null;
      givenName: string | null;
      familyName: string | null;
    };
  };
}

새로운 기능

업데이트된 플러그인은 전신에 없는 기능을 소개합니다:

로그인 상태 확인

// Not available in old package
const status = await SocialLogin.isLoggedIn({
  provider: 'apple'
});

로그아웃 기능

// Not available in old package
await SocialLogin.logout({
  provider: 'apple'
});

이 메서드는 isLoggedIn() 인증 상태를 확인하고 logout() 기능을 제공합니다.

플랫폼별 변경 사항

iOS 설정

iOS iOS는 Xcode 기능을 통해 익숙한 설정 절차를 유지합니다.

iOS 설정은 크게 변경되지 않았습니다. 여전히 다음을 수행해야 합니다.
- Xcode에서 '애플 로그인' 기능을 활성화합니다.
- 애플 개발자 포털에서 앱을 구성합니다.
- code 변경 사항이 필요하지 않습니다.

Android 설정

안드로이드 __CAPGO_KEEP_0__은 현재 네이티브 지원을 위해 웹 기반 OAuth 인증을 통해 제공됩니다.

새로운 플러그인은 안드로이드 지원을 기본으로 제공하지만 추가 설정이 필요합니다.

애플 개발자 포털에서 서비스 ID를 생성하세요.
웹 인증 엔드포인트를 구성하세요.
안드로이드 앱을 OAuth 흐름을 처리하도록 설정하세요.
백엔드 서비스 구성이 필요합니다.

자세한 안드로이드 설정 지침에 대한 자세한 내용은 안드로이드 설정 가이드.

Key Advantages

최신화된 패키지는 다음과 같은 이점을 제공합니다.

통합 API 다중 소셜 제공자 (Google, Facebook, Apple)across
Improved TypeScript typing 더 나은 타입 정의와 함께
활발한 커뮤니티 유지 deprecated 버전과 비교하여
내장 Android 지원 웹 기반 인증을 통해
지속 로그인 상태 관리
일관된 오류 유형과 함께 오류 처리

Breaking Changes

explicit 초기화가 필요합니다 - 기본 설정이 없습니다
응답 객체 구조가 변경되었습니다 - 중첩된 결과 형식
Android 구현은 OAuth 백엔드 서비스가 필요합니다 토큰 갱신 처리가 다릅니다
- 향상된 토큰 관리 오류 처리 및 오류 유형이 변경되었습니다
- 더 자세한 오류 세부한 설정 지침에 대한 자세한 설명을 참조하십시오

설정 지침에 대한 자세한 설명을 참조하십시오 공식 문서.

애플 로그인 마이그레이션부터 @__CAPGO_KEEP_0__/social-login을 사용 중이시면 애플 로그인 마이그레이션을 @capgo/social-login으로 인증 및 계정 흐름을 계획하고 연결하려면 @capgo/capacitor-social-login을 사용하세요 native capability을 사용하는 @capgo/capacitor-social-login @capgo/capacitor-social-login implementation detail을 사용하는 @capgo/capacitor-social-login @capgo/capacitor-passkey implementation detail을 사용하는 @capgo/capacitor-passkey @capgo/capacitor-native-biometric implementation 세부 사항은 @capgo/capacitor-native-biometric에서 확인할 수 있습니다. 두 단계 인증 두 단계 인증의 implementation 세부 사항은 두 단계 인증에서 확인할 수 있습니다.