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

모바일 앱에서 인증을 설정하는 것은 복잡할 수 있지만 Supabase와 __CAPGO_KEEP_0__ Social Login 플러그인을结合하면 간단해집니다. 이 튜토리얼에서는 Supabase와 __CAPGO_KEEP_0__ 앱에서 Google, Apple, Facebook과 같은 사회 인증을 통합하는 방법을 안내해드립니다. Supabase __CAPGO_KEEP_0__ Capgo Social Login plugin makes it straightforward. This tutorial will guide you through integrating social authentication (Google, Apple, Facebook) with Supabase in your Capacitor app.

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-supabase @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login @capgo/capacitor-social-login __CAPGO_KEEP_1__ @capgo/capacitor-supabase __CAPGO_KEEP_1__

Social 인증을 위한 무결점 통합
보안 토큰 관리
플랫폼 간 호환성
실시간 데이터베이스 통합
내장된 사용자 관리

사전 요구 사항

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

Capacitor 프로젝트를 설정한 상태
Supabase 계정 및 프로젝트
Google, Apple, Facebook와 같은 선택한 사회 제공자의 개발자 계정

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

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

See the Social Login and Supabase Step 2: Supabase 프로젝트 설정

Create and Configure Your Supabase 프로젝트

Supabase 프로젝트 만들기

