애플 로그인 마이그레이션을 @capgo/social-login으로

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

개요

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

설치 제목

구성 요소를 제거하세요:

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와 백엔드 콜백 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;
    };
  };
}

로그인 상태 확인

Checking Login Status

Section titled “New Capabilities”

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

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

Android 설정

Android는 웹 기반 OAuth 인증을 통해 네이티브 지원을 받습니다: 새로운 플러그인은 Android 지원을 제공하지만 추가 설정이 필요합니다:

Apple Developer Portal에서 서비스 ID를 생성해야합니다.

웹 인증 엔드포인트를 구성해야합니다.
Android 앱을 OAuth 흐름을 처리하도록 설정해야합니다.
Android
백엔드 서비스 설정이 필요합니다

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

주요 이점

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

다중 소셜 제공자 (Google, Facebook, Apple)에서 통합 API 타입스크립트의 향상된 타이핑
타입 정의의 향상 활발한 커뮤니티 유지
구 버전보다 더 나은 유지보수 __CAPGO_KEEP_0__
Android 지원 내장 웹 기반 인증을 통해
지속 로그인 상태 관리
일관된 오류 유형과 함께 오류 처리

변경 사항

explicit 초기화가 필요합니다. - 기본 설정이 없습니다.
응답 객체 구조가 변경되었습니다. - 중첩된 결과 형식
Android 구현은 백엔드 서비스가 필요합니다. OAuth 인증을 위해
토큰 갱신 처리는 다릅니다 - 토큰 관리가 개선되었습니다
오류 처리 및 오류 유형이 변경되었습니다 - 더 자세한 오류 메시지가 표시됩니다

세부한 설정 방법에 대한 자세한 설명은 공식 문서를 참조하세요 애플 로그인 마이그레이션에서 @__CAPGO_KEEP_0__/social-login으로 계속 진행하세요.

애플 로그인 마이그레이션을 @__CAPGO_KEEP_0__/social-login과 연결하세요 애플 로그인 마이그레이션을 @capgo/social-login과 연결하세요 애플 로그인 마이그레이션을 @__CAPGO_KEEP_0__/social-login과 연결하세요 Capgo의 @capgo/capacitor-social-login Capgo의 @capgo/capacitor-social-login을 사용하여 Capgo의 @capgo/capacitor-social-login Capgo의 @capgo/capacitor-social-login의 구현 세부 정보 Capgo의 @capgo/capacitor-passkey Capgo의 @capgo/capacitor-passkey의 구현 세부 정보 Capgo의 @capgo/capacitor-native-biometric Capgo의 @capgo/capacitor-native-biometric의 구현 세부 정보, 그리고 Capgo의 두 단계 인증 Capgo의 두 단계 인증의 구현 세부 정보