내용으로 건너뛰기

Apple Sign-In @capgo/social-login으로의 마이그레이션

GitHub

Overview

개요

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

  1. 레거시 패키지를 제거하세요:

    터미널 창
    npm uninstall @capacitor-community/apple-sign-in
  2. 새로운 패키지를 설치하세요:

    터미널 창
    npm install @capgo/capacitor-social-login
    npx cap sync

Code 변경 사항

Code 변경 사항

변경 사항 가져오기

변경 사항 가져오기
import { SignInWithApple } from '@capacitor-community/apple-sign-in';
import { SocialLogin } from '@capgo/capacitor-social-login';

초기화

초기화

Key Change: 새로운 플러그인은 이전에 필요하지 않았던 초기화 단계가 필요합니다.

// 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() with provider: 'apple' 그리고 선택적 범위 대신 개별 구성 값인 clientId 그리고 redirectURI.

응답 유형 변경

응답 유형 변경

결과는 다음과 같이 변경되었습니다. accessToken 객체에 유효 기간 정보가 포함되어 있으며 구조화된 profile 원래 패키지의 평평한 응답 형식 대신:

// 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 iOS 설정은 크게 변경되지 않았습니다. 여전히 다음을 수행해야 합니다:

  1. iOS Setup
    • 애플 로그인 기능을 Xcode에서 활성화하세요
    • 애플 개발자 포털에서 앱을 구성하세요
    • iOS에 대한 추가 code 변경이 필요하지 않습니다

Android 설정

Android 설정

Android 현재 웹 기반 OAuth 인증을 통해 네이티브 지원을 받습니다:

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

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

Android 설정에 대한 자세한 설명은 Android 설정 가이드.

주요 이점

주요 이점

최신화된 패키지는 다음과 같은 기능을 제공합니다:

  1. 다중 소셜 제공자 (Google, Facebook, Apple)에서 향상된 TypeScript 타이핑
  2. 더 나은 타입 정의 활발한 커뮤니티 유지
  3. 구 버전과 비교하여 Android 지원
  4. __CAPGO_KEEP_0__ 웹 기반 인증을 통해
  5. 지속 로그인 상태 관리
  6. 보다 나은 오류 처리 일관된 오류 유형
  1. explicit 초기화가 필요합니다 - 기본 설정이 없습니다
  2. 응답 객체 구조가 변경되었습니다 - 중첩된 결과 형식
  3. 안드로이드 구현은 OAuth 백엔드 서비스가 필요합니다 백엔드 서비스
  4. 토큰 갱신 처리는 다릅니다. - 토큰 관리가 개선되었습니다.
  5. 오류 처리 및 오류 유형이 변경되었습니다. - 더 자세한 오류가 표시됩니다.

더 자세한 설정 방법을 알고 싶다면 공식 문서를 참조하세요. 애플 로그인 마이그레이션에서 계속하기를 @__CAPGO_KEEP_0__/social-login으로 이동하세요..

애플 로그인 마이그레이션에서 계속하기를 @capgo/social-login으로 이동하세요.

애플 로그인 마이그레이션을 @capgo/social-login으로 사용하여 인증 및 계정 흐름을 계획하고 있습니다.

애플 로그인 마이그레이션을 @__CAPGO_KEEP_0__/social-login으로 사용하여 인증 및 계정 흐름을 계획하고 있습니다. 애플 로그인 마이그레이션을 @capgo/__CAPGO_KEEP_1__-social-login으로 연결합니다. 애플 로그인 마이그레이션에서 계속하기를 @__CAPGO_KEEP_0__/social-login으로 이동하세요. @capgo/capacitor-social-login native capgo capability in capacitor-social-login @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for capgo의 구현 세부 정보에 대한 @capacitor-native-biometric, 및 두 단계 인증 implementation detail in Two-factor authentication.