Go to:
- supabase.com 회원가입/로그인 Click
- __CAPGO_KEEP_0__ 새 프로젝트
- 회사 선택
- 입력 프로젝트 이름 (예: "MyApp Auth")
- 데이터베이스 비밀번호 설정 (이것을 안전하게 저장하세요) 지역 선택
- (사용자와 가장 가까운 지역을 선택하세요) 클릭 __CAPGO_KEEP_0__
- __CAPGO_KEEP_1__ “새 프로젝트 만들기”
프로젝트 인증 정보를 받으세요:
- 프로젝트가 생성되면 설정 > API
- 이용할 수 있는 프로젝트 URL (예를 들어, https://your-project-ref.supabase.co)
- 이용할 수 있는 익명 공용 API 키
- 앱에서 나중에 사용하기 위해 저장하세요

인증 설정을 구성하세요

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

제공업체 섹션에 접근하십시오:
- Authentication > Providers로 이동하십시오 Authentication > Providers Supabase에서 설정하세요
- 사용 가능한 사회 제공 업체 목록을 볼 수 있습니다
- 각 제공 업체는 켜기 설정 옵션

각각의 사회 제공 업체를 자세히 설정해 보겠습니다

Supabase에서 Google 인증을 설정하는 방법

Google OAuth 인증 정보를 먼저 받으세요

Google 설정 가이드를 따라하세요 Google 인증 설정

이 가이드는

Google Cloud 프로젝트를 생성하는 중입니다.
웹, iOS, Android를 위한 OAuth 2.0 인증서를 설정합니다.
consent 화면을 구성합니다.
Google Cloud 설정을 완료한 후 Supabase에서 설정을 구성합니다:

Google 제공자를 Supabase에서 활성화합니다.

Supabase 대시보드에서 Authentication > Providers로 이동하세요.:
- 찾아보세요. Google
- 활성화하세요. ON Google Cloud 프로젝트를 생성하는 중입니다. 웹, iOS, Android를 위한 OAuth 2.0 인증서를 설정합니다.
- 설정하기:
  - Client ID: Google OAuth 클라이언트 ID Web Google Cloud Console에서 Client ID
  - Client Secret: Google OAuth 클라이언트 Secret Web Google OAuth 클라이언트 Secret
  - Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (자동으로 입력됨)
- 클릭 “저장”

중요: 사용하기 웹 클라이언트 ID 및 웹 클라이언트 비밀번호 Supabase 에서도 사용하세요. 모바일 앱을 개발하고 있더라도 모바일 클라이언트 ID 는 플러그인 설정에서 별도로 사용됩니다.

애플 인증 설정하기

애플 인증 정보 얻기:

자세한 애플 설정 가이드를 따라하세요: 애플 인증 설정

이 가이드는:

Apple 개발자 계정 설정
App ID 및 Service ID 생성
Apple 로그인 기능 설정
필요한 개인 키 생성
iOS, Android, Web 플랫폼에 따른 설정

Apple 설정을 완료한 후 Supabase에서 설정하세요:

Supabase에서 Apple 제공자 활성화:
- Authentication > Providers로 이동하세요 Apple을 ON으로 설정하세요 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ __CAPGO_KEEP_2__
- 설정 값을 입력하세요:
  - Client ID: 서비스 ID 식별자 (예: com.yourapp.signin)
  - Client Secret: Apple 개인 키를 사용하여 JWT를 생성하세요 ( Supabase Apple 문서 에서 JWT 형식 참조)
  - Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (자동 채우기)
- Click “Save”

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

Supabase에서 Facebook 인증 설정

Facebook 인증을 위한 자격 증명 획득:

Facebook 인증 설정에 대한 완전한 가이드를 따르십시오: Facebook 인증 설정

이 가이드는 다음과 같은 항목을 다룹니다:

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

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

Facebook 제공자 활성화:
- 다음으로 이동 인증 > 제공자 활성화/비활성화 Facebook 켜기
- 구성 정보를 입력하세요:
  - Client ID: Facebook 앱 ID
  - Client Secret: Facebook 앱 비밀번호
  - Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (자동 채우기)
- 클릭 “Save”

중요Cloudflarehttps://your-project-ref.supabase.co/auth/v1/callbackCapacitor GitHub Capgo

API

SDK

CLI
npm 데이터베이스 > 테이블 그리고 토글 RLS 활성화 각 테이블에 대해
인증된 사용자에 따라 데이터 접근을 제어하는 정책을 생성

사용자 관리:

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

설정 테스트:

Supabase의 내장 인증 테스트 도구를 사용하십시오.
다음으로 이동하십시오: 인증 > 사용자 그리고 "사용자 초대" 버튼을 클릭하십시오. 이메일 흐름을 테스트하십시오. 인증 오류를 확인하십시오.
Step 4: Social Login 플러그인을 구성하십시오. Supabase가 구성되면, Social Login 플러그인을 설정해야 합니다. 로그

Step 4: Social Login 플러그인을 구성하십시오. 중요: 플러그인은 OAuth 인증 정보를 원래 제공자 (Supabase가 아닌) 에서 가져와야 하며, Supabase는 서버 측 인증을 처리합니다. 원래 제공자 인증 흐름은 어떻게 작동하는가

구성하기 전에 흐름을 이해하십시오:

플러그인은 사회 제공자 (Google/Apple/Facebook)와 직접 인증합니다.

플러그인은 제공자로부터 토큰을 받습니다. 이 토큰 (액세스 토큰, ID 토큰)을 앱은 Supabase로 전송합니다.
Plugin authenticates with the social provider (Google/Apple/Facebook) natively Plugin receives tokens (access token, ID token) from the provider
Your app sends these tokens to Supabase using Plugin receives tokens (access token, ID token) from the provider signInWithIdToken()
Supabase는 유효성을 검증합니다. 제공자와 함께 토큰을 검증하고 사용자 세션을 생성합니다.
Supabase는 앱의 인증된 요청에 대한 자신의 JWT 토큰을 반환합니다.

구글 플러그인 구성

플러그인은 모든 플랫폼에 대해 웹 클라이언트 ID iOS 클라이언트 ID를 선택적으로 필요로합니다. iOS 전용 기능을 위해: 구글의 주요 점:

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

구글의

사용 웹 클라이언트 ID (안드로이드/아이오스 클라이언트 ID가 아닌) webClientId field
웹 클라이언트 ID만 있으면 플러그인은 모든 플랫폼에서 작동합니다.
The iOSClientId 선택 사항이며 iOS 전용 Google 기능만 사용하는 경우에만 사용됩니다.

애플 플러그인 구성

애플 구성은 iOS와 안드로이드 간에 다릅니다.

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

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

안드로이드/웹 (서비스 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'
  }
});

