메뉴로 이동

Getting Started

GitHub

AI-assisted 설치를 사용하여 플러그인을 설치할 수 있습니다. 다음 명령어를 사용하여 AI 도구에 Capgo 스킬을 추가하세요.

터미널 창
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

다음과 같은 프롬프트를 사용하세요:

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

만약에 수동 설치를 원한다면, 플러그인을 설치하기 위해 다음 명령어를 실행하고 아래의 플랫폼별 지침을 따르세요.

  1. 패키지 설치

    터미널 창
    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',
    iOSServerClientId: 'your-google-server-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' });

__CAPGO_KEEP_0__ 인증 코드 및 갱신

__CAPGO_KEEP_0__ 인증 코드 및 갱신 섹션
// For providers that support this mode
const authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });
await SocialLogin.refresh({ provider: 'google', options: {} as never });

__CAPGO_KEEP_1__ 고급 도우미

__CAPGO_KEEP_1__ 고급 도우미 섹션
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' });

__CAPGO_KEEP_2__ 제공자별 참고사항

__CAPGO_KEEP_2__ 제공자별 참고사항 섹션

__CAPGO_KEEP_3__ 구글 오프라인 모드

__CAPGO_KEEP_3__ 구글 오프라인 모드 섹션

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

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

OAuth2 웹 리다이렉트 흐름 useProperTokenExchange: true OAuth2 웹 리다이렉트 흐름 useBroadcastChannel: true 사용하세요.

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

__CAPGO_KEEP_3__ OAuth2LoginOptions.flow: 'redirect' 페이지에서 벗어나지 않는 웹 흐름을 위해.

Capacitor의 제공자 구성

제목 "Capacitor의 제공자 구성"

사용하지 않는 제공자를 비활성화하여 네이티브 바이너리를 줄이려면:

import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'My App',
webDir: 'dist',
plugins: {
SocialLogin: {
providers: {
google: true,
facebook: true,
apple: true,
twitter: false,
},
},
},
};

시작하기에서 계속

시작하기에서 계속

Capgo를 사용 중이라면 시작하기 인증 및 계정 흐름을 계획하고 연결하려면 Capgo를 사용하여 @capgo/capacitor-social-login Capgo를 사용하여 @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, and 두 단계 인증 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-biometric, and