설치 Supabase 인증을 위한 Capacitor 소셜 로그인 플러그인

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ Capgo 이 튜토리얼은 Capacitor 앱에서 Supabase와 함께 소셜 인증 (Google, Apple, Facebook)을 통합하는 방법을 안내합니다.

Supabase __CAPGO_KEEP_0__-social-login 플러그인은 iOS, Android, 웹 플랫폼에서 네이티브 소셜 인증을 제공하며, Supabase는 내장 인증, 보안 토큰 관리, 실시간 데이터베이스 통합을 제공합니다. @capgo/capacitor-social-login __CAPGO_KEEP_1__ @capgo/capacitor-supabase 소셜 인증이 간소화됩니다.

보안 토큰 관리가 보장됩니다.
iOS, Android, 웹 플랫폼에서 호환성이 보장됩니다.
실시간 데이터베이스 통합이 제공됩니다.
__CAPGO_KEEP_0__
내장된 사용자 관리

사전 조건

시작하기 전에 다음을 확인하세요:

Capacitor 프로젝트를 설정한 상태
Supabase 계정 및 프로젝트
Google, Apple, Facebook 등 선택한 사회 공급자에 대한 개발자 계정

먼저 Capgo Social Login 플러그인을 설치하세요:

npm install @capgo/capacitor-social-login
npx cap sync

Social Login 그리고 Supabase Supabase 플랫폼에 따라 설정하기 위한 플러그인 페이지.

Step 2: Capgo와 Supabase 프로젝트 설정

Capgo와 Supabase 프로젝트 설정