Apple에 대한 주요 점:

iOS는 native Sign in with Apple을 사용합니다 (추가 설정이 필요하지 않습니다)
Android/Web는 Apple Developer Portal에서 생성한 Service ID가 필요합니다
이 redirectUrl Supabase와 Apple Developer Portal에서 구성한 것과 일치해야 합니다

Facebook 플러그인 구성

Facebook은 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
  }
});

Facebook에 대한 주요 점:

Supabase에서 구성한 App ID를 사용하세요
Client Token은 Facebook App의 기본 설정에서 찾을 수 있습니다
limitedLogin: true Facebook의 privacy-focused Limited Login 기능을 iOS에서만 활성화합니다
중요한 점 (Bug Bounty Important Label): Facebook 설정 가이드 상세한 Limited Login 정보, 포함하여 ATT 고려 사항을 참조하세요

플러그인 초기화 완료

모든 제공자 초기화 방법입니다:

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() 앱이 시작될 때, 로그인 전 각 로그인 전 사용할 계획한 제공자만 구성하면 됩니다
이 자격 증명은 원래 제공자에서 가져옵니다
once when your app starts, not before each loginSupabase와 Capgo를 사용한 소셜 로그인 설정
Supabase에서 구성한 provider 인증 정보와 일치하는지 확인하세요

5단계: Supabase Client 설정

Supabase 클라이언트 설치:

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 설정 - Sign in with 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 설정에 대한 자세한 설명은 플랫폼별 가이드를 참조하십시오:

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

Android 설정의 필수 항목:

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>

구글 플레이 서비스 및 패키지 이름 설정을 포함한 Android 구성에 대한 완전한 링크된 플랫폼 지침을 따르세요.

9단계: 인증된 사용자와 함께 Supabase 데이터베이스 사용

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

// 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;
  }
}

중요한 보안 고려 사항

敏感 키를 절대 노출하지 마세요 code
환경 변수를 사용하여 구성 구성
Row Level Security를 활성화하세요 Supabase와 함께 Capacitor로 소셜 로그인 설정하기
토큰을 검증하세요 서버측에서 필요할 경우
토큰을 자동으로 갱신하세요 Supabase와

일반적인 문제 해결

토큰 불일치 오류

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

플랫폼별 문제

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

인증 흐름 중단

네트워크 문제에 대한 적절한 오류 처리를 구현하세요
인증 중 로딩 상태를 추가하세요

결론

__CAPGO_KEEP_0__와 Supabase의 강력한 백엔드와 함께 네이티브 소셜 로그인 기능을 결합한 완전한 인증 시스템을 지금 가지고 있습니다. 이 설정은 다음과 같은 기능을 제공합니다:

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

Capgo와 Capacitor 앱에 대한 강력하고 확장 가능한 인증 솔루션을 제공하는 Supabase와 소셜 로그인 플러그인 combination

다단 인증 다단 인증 또는 사용자 지정 클레임체크 아웃을 Supabase 문서 및 Social Login 플러그인 문서.

Setup Supabase 인증을 사용하여 인증 및 계정 흐름을 계획하고 있습니다. @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 연결하여 구현 세부 사항을 확인하세요. Setup Supabase 인증을 사용하여 인증 및 계정 흐름을 계획하고 있습니다. @Capacitor/__CAPGO_KEEP_1__-social-login을 연결하여 구현 세부 사항을 확인하세요. Setup Supabase 인증을 사용하여 인증 및 계정 흐름을 계획하고 있습니다. @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 연결하여 구현 세부 사항을 확인하세요. Setup Supabase 인증을 사용하여 인증 및 계정 흐름을 계획하고 있습니다. @capgo/capacitor-social-login을 연결하여 구현 세부 사항을 확인하세요. Setup Supabase 인증을 사용하여 인증 및 계정 흐름을 계획하고 있습니다. @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 인증을 설정하는 방법