Ionic Auth Connect의 @capgo/capacitor-social-login 마이그레이션

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

개요

Capgo Social Login은 Google, Apple, Facebook 등 ID 공급자의 네이티브 OAuth2 플로우로 Ionic Auth Connect를 대체합니다. 하나의 플러그인에서 여러 ID 공급자를 지원하며 iOS, Android, Web에서 모두 작동합니다.

작동하는 이유

이 플러그인에는 Auth Connect 호환 래퍼가 포함되어 있으며 이름은 SocialLoginAuthConnect입니다. 익숙한 Ionic Auth Connect 프로바이더 ID를 내장된 OAuth2 엔진에 매핑하므로, 다음과 같은 이름을 계속 사용할 수 있습니다: auth0, azure, 그리고 okta.

설치

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

import 문 교체

// Before
import { AuthConnect } from '@ionic-enterprise/auth-connect';

// After
import { SocialLoginAuthConnect } from '@capgo/capacitor-social-login';

provider 초기화

트레이드오프를 평가하려면 authConnect Ionic Auth Connect에서 사용하던 것과 동일한 provider ID를 쓰려면 프리셋을 사용하세요:

await SocialLoginAuthConnect.initialize({
  authConnect: {
    auth0: {
      domain: 'https://your-tenant.auth0.com',
      clientId: 'your-auth0-client-id',
      redirectUrl: 'myapp://oauth/auth0',
      audience: 'https://your-api.example.com',
    },
    azure: {
      tenantId: 'common',
      clientId: 'your-azure-client-id',
      redirectUrl: 'myapp://oauth/azure',
    },
    cognito: {
      domain: 'https://your-domain.auth.region.amazoncognito.com',
      clientId: 'your-cognito-client-id',
      redirectUrl: 'myapp://oauth/cognito',
    },
    okta: {
      issuer: 'https://dev-12345.okta.com/oauth2/default',
      clientId: 'your-okta-client-id',
      redirectUrl: 'myapp://oauth/okta',
    },
    onelogin: {
      issuer: 'https://your-tenant.onelogin.com/oidc/2',
      clientId: 'your-onelogin-client-id',
      redirectUrl: 'myapp://oauth/onelogin',
    },
  },
});

지원되는 provider ID

auth0
azure
cognito
okta
onelogin

const result = await SocialLoginAuthConnect.login({
  provider: 'auth0',
});

const status = await SocialLoginAuthConnect.isLoggedIn({
  provider: 'auth0',
});

const code = await SocialLoginAuthConnect.getAuthorizationCode({
  provider: 'auth0',
});

await SocialLoginAuthConnect.logout({
  provider: 'auth0',
});

Provider별 프리셋 예시

Auth0 프리셋 예시

await SocialLoginAuthConnect.initialize({
  authConnect: {
    auth0: {
      domain: 'https://your-tenant.auth0.com',
      clientId: 'your-auth0-client-id',
      redirectUrl: 'myapp://oauth/auth0',
      audience: 'https://your-api.example.com',
    },
  },
});

const auth0Result = await SocialLoginAuthConnect.login({
  provider: 'auth0',
});

console.log(auth0Result.result.idToken);

Azure 프리셋 예시

await SocialLoginAuthConnect.initialize({
  authConnect: {
    azure: {
      tenantId: 'common',
      clientId: 'your-azure-client-id',
      redirectUrl: 'myapp://oauth/azure',
    },
  },
});

const azureResult = await SocialLoginAuthConnect.login({
  provider: 'azure',
});

console.log(azureResult.result.resourceData);

Cognito 프리셋 예시

await SocialLoginAuthConnect.initialize({
  authConnect: {
    cognito: {
      domain: 'https://your-domain.auth.region.amazoncognito.com',
      clientId: 'your-cognito-client-id',
      redirectUrl: 'myapp://oauth/cognito',
    },
  },
});

const cognitoResult = await SocialLoginAuthConnect.login({
  provider: 'cognito',
});

console.log(cognitoResult.result.idToken);

Okta 프리셋 예시

await SocialLoginAuthConnect.initialize({
  authConnect: {
    okta: {
      issuer: 'https://dev-12345.okta.com/oauth2/default',
      clientId: 'your-okta-client-id',
      redirectUrl: 'myapp://oauth/okta',
    },
  },
});

const oktaResult = await SocialLoginAuthConnect.login({
  provider: 'okta',
});

console.log(oktaResult.result.resourceData);

OneLogin 프리셋 예시

await SocialLoginAuthConnect.initialize({
  authConnect: {
    onelogin: {
      issuer: 'https://your-tenant.onelogin.com/oidc/2',
      clientId: 'your-onelogin-client-id',
      redirectUrl: 'myapp://oauth/onelogin',
    },
  },
});

const oneloginResult = await SocialLoginAuthConnect.login({
  provider: 'onelogin',
});

console.log(oneloginResult.result.idToken);

엔드포인트 재정의

각 preset은 다음을 기반으로 기본 OAuth2 구성을 생성합니다 domain 또는 issuer. 테넌트가 커스텀 엔드포인트를 사용한다면 직접 재정의하세요:

await SocialLoginAuthConnect.initialize({
  authConnect: {
    onelogin: {
      issuer: 'https://your-tenant.onelogin.com/oidc/2',
      clientId: 'your-onelogin-client-id',
      redirectUrl: 'myapp://oauth/onelogin',
      authorizationBaseUrl: 'https://your-tenant.onelogin.com/oidc/2/auth',
      accessTokenEndpoint: 'https://your-tenant.onelogin.com/oidc/2/token',
      resourceUrl: 'https://your-tenant.onelogin.com/oidc/2/me',
      logoutUrl: 'https://your-tenant.onelogin.com/oidc/2/logout',
    },
  },
});

직접 OAuth2 설정

preset을 사용하지 않으려면 generic OAuth2 문서에서 동일한 provider를 직접 설정하세요:

OAuth2 및 OIDC provider 가이드

마이그레이션 노트

호환성 레이어는 OAuth2 기반입니다 Ionic의 네이티브 구현 세부 사항이 아닌 프로바이더 이름을 유지합니다.
리프레시 토큰은 여전히 스코프에 의존합니다 요청 offline_access 리프레시 토큰이 필요할 때는 프로바이더별 동등한 설정을 사용합니다.
커스텀 엔드포인트가 프리셋을 오버라이드할 수 있습니다 프리셋이 거의 맞지만 정확하지 않다면, 다른 엔드포인트만 오버라이드하세요.
직접 연동 oauth2 엔트리가 우선합니다 둘 다 정의한 경우 authConnect.auth0 및 oauth2.auth0, 직접 oauth2 config가 우선합니다.

사용 중이라면 Ionic Auth Connect의 @capgo/capacitor-social-login 마이그레이션 인증 및 계정 흐름을 설계할 때, 이를 다음 항목과 연결하세요: @capgo/capacitor-social-login 사용하기 @capgo/capacitor-social-login 사용 시 네이티브 기능을 위해, @capgo/capacitor-social-login @capgo/capacitor-social-login의 구현 세부 사항은, @capgo/capacitor-passkey @capgo/capacitor-passkey의 구현 세부 사항은 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric의 구현 세부 사항은, 2단계 인증 2단계 인증의 구현 세부 사항에 대해서는