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

개요

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

왜 이것이 작동하는가

이 플러그인은 Ionic Auth Connect와 호환되는 Auth Connect 호환성 래퍼를 포함합니다. SocialLoginAuthConnect이 래퍼는熟悉한 Ionic Auth Connect 제공자 ID를 built-in OAuth2 엔진으로 mapping하여, Ionic Auth Connect와 호환되는 이름을 사용할 수 있도록합니다. auth0, azure설치 okta.

Install

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

Copy to clipboard

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

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

Provider 초기화

Ionic Auth Connect가 사용한 동일한 Provider ID를 원할 때는 authConnect presets를 사용하세요:

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

제공자별 기본 설정 예시

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 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);

엔드포인트 오버라이딩

만약 고객이 사용하는 테넌트가 커스텀 엔드포인트를 사용한다면 직접 오버라이딩하세요: domain 클립보드 복사 issuer직접 OAuth2 구성

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

Direct OAuth2 configuration

__CAPGO_KEEP_0__

• __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

1. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

2. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ offline_access __CAPGO_KEEP_0__

3. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

4. 직접 oauth2 엔트리들이 이긴다 만약에 두 개를 정의한다면 authConnect.auth0 그리고 oauth2.auth0직접 oauth2 설정은 우선된다.

관련 문서

• 소셜 로그인 시작하기
• OAuth2 및 OIDC 제공자
• Ionic Auth Connect에서 마이그레이션
• Ionic Enterprise 플러그인 마이그레이션 솔루션

Ionic Auth Connect 이관에서 계속하기 @capgo/capacitor-social-login

Ionic Auth Connect을 사용 중이라면 Ionic Auth Connect 이관에서 계속하기 @capgo/capacitor-social-login 인증 및 계정 흐름을 계획하고 연결하려면 @capgo/capacitor-social-login을 사용하여 native 기능을 사용하는 @capgo/capacitor-social-login @capgo/capacitor-social-login implementation detail을 사용하는 @capgo/capacitor-social-login @capgo/capacitor-passkey implementation detail을 사용하는 @capgo/capacitor-passkey @capgo/capacitor-native-biometric implementation detail in @capgo/capacitor-native-biometric, and 두 단계 인증 implementation detail in 두 단계 인증.