Capgo와 Supabase 프로젝트를 생성하고 구성하세요.:
- Capgo와 Supabase 프로젝트를 생성하세요. Capgo와 Supabase 프로젝트를 생성하기 위해 Capgo와 Supabase 프로젝트를 생성하기 위해
- Capgo와 Supabase 프로젝트를 생성하기 위해 Capgo와 Supabase 프로젝트를 생성하기 위해
- Capgo와 Supabase 프로젝트를 생성하기 위해
- Capgo와 Supabase 프로젝트를 생성하기 위해 Capgo와 Supabase 프로젝트를 생성하기 위해 예를 들어, “MyApp Auth”)
- 설정 데이터베이스 비밀번호 (이것을 안전하게 저장하세요)
- 선택 지역 (사용자들이 가장 가까운 곳에)
- 클릭 ‘새 프로젝트 만들기’
프로젝트 인증서를 받으세요:
- 생성된 후, ‘설정’ > __CAPGO_KEEP_0__ Settings > API
- 프로젝트 URL을 복사하세요 프로젝트 URL (예를 들어, https://your-project-ref.supabase.co)
- 프로젝트 URL을 복사하세요 공개용 URL API 키
- 앱에서 나중에 사용하기 위해 저장하세요

인증 설정 구성

일반 인증 설정:
- 다음으로 인증 > 설정
- 아래 일반 설정:
  - 설정 사이트 URL 앱의 URL로 설정하세요 (예: https://yourdomain.com 또는 http://localhost:3000 개발을 위해
  - 추가 설정 리다이렉트 URL 필요한 경우 추가
```
http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)
```
이메일 설정 선택적이지만 권장되는 설정입니다:
- 아래 SMTP 설정, 이메일 제공업체를 구성하십시오.
- 이것은 이메일 확인 및 비밀번호 재설정 활성화를 허용합니다.
- 개발 환경에서, 내장 이메일 서비스를 사용할 수 있습니다.

제공업체 섹션에 접근하십시오.:
- 가장 먼저 인증 > 제공업체 에서 Supabase 대시보드에 가십시오.
- 사용 가능한 사회 제공업체 목록을 볼 수 있습니다.
- 각 제공업체는 활성화 설정 및 구성 옵션

현재 각 사회 제공자를 세부적으로 구성해 보겠습니다:

Supabase에서 Google 인증 설정

먼저 Google OAuth 인증서를 받으세요:

우리의 포괄적인 Google 설정 가이드를 따르세요: Google 인증 설정

이 가이드는 다음과 같습니다:

Google Cloud 프로젝트 만들기
웹, iOS, Android를 위한 OAuth 2.0 인증서 설정
consent 화면 구성
필요한 Client ID 및 비밀번호를 받기

구글 설정을 완료한 후 Supabase에서 구성하십시오:

Supabase에서 구글 제공자를 활성화하십시오:
- Supabase 대시보드에서 인증 > 제공자
- 찾아보십시오 구글 활성화하십시오 켜십시오
- 구성 정보를 입력하십시오:
  - Client ID: 구글 OAuth Web 클라이언트 ID (구글 클라우드 콘솔에서)
  - 클라이언트 시크릿: Google OAuth 웹 클라이언트 시크릿
  - 리다이렉트 URL: https://your-project-ref.supabase.co/auth/v1/callback (자동으로 입력됨)
- 클릭 “저장”

중요: Google OAuth 웹 클라이언트 ID 그리고 Web Client Secret Supabase에서 모바일 앱을 개발하고 있더라도 사용할 수 있습니다. 모바일 클라이언트 ID는 플러그인 구성에서 별도로 사용됩니다.

Apple 인증을 Supabase에 설정하는 방법

Apple 인증을 위한 인증서를 받으세요:

Apple 인증을 설정하는 방법에 대한 자세한 설명을 참조하세요: Apple 인증 설정

이 안내서에서는 다음 항목을 다룹니다:

Apple 개발자 계정 설정
App ID 및 Service ID 생성
Apple 인증을 사용할 수 있도록 Sign in with Apple 기능 구성
필요한 개인 키를 생성하는 방법
iOS, Android, 및 Web 플랫폼에 따른 설정

애플 설정을 완료한 후 Supabase에서 구성하세요:

애플 제공자를 Supabase에서 활성화하세요:
- 다음으로 이동하세요: 인증 > 제공자 애플 제공자를 활성화하세요 켜기 구성 정보를 입력하세요:
- 클라이언트 ID
  - : 서비스 ID 식별자 (예: 클라이언트 시크릿 com.yourapp.signin)
  - __CAPGO_KEEP_0__ : Apple 인증서를 사용하여 JWT를 생성하세요 (see Supabase Apple 문서 을 참조하세요)
  - Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (자동으로 채워집니다)
- Click “Save”

Note: Apple 인증서 설정은 Service IDs, 개인 키, JWT 생성에 대한 Apple의 요구 사항으로 인해 가장 복잡합니다. 각 플랫폼에 대한 문서를 신중하게 따르세요.

Facebook 인증을 설정하는 방법

Facebook 인증을 설정하려면 다음을 수행하세요:

Facebook 인증을 설정하는 방법에 대한 자세한 설명을 참조하세요: Facebook 인증 설정

This guide covers:

Facebook 개발자 계정과 앱을 만들기
Facebook 로그인 제품을 추가하기
OAuth 리다이렉션 URI를 구성하기
App ID, App Secret, 및 Client Token을 가져오기
iOS 및 Android에 대한 플랫폼별 구성

Facebook 설정을 완료한 후 Supabase에서 구성:

Facebook 제공자를 Supabase에서 활성화하기:
- Authentication > Providers로 이동하기 활성화하기 and toggle Facebook ON
- 설정값을 입력하세요.
  - IDFacebook 앱 ID입니다.
  - 비밀번호Facebook 앱 비밀번호입니다.
  - 리다이렉션 URL: https://your-project-ref.supabase.co/auth/v1/callback (자동으로 입력됨)
- 클릭 “저장”

중요한 정보입니다.: Supabase callback URL을 Facebook 앱의 Valid OAuth Redirect URIs에 추가하십시오.https://your-project-ref.supabase.co/auth/v1/callbackFacebook 앱의 Facebook Login 설정에서 Valid OAuth Redirect URIs 중요한 Supabase 구성 참고 사항

Row Level Security (RLS):

인증을 설정한 후 테이블에 RLS를 활성화하십시오.

데이터베이스 > 테이블
RLS 활성화 Enable RLS for each table Go to Database > Tables
인증된 사용자에 따라 데이터 접근을 제어하는 정책을 만들기

사용자 관리:

인증된 사용자를 보기 인증 > 사용자
인증 이벤트를 모니터링하기 인증 > 로그
이메일 템플릿을 설정하기 인증 > 이메일 템플릿

설정 테스트:

Supabase의 내장 인증 테스트 도구를 사용하기
가기 인증 > 사용자 그리고 클릭 “사용자 초대” 이메일 흐름을 테스트하기 위해 사용자 초대
체크하는 로그 인증 오류가 있는 섹션

이제 Supabase가 구성되었습니다. Social Login 플러그인을 구성하려면 해당 인증서버의 인증서를 입력해야 합니다. 중요: 플러그인은 OAuth 인증서를 원래 제공자( Supabase가 아닌)에서 가져와야 합니다. Supabase는 서버측 인증을 처리합니다. context context

인증 흐름은 어떻게 작동하는가?

구성하기 전에 흐름을 이해하세요:

플러그인은 소셜 제공자 (Google/Apple/Facebook)와 natively 인증합니다
플러그인은 제공자로부터 토큰 (액세스 토큰, ID 토큰)을 받습니다
앱은 이러한 토큰을 Supabase로 전송합니다 signInWithIdToken()
Supabase는 제공자와 토큰을 검증하고 사용자 세션을 생성합니다
Supabase는 앱의 인증된 요청에 대한 자신의 JWT 토큰을 반환합니다

구글 플러그인 설정

플러그인은 당신의 웹 클라이언트 ID 모든 플랫폼에 대해 옵션적으로 iOS 클라이언트 ID iOS 전용 기능을 위해 iOS 클라이언트 ID

import { SocialLogin } from '@capgo/capacitor-social-login';

await SocialLogin.initialize({
  google: {
    // Use the same Web Client ID you configured in Supabase
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: iOS Client ID for iOS-specific features
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: Request offline access for refresh tokens
    mode: 'offline'
  }
});

iOS 전용 기능을 위해

구글의 주요 점 웹 클라이언트 ID (Android/iOS 클라이언트 ID가 아닌) webClientId 필드
웹 클라이언트 ID만 사용해도 플러그인이 모든 플랫폼에서 작동합니다.
The iOSClientId 는 iOS 전용 Google 기능을 위해만 사용됩니다.

Apple 플러그인 구성

Apple 구성은 iOS와 Android 간에 다릅니다:

iOS (네이티브 애플 로그인):

await SocialLogin.initialize({
  apple: {
    // No additional configuration needed for iOS
    // The plugin uses the native Apple Sign-In capability
  }
});

Android/Web (Service ID가 필요합니다):

await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
    redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
  }
});

