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

개요

Capgo

구글, 애플, 페이스북, 기타 식별자 제공자와 같은 식별자 제공자에서 네이티브 OAuth2 흐름으로 Ionic Auth Connect를 대체하는 Social Login은 iOS, Android, Web에서 여러 제공자를 하나의 플러그인으로 지원합니다.

Why this works SocialLoginAuthConnect인증 연결 호환성 래퍼를 포함하는 플러그인은 auth0, azure인증 연결 호환성 래퍼 okta.

인증 연결 호환성 래퍼

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

인증 연결 호환성 래퍼

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

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

초기화 제공자

사용자 정의 제공자 ID를 사용할 때는 Ionic Auth Connect가 사용한 제공자 ID와 동일한 제공자 ID를 사용하고 싶다면 authConnect 복사

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

Section titled “Supported provider IDs”

• auth0
• azure
• cognito
• okta
• onelogin

Section titled “Login, logout, and token access”

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

엔드포인트 오버라이드

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

__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 Auth Connect 이관에서 계속하기 @capgo/capacitor-social-login

Ionic Auth Connect 이관을 사용 중이라면 Ionic Auth Connect 이관 @capgo/capacitor-social-login 인증 및 계정 흐름을 계획하고 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login과 연결 @capgo/capacitor-social-login 사용 Using @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 두 단계 인증 구현 세부 정보에 대한 두 단계 인증