콘텐츠로 건너뛰기
Capgo - Live Updates for Capacitor Apps Capgo

시작하기

  1. 패키지 설치

    Terminal window
    npm i @capgo/capacitor-social-login

  2. 네이티브 프로젝트와 동기화

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

핵심 흐름 예시

Section titled “핵심 흐름 예시”

로그인

Section titled “로그인”
await SocialLogin.login({
  provider: 'google',
  options: { scopes: ['profile', 'email'] },
});


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

세션 확인

Section titled “세션 확인”
const status = await SocialLogin.isLoggedIn({ provider: 'google' });
await SocialLogin.logout({ provider: 'google' });

인증 코드 및 새로고침

Section titled “인증 코드 및 새로고침”
// For providers that support this mode
const authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });
await SocialLogin.refresh({ provider: 'google', options: {} as never });

고급 도우미

Section titled “고급 도우미”
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' });

제공업체별 참고 사항

Section titled “제공업체별 참고 사항”

Google 오프라인 모드

Section titled “Google 오프라인 모드”

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

Apple

Section titled “Apple”

엄격한 토큰 처리를 위해서는 useProperTokenExchange: true을 설정하고 Android 단순화된 설정을 위해서는 useBroadcastChannel: true를 설정하세요.

OAuth2 웹 리디렉션 흐름

Section titled “OAuth2 웹 리디렉션 흐름”

페이지에서 벗어나 탐색하는 웹 흐름에는 OAuth2LoginOptions.flow: 'redirect'을 사용하세요.

Capacitor의 공급자 구성

Section titled “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,
      },
    },
  },
};

관련 문서

Section titled “관련 문서”