애플에 대한 주요 점:

iOS는 네이티브 Sign in with Apple을 사용합니다 (추가 구성이 필요하지 않습니다)
Android/Web는 애플 개발자 포털에서 생성한 Service ID가 필요합니다
The redirectUrl 설정한 Apple Developer Portal과 Supabase에서 일치해야 합니다.

페이스북 플러그인 구성

페이스북은 App ID와 Client Token이 필요합니다:

await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_FACEBOOK_APP_ID',        // From Facebook Developer Dashboard
    clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
    
    // Optional: Use Facebook Limited Login (for enhanced privacy)
    limitedLogin: false // See our Facebook setup guide for important Limited Login details
  }
});

페이스북에 대한 주요 점:

Supabase에서 설정한 App ID를 사용하십시오.
Client Token은 페이스북 앱의 기본 설정에서 찾을 수 있습니다.
limitedLogin: true iOS에서만 페이스북의 개인 정보 보호에 초점을 맞춘 Limited Login 기능을 활성화합니다.
중요: 자세한 Limited Login 정보, ATT 고려 사항을 포함하여 설정된 플러그인 초기화 완료 See our

페이스북 설정 가이드

Capgo를 사용하는 방법을 알려드리겠습니다.

import { SocialLogin } from '@capgo/capacitor-social-login';

export async function initializeSocialLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      mode: 'offline'
    },
    facebook: {
      appId: 'YOUR_FACEBOOK_APP_ID',
      clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
    },
    apple: {
      // iOS: no config needed
      // Android/Web: uncomment the lines below
      // clientId: 'YOUR_SERVICE_ID',
      // redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
    }
  });
}

중요한 주의사항:

