Getting Started

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

        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을 사용하여 플러그인을 설치할 수 있습니다. Capgo 스킬을 AI 도구에 추가하려면 다음 명령어를 사용하세요:

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.

터미널 창

클립보드에 복사
만약 Manual Setup을 선호한다면, 다음 명령어를 실행하고 아래의 플랫폼별 지침을 따르세요:
```
npm install @capgo/capacitor-social-login
```
Sync with native projects
터미널 창
```
npx 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,
    },
  },
});

핵심 흐름 예제

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

제공자별 참고사항

구글 오프라인 모드

google.mode: 'offline' Section titled “returns” serverAuthCode 로그인 모드에서 로그아웃, isLoggedIn, getAuthorizationCode, 및 refresh는 사용할 수 없습니다.

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

strict 토큰 처리와 Android를위한 단순한 설정을위한

OAuth2 웹 리다이렉트 흐름 useProperTokenExchange: true __CAPGO_KEEP_0__ useBroadcastChannel: true __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

페이지에서 벗어날 웹 흐름을 위해 사용하세요. OAuth2LoginOptions.flow: 'redirect' Section titled “Dynamic provider dependencies”

다이나믹 제공자 의존성

Add provider configuration to

클립보드에 복사 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중요한 세부 사항:

실행

__CAPGO_KEEP_0__ npx cap sync 제공자 설정을 변경한 후.
제공자 설정이 제공되지 않으면 모든 제공자가 기본으로 설정됩니다. true 과거 호환성을 위해.
제공자를 비활성화하면 false 이것은 런타임 시에 제공자가 사용하는 시스템 API만 사용하는 경우에도 제공자가 사용할 수 없게 합니다.
이 설정은 iOS 및 Android에만 영향을 주며 Web에는 영향을 주지 않습니다.
Android에서 Apple Sign-In은 외부 SDK 의존성을 사용하지 않고 OAuth를 사용합니다.
Twitter/X는 표준 OAuth 2.0을 사용하고 외부 SDK 의존성을 사용하지 않습니다.

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

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

Getting Started에서 계속

Capgo를 사용 중이라면 Getting Started 인증 및 계정 흐름을 계획하고 연결하기 위해 Using @capgo/capacitor-social-login Capacitor의 native 기능을 사용하는 @capgo/capacitor-social-login @capgo/capacitor-social-login Capacitor의 @capgo/capacitor-social-login 구현 세부 사항 @capgo/capacitor-passkey Capacitor의 @capgo/capacitor-passkey 구현 세부 사항 @capgo/capacitor-native-biometric Capacitor의 @capgo/capacitor-native-biometric 구현 세부 사항 및 Two-factor authentication Two-factor authentication 구현 세부 사항.