Ionic Auth Connect 이관에서 @capgo/capacitor-social-login로 진행하세요

이 플러그인의 설치 단계와 전체 마크다운 가이드를 포함한 설정 명령어를 복사하세요.

개요

Capgo 소셜 로그인은 Ionic Auth Connect를 Google, Apple, Facebook 및 기타 식별자 제공자와 같은 제공자-자연 OAuth2 흐름으로 대체합니다. 여러 제공자를 하나의 플러그인으로 지원하고 iOS, Android 및 Web에서 작동합니다.

이게 왜 작동하는가

인증 연결 호환성 wrapper를 포함하고 있습니다. SocialLoginAuthConnect이 wrapper는 Ionic Auth Connect의 친숙한 제공자 ID를 OAuth2 엔진에 매핑하여 제공자 ID를 사용할 수 있게 해줍니다. 예를 들어, Google, Facebook, Apple 등 auth0, azure설치 okta.

이름이 '설치'인 섹션

bun add @capgo/capacitor-social-login
bunx cap sync

이름이 '인증 연결 호환성 wrapper를 대체합니다.'인 섹션

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

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

__CAPGO_KEEP_1__

__CAPGO_KEEP_3__ __CAPGO_KEEP_4__ __CAPGO_KEEP_5__ authConnect __CAPGO_KEEP_6__

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',
    },
  },
});

__CAPGO_KEEP_7__

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',
});

__CAPGO_KEEP_11__

Auth0 preset 예시

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 preset 예시

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 preset 예시

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 preset 예시

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 preset 예시

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 or issuer. 사용자 tenant가 커스텀 엔드포인트를 사용한다면 직접 오버라이드하세요:

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 구성

If you do not want presets, configure the same providers directly in the generic OAuth2 docs:

OAuth2 및 OIDC 제공자 안내

이동 노트

호환성层는 OAuth2 기반입니다 제공자 이름만 유지하고 Ionic의 원래 구현 세부 정보는 아닙니다
새로고침 토큰은 범위에依存합니다 Request offline_access 또는 새로고침 토큰이 필요할 때 제공자별로 해당하는 토큰을 요청하세요
사용자 정의 엔드포인트는 presets을 덮어씁니다 preset이 정확하지 않다면, 차이점이 있는 엔드포인트만 덮어씁니다
직접 oauth2 entries win 만약에 __CAPGO_KEEP_0__과 __CAPGO_KEEP_1__을 모두 정의한다면 authConnect.auth0 그리고 oauth2.auth0, oauth2 ,

이용 중인 경우 Ionic Auth Connect 이관에서 @capgo/capacitor-social-login로 계속 진행하세요 인증 및 계정 흐름을 계획하고 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 연결하세요 @capgo/capacitor-social-login을 사용하여 @capgo/capacitor-social-login을 사용하는 데 native 기능을 위해 @capgo/capacitor-social-login @capgo/capacitor-social-login의 구현 세부 정보를 위해 @capgo/capacitor-passkey @capgo/capacitor-passkey의 구현 세부 정보를 위해 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric의 구현 세부 정보를 위해 두 요인 인증 for the implementation detail in 두 요인 인증.