시작하기

이 플러그인의 설치 단계와 전체 마크다운 가이드가 포함된 설정 프롬프트를 복사하세요.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-social-login`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/social-login/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

설치

AI-Assisted Setup으로 플러그인을 설치할 수 있습니다. 다음 명령어로 AI 도구에 Capgo 스킬을 추가하세요:

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

그런 다음 아래 프롬프트를 사용하세요:

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

수동 설정을 선호한다면, 다음 명령어를 실행하여 플러그인을 설치하고 아래의 플랫폼별 지침을 따르세요:

패키지 설치
터미널 창
```
bun add @capgo/capacitor-social-login
```
네이티브 프로젝트와 동기화
터미널 창
```
bunx cap sync
```

앱 시작 시 초기화

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

팀이 이 플러그인을 선택하는 경우

Google, Apple, Facebook, Twitter/X 및 사용자 정의 OAuth2 또는 OIDC 제공자를 위한 단일 패키지.
비추천 커뮤니티 플러그인 대신 Credential Manager를 통한 Android Google Sign-In.
문서화된 호환성 계층을 통한 Ionic Auth Connect 스타일 제공자.
모바일과 웹 빌드 간 로그인 code 공유가 필수인 앱.

핵심 플로우 예시

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

Provider별 참고 사항

Google 오프라인 모드

google.mode: 'offline' 반환합니다 serverAuthCode 로그인부터 사용할 수 있습니다. 이 모드에서는 logout, isLoggedIn, getAuthorizationCode, refresh를 사용할 수 없습니다.

사용 serverAuthCode 백엔드 토큰 교환 입력으로만 사용하세요. 호출이 필요하면 SocialLogin.refresh() 앱에서 다음을 사용하세요 google.mode: 'online' 대신 사용하세요.

Apple

설정 useProperTokenExchange: true 엄격한 토큰 처리를 위해, useBroadcastChannel: true Android 간편 설정을 위해.

OAuth2 웹 리다이렉트 플로우

사용 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;

Provider 값의 의미:

true: provider가 활성화되고 네이티브 의존성이 번들에 포함됩니다.
false: provider가 비활성화되고 네이티브 의존성이 번들에 포함되지 않습니다.

중요 사항:

실행 bunx cap sync provider 설정을 변경한 후
provider 설정이 제공되지 않으면 모든 provider의 기본값은 true 하위 호환성을 위해
provider를 ...로 비활성화하면 false 해당 provider가 시스템 API만 사용하더라도 런타임에서는 사용할 수 없습니다.
이 설정은 iOS와 Android에만 적용되며, Web에는 영향을 주지 않습니다.
Android의 Apple Sign-In은 외부 SDK 의존성 없이 OAuth를 사용합니다.
Twitter/X는 외부 SDK 의존성 없이 표준 OAuth 2.0을 사용합니다.

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

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

시작하기 다음 단계

사용 중이라면 시작하기 인증 및 계정 흐름을 설계할 때, 이를 다음 항목과 연결하세요: @capgo/capacitor-social-login 사용하기 @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의 구현 세부 사항은, 2단계 인증 2단계 인증의 구현 세부 사항에 대해서는