Call initialize() Capgo once
앱이 시작될 때, 로그인 전에는 호출하지 마세요.
사용할 계획인 제공자만 설정하면 됩니다. 이 제공자 인증서는 Supabase의 원래 제공자 인증서에서 가져온 것입니다.Supabase의 인증서와 일치하는지 확인하세요.
Step 5: Supabase Client 설정

Supabase 클라이언트를 설치하세요:

__CAPGO_KEEP_0__

npm install @supabase/supabase-js

Supabase 서비스를 생성하세요:

// services/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

6단계: 인증 흐름 구현

인증 서비스를 생성하세요. 이 서비스는 두 가지를 결합합니다:

// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';

export class AuthService {
  
  async initializeSocialLogin() {
    await SocialLogin.initialize({
      google: {
        webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      },
      facebook: {
        appId: 'YOUR_FACEBOOK_APP_ID',
        clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
      },
      apple: {} // iOS configuration
    });
  }

  async signInWithGoogle() {
    try {
      const result = await SocialLogin.login({
        provider: 'google',
        options: {
          scopes: ['email', 'profile']
        }
      });

      const googleResult = result.result;
      if (!googleResult) {
        throw new Error('Google login failed');
      }

      // GoogleLoginResponse is a union type - check responseType to determine flow
      if (googleResult.responseType === 'online') {
        // Online mode: use idToken directly with Supabase
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'google',
          token: googleResult.idToken!,
        });
        if (error) throw error;
        return data;
      } else {
        // Offline mode: exchange serverAuthCode on your backend
        // Your backend should exchange the code for tokens and create a Supabase session
        const response = await fetch('/api/auth/google', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
        });
        return response.json();
      }
    } catch (error) {
      console.error('Google sign-in error:', error);
      throw error;
    }
  }

  async signInWithApple() {
    try {
      const result = await SocialLogin.login({
        provider: 'apple',
        options: {
          scopes: ['email', 'name']
        }
      });

      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: result.result?.identityToken!,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Apple sign-in error:', error);
      throw error;
    }
  }

  async signInWithFacebook() {
    try {
      const result = await SocialLogin.login({
        provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile']
        }
      });

      const fbResult = result.result;
      if (!fbResult?.accessToken?.token) {
        throw new Error('Facebook login failed - no access token received');
      }

      // Facebook uses accessToken for Supabase authentication
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'facebook',
        token: fbResult.accessToken.token,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Facebook sign-in error:', error);
      throw error;
    }
  }

  async signOut() {
    // Sign out from Supabase
    await supabase.auth.signOut();
    
    // Optionally sign out from social providers
    await SocialLogin.logout({
      provider: 'google' // or 'apple', 'facebook'
    });
  }

  getCurrentUser() {
    return supabase.auth.getUser();
  }

  onAuthStateChange(callback: (event: string, session: any) => void) {
    return supabase.auth.onAuthStateChange(callback);
  }
}

export const authService = new AuthService();

7단계: 앱에 구현

서비스를 초기화하고 인증을 처리하세요.

// main.ts or app component
import { authService } from './services/auth';

async function initializeApp() {
  await authService.initializeSocialLogin();
  
  // Listen to auth state changes
  authService.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_IN') {
      console.log('User signed in:', session.user);
      // Redirect to authenticated area
    } else if (event === 'SIGNED_OUT') {
      console.log('User signed out');
      // Redirect to login
    }
  });
}

initializeApp();

로그인 버튼을 UI에 생성하세요.

