시작하기

설치

        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.

설치

Capgo 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.

설치 패키지

설치하기

npm install @capgo/capacitor-social-login

원본 프로젝트와 동기화
터미널 창
```
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' returns serverAuthCode 로그인에서 반환

Use serverAuthCode 백엔드에서만 사용하세요. 로그아웃, isLoggedIn, getAuthorizationCode, refresh가 사용할 수 없습니다. SocialLogin.refresh() Use google.mode: 'online' 대신 사용하세요.

Apple

Set useProperTokenExchange: true strict한 토큰 처리와 Android의 단순한 설정을 위해 useBroadcastChannel: true OAuth2 웹 리다이렉트 흐름

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;

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

true: 제공자가 활성화되어 있고 네이티브 종속성이 패키징됩니다.
false: 제공자가 비활성화되어 있고 네이티브 종속성이 패키징되지 않습니다.

중요한 세부사항:

Run npx cap sync 변경된 제공자 구성 후
제공자 구성이 제공되지 않으면 모든 제공자가 true 위치로 하여금
이 구성은 iOS 및 Android에만 영향을 미치며 Web에는 영향을 미치지 않습니다. false Android에서 Apple Sign-In은 OAuth를 사용하며 외부 __CAPGO_KEEP_0__ 의존성을 사용하지 않습니다.
Twitter/X는 표준 OAuth 2.0을 사용하며 외부 __CAPGO_KEEP_0__ 의존성을 사용하지 않습니다.
Apple Sign-In on Android uses OAuth without external SDK dependencies.
Twitter/X은 표준 OAuth 2.0을 사용하며 외부 SDK 의존성을 사용하지 않습니다.

기존 제공자에서 마이그레이션

만약에 시작하기 인증 및 계정 흐름을 계획하는 경우 사용 @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 @capgo/capacitor-native-생체인식 인증 2 단계 두 단계 인증 구현에 대한 구체적인 세부 정보를 위해.