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

개요

이 가이드는 레거시에서 전환하는 것을 설명합니다. @capacitor-community/apple-sign-in plugin을 현대적인 @capgo/capacitor-social-login 패키지입니다. 새로운 플러그인은 여러 가지 소셜 인증 제공자에 대한 통합 인터페이스를 제공하며 향상된 TypeScript 지원 및 활발한 유지 관리를 제공합니다.

설치

1. 기존 패키지를 삭제하세요:

   npm uninstall @capacitor-community/apple-sign-in

2. 새로운 패키지를 설치하세요:

   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와 웹 기반 OAuth 인증을 위한 백엔드 콜백 URL과 같은 추가적인 세부 정보가 필요합니다.

로그인

로그인 프로세스는 여러 매개 변수에서 더 간단한 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 구조화된

// 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 기능을 통해 익숙한 설정 절차를 유지합니다:

1. iOS 설정은 여전히 크게 변경되지 않았습니다. 여전히 다음을 수행해야 합니다:
   • Xcode에서 "Apple과 함께 로그인" 기능을 활성화해야 합니다.
   • 애플 개발자 포털에서 앱을 구성해야 합니다.
   • iOS에 대한 추가 code 변경 사항이 필요하지 않습니다.

안드로이드 설정

안드로이드 안드로이드는 웹 기반 OAuth 인증을 통해 네이티브 지원을 받습니다:

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

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

상세한 안드로이드 설정 지침을 참조하려면 안드로이드 설정 안내서.

주요 이점

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

1. 통합 API 여러 가지 소셜 제공자 (Google, Facebook, Apple)across
2. TypeScript의 개선된 타이핑 보다 완벽한 타입 정의
3. 활발한 커뮤니티 유지 deprecated 버전과 비교하여
4. 내장 Android 지원 웹 기반 인증을 통해
5. 지속 로그인 상태 관리
6. 일관된 오류 유형과 함께 개선된 오류 처리

Breaking Changes

1. explicit 초기화가 이제 필요합니다 - 기본 설정이 없습니다
2. 응답 객체 구조가 변경되었습니다 - 중첩된 결과 형식
3. Android 구현은 백엔드 서비스가 필요합니다 OAuth에 대한
4. 토큰 갱신 처리가 다릅니다 - 토큰 관리가 개선되었습니다
5. 오류 처리 및 오류 유형이 변경되었습니다 - 더 자세한 오류

더 자세한 설정 방법에 대한 안내는 공식 문서를 참조하십시오 편집 페이지.