// Login component
async function handleGoogleLogin() {
  try {
    const user = await authService.signInWithGoogle();
    console.log('Signed in with Google:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleAppleLogin() {
  try {
    const user = await authService.signInWithApple();
    console.log('Signed in with Apple:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleFacebookLogin() {
  try {
    const user = await authService.signInWithFacebook();
    console.log('Signed in with Facebook:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleLogout() {
  try {
    await authService.signOut();
    console.log('Signed out successfully');
  } catch (error) {
    console.error('Logout failed:', error);
  }
}

8단계: 플랫폼별 구성

iOS 구성

iOS 세부 설정 지침에 대한 자세한 설명은 플랫폼별 지침을 참조하세요:

Google iOS 설정 - URL 스키마, Info.plist 구성
Apple iOS 설정 - Apple 로그인 기능 설정
Facebook iOS 설정 (일반적인 Facebook 안내) - Facebook SDK 설정

빠른 요약 - 추가 ios/App/App/Info.plist:

<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

iOS 설정에 대한 자세한 지침은 Xcode 프로젝트 설정을 포함하여 링크된 안내서를 참조하십시오.

Android 설정

Android 설정에 대한 자세한 지침은 플랫폼별 안내서를 참조하십시오.

Google Android 설정 - SHA-1 지문, Google Play Services 설정
Apple Android 설정 - 안드로이드 서비스 ID 설정
Facebook 안드로이드 설정 (일반 Facebook 가이드) - Facebook SDK 통합

안드로이드 필수 설정:

1. SHA-1 지문 가져오기 (Google에 필요)

# For debug builds (development)
cd android
./gradlew signingReport

# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client

2. AndroidManifest.xml 구성 - 추가 android/app/src/main/AndroidManifest.xml:

<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Facebook configuration -->
<meta-data 
  android:name="com.facebook.sdk.ApplicationId" 
  android:value="@string/facebook_app_id"/>
<meta-data 
  android:name="com.facebook.sdk.ClientToken" 
  android:value="@string/facebook_client_token"/>

3. Facebook 리소스 추가 로 android/app/src/main/res/values/strings.xml:

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>

링크된 플랫폼 가이드를 따라서 안드로이드 구성 및 Google Play Services 설정 및 패키지 이름 구성이 완료됩니다.

9단계: Supabase 데이터베이스 사용하기 (인증된 사용자)

사용자가 인증되면, Row Level Security (RLS)를 사용하는 Supabase 데이터베이스를 사용할 수 있습니다:

// Example: Fetch user profile
async function getUserProfile() {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', user.user.id)
      .single();
    
    return data;
  }
}

// Example: Update user profile
async function updateUserProfile(updates: any) {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .update(updates)
      .eq('id', user.user.id);
    
    return data;
  }
}

중요한 보안 고려 사항

_sensitive 키를 절대 노출하지 마세요 code에서
환경 변수를 사용하여 구성 설정
Supabase에서 Row Level Security 활성화 토큰을 백엔드에서 필요 시 유효성 검사
토큰 갱신 처리 __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ 자동으로 Supabase와 함께 Social Login을 설정합니다.

일반적인 문제 해결

토큰 불일치 오류

소셜 로그인 플러그인과 Supabase의 OAuth 제공자 설정이 일치하는지 확인하십시오.
리다이렉트 URL이 올바르게 구성되어 있는지 확인하십시오.

플랫폼별 문제

iOS: Apple Developer 설정과 일치하는 Bundle ID를 확인하십시오.
Android: Google Console에 올바르게 SHA1 지문을 추가했는지 확인하십시오.

인증 흐름 중단

네트워크 문제에 대한 적절한 오류 처리를 implement하십시오.
인증 중 로딩 상태를 추가하십시오.

결론

이제 Supabase의 강력한 백엔드와 네이티브 소셜 로그인 기능을 결합한 완전한 인증 시스템을 갖추었습니다. 이 설정은 다음과 같은 기능을 제공합니다:

안전한 네이티브 소셜 인증
무결점의 토큰 관리
실시간 데이터베이스 통합
플랫폼 간 호환성

Supabase와 Capgo 소셜 로그인 플러그인 조합은 Capacitor 앱에 대한 강력하고 확장 가능한 인증 솔루션을 제공합니다.

다음과 같은 고급 기능을 사용할 수 있습니다: 다단 인증 또는 고급 기능을 사용할 수 있습니다.사용자 지정 클레임 자세한 내용은 Supabase 문서를 확인하세요. 그리고 Capacitor Social Login 플러그인 문서.

Capacitor Social Login 플러그인과 함께 Supabase 인증을 설정하는 경우 Setup Supabase Authentication with Capacitor Social Login Plugin 인증 및 계정 흐름을 계획하고 연결하려면 @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, 두 단계 인증 두 단계 인증 구현 세부 사항 SSO (기업) SSO (기업) 구현 세부 사항

Capacitor를 사용한 Supabase 인증 설정하기

Supabase와 소셜 로그인을 사용하는 이유는 무엇입니까?