Ionic Auth Connect 이동을 @capgo/capacitor-social-login로

개요

Capgo

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

왜 이것이 작동하는가 제목 SocialLoginAuthConnect이 플러그인은 Ionic Auth Connect와 호환되는 Auth Connect 호환성 wrapper를 포함합니다. auth0, azure이 wrapper는 친숙한 Ionic Auth Connect 제공자 ID를 내장 OAuth2 엔진으로 mapping하여 이름이 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';

제공자 초기화

사용할 때 Ionic Auth Connect가 사용한 동일한 제공자 ID를 받으려면 presets를 사용하세요: 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',
    },
  },
});

로그인, 로그아웃, 토큰 접근

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

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

엔드포인트 오버라이딩

각 프리셋은 기본 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 구성

프리셋을 사용하지 않으려면 일반 OAuth2 문서에서 제공자들을 직접 구성하세요:

• OAuth2 및 OIDC 제공자 안내서

이동 노트

1. 호환성层는 OAuth2 기반입니다 제공자 이름은 Ionic의 네이티브 implementation 세부 사항이 아닙니다.

2. 리프레시 토큰은 스코프에依存합니다 요청 offline_access 리프레시 토큰이 필요할 때는 제공자에 따라 적절한 대체를 사용하세요.

3. 사용자 정의 엔드포인트는 기본 설정을 덮어쓸 수 있습니다 기본 설정이 정확하지 않다면, 차이점이 있는 엔드포인트만 덮어쓰세요

4. 직접 oauth2 엔트리(Entry)가 우선합니다 만약에 authConnect.auth0 직접 oauth2.auth0설정은 우선합니다 oauth2 관련 문서

관련 문서

• OAuth2 및 OIDC 제공자
• OAuth2 and OIDC providers
• Migrate from Ionic Auth Connect
• Ionic enterprise plugin migration solution

Keep going from Ionic Auth Connect Migration to @capgo/capacitor-social-login

If you are using Ionic Auth Connect Migration to @capgo/capacitor-social-login 이를 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login과 연결합니다. @capgo/capacitor-social-login을 사용하여 native 기능을 구현하기 위해 @capgo/capacitor-social-login을 사용합니다. @capgo/capacitor-social-login @capgo/capacitor-passkey @capgo/capacitor-social-login 구현 세부 사항에 대한 @capgo/capacitor-passkey @capgo/capacitor-native-biometric 구현 세부 사항에 대한 @capgo/capacitor-native-biometric, 그리고 두 단계 인증 구현 세부 사항에 대한 두 단계 인증.