시작하기

설치

Capgo AI-Assisted Setup을 사용하여 플러그인을 설치할 수 있습니다. AI 도구에 Capgo 기능을 추가하려면 다음 명령어를 사용하세요:

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

페이지/영역: Capgo 마케팅 웹사이트. 역할: UI 레이블. 표시되는 곳: 페이지 agent/[slug].astro. 메시지 키 `agents_page_copy_label` (Agent Page Copy Label).

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-social-login` plugin in my project.

그다음에 다음 프롬프트를 사용하세요:

1. 만약 Manual Setup을 선호한다면, 플러그인을 설치하기 위해 다음 명령어를 실행하고 아래 플랫폼별 지침을 따르세요:

   bun add @capgo/capacitor-social-login

2. 원본 프로젝트와 동기화

   bunx cap sync

3. 앱 시작 시 초기화

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   await SocialLogin.initialize({
     google: {
       webClientId: 'your-google-web-client-id',
       iOSClientId: 'your-google-ios-client-id',
       iOSServerClientId: 'your-google-web-client-id',
       mode: 'online',
     },
     apple: {
       clientId: 'your-apple-service-id',
       useProperTokenExchange: true,
       useBroadcastChannel: true,
     },
     facebook: {
       appId: 'your-facebook-app-id',
     },
     twitter: {
       clientId: 'your-twitter-client-id',
       redirectUrl: 'myapp://oauth/twitter',
     },
     oauth2: {
       github: {
         appId: 'your-github-client-id',
         authorizationBaseUrl: 'https://github.com/login/oauth/authorize',
         accessTokenEndpoint: 'https://github.com/login/oauth/access_token',
         redirectUrl: 'myapp://oauth/github',
         scope: 'read:user user:email',
         pkceEnabled: true,
       },
     },
   });

코어 흐름 예시

로그인

await SocialLogin.login({
  provider: 'google',
  options: { scopes: ['profile', 'email'] },
});

await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'github',
    scope: 'read:user user:email',
  },
});

세션 확인

const status = await SocialLogin.isLoggedIn({ provider: 'google' });
await SocialLogin.logout({ provider: 'google' });

복사

// For providers that support this mode
const authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });
await SocialLogin.refresh({ provider: 'google', options: {} as never });

세션 확인

const jwt = await SocialLogin.decodeIdToken({
  idToken: 'eyJhbGciOi...',
});

const { date } = await SocialLogin.getAccessTokenExpirationDate({
  accessTokenExpirationDate: Date.now() + 3600 * 1000,
});

const expired = await SocialLogin.isAccessTokenExpired({
  accessTokenExpirationDate: Date.now() + 1000,
});

const active = await SocialLogin.isRefreshTokenAvailable({ refreshToken: 'a-token' });

제공자별 참고사항

Session checks

google.mode: 'offline' 리턴 serverAuthCode 로그인에서 반환합니다. 이 모드에서는 로그아웃, isLoggedIn, getAuthorizationCode, 및 refresh가 사용할 수 없습니다.

사용 serverAuthCode 백엔드에서 토큰 교환에만 사용하세요. 앱에서 호출해야 하는 경우 SocialLogin.refresh() 대신 사용하세요. google.mode: 'online' 애플

애플

Set useProperTokenExchange: true OAuth2 웹 리다이렉트 흐름 useBroadcastChannel: true 안드로이드 간소화된 설정.

OAuth2 웹 리다이렉트 흐름

Use OAuth2LoginOptions.flow: 'redirect' 페이지에서 벗어나서 이동하는 흐름을 위해 사용하세요.

동적 제공자 의존성

제공자 목록을 줄이기 위해 앱 크기를 줄일 수 있습니다. 앱이 특정 제공자만 필요할 때 가장 유용합니다.

제공자 설정을 추가하세요. capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'MyApp',
  webDir: 'dist',
  plugins: {
    SocialLogin: {
      providers: {
        google: true,
        facebook: true,
        apple: true,
        twitter: false,
      },
      logLevel: 1,
    },
  },
};

export default config;

제공자 값은 다음과 같습니다:

• true: 제공자가 활성화되어 있고, 네이티브 의존성이 패키징되어 있습니다.
• false: 제공자가 비활성화되어 있고, 네이티브 의존성이 패키징되지 않았습니다.

중요한 세부사항:

• 실행 bunx cap sync 변경된 제공자 구성 후
• 제공자 구성이 제공되지 않으면 모든 제공자가 true 과거 호환성을 위해
• 제공자에 대한 비활성화를 통해 false 제공자 비활성화는 런타임 시에도 제공자가 사용하는 시스템 API만 사용하는 경우에도
• 이 구성은 iOS 및 Android에만 영향을 미치며 Web에는 영향을 미치지 않습니다.
• Android에서 Apple Sign-In은 OAuth를 사용하며 외부 SDK 의존성을 사용하지 않습니다.
• Twitter/X는 표준 OAuth 2.0을 사용하며 외부 SDK 의존성을 사용하지 않습니다.

Google Sign-In 및 Apple Sign-In만 포함하려면:

plugins: {
  SocialLogin: {
    providers: {
      google: true,
      facebook: false,
      apple: true,
      twitter: false,
    },
  },
}

관련 문서

• 인터그레이션 개요
• Better Auth 통합
• OAuth2 및 OIDC 제공자
• 문제 해결
• 개인 정보 선언 및 iOS URL 핸들러
• Ionic Auth Connect에서 마이그레이션
• Social Login Auth Connect 마이그레이션 가이드
• 기존 제공자 마이그레이션
• Ionic Enterprise 플러그인 마이그레이션 솔루션

시작부터 계속

만약에 사용 중이라면 시작하기 인증 및 계정 흐름을 계획하고 연결하려면 사용 @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 for @capgo/capacitor-native-biometric 구현 세부 사항에 대해 Getting Started Capgo의 두 단계 인증 구현 세부 사항.