Capacitor으로 Supabase 인증을 설정하는 방법

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

Supabase

Supabase는 강력한 백엔드-어스-어 서비스를 제공하며, built-in 인증을 제공합니다. 반면에 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login 플러그인은 iOS, Android, 웹 플랫폼에서 네이티브 사회 인증을 제공합니다. 더 강력한 Supabase 통합을 위해 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-supabase는 네이티브 인증 도우미와 JWT 접근을 제공합니다. 함께 사용하면 다음과 같은 기능을 제공합니다. @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-supabase @capgo/capacitor-social-login __CAPGO_KEEP_0__ @capgo/capacitor-supabase __CAPGO_KEEP_0__

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

사전 요구 사항

시작하기 전에 확인하세요:

• Capacitor 프로젝트를 설정한 상태
• Supabase 계정 및 프로젝트
• 선택한 사회 제공자 (Google, Apple, Facebook) 개발자 계정

Step 1: 사회 로그인 플러그인을 설치하고 구성하기

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

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

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

Supabase 프로젝트 만들고 구성

Supabase 프로젝트 만들기

1. Go to:

   • supabase.com 그리고 회원가입/로그인 Click
   • plugin pages for platform-specific setup. “새로운 프로젝트”
   • 회사 선택
   • Enter a 프로젝트 이름 (예: “MyApp Auth”)
   • 데이터베이스 비밀번호 설정 (이것을 안전하게 저장하세요) 지역 선택
   • (사용자와 가장 가까운 지역을 선택하세요) Click (예: “MyApp Auth”)
   • (이것을 안전하게 저장하세요) “새 프로젝트 만들기”

2. 프로젝트 인증서를 받으세요:

   • 프로젝트가 생성되면 설정 > API
   • 이미지를 복사하세요 프로젝트 URL (예를 들어, https://your-project-ref.supabase.co)
   • 이미지를 복사하세요 익명 공용 API 키
   • 앱에서 나중에 사용하기 위해 저장하세요

인증 설정을 구성하세요

3. 인증 설정을 구성하세요:

   • 로 이동하세요 인증 > 설정
   • 아래 일반 설정:
     • 설정 사이트 URL 앱의 URL로 설정하세요 (예: https://yourdomain.com 또는 http://localhost:3000 개발을 위해
     • 추가 리다이렉션 URL 만약 필요하다면:

       http://localhost:3000
       https://yourdomain.com
       capacitor://localhost (for mobile apps)

4. 이메일 설정을 구성하십시오 (선택 사항이지만 권장되는 사항):

   • 아래 SMTP 설정, 이메일 제공업체를 구성하십시오
   • 이메일 확인 및 비밀번호 초기화가 가능합니다
   • 개발 환경에서는 내장 이메일 서비스를 사용할 수 있습니다

사회 인증 제공업체를 활성화하십시오

5. 제공업체 섹션에 접근하십시오:
   • Authentication > Providers로 이동하십시오 __CAPGO_KEEP_0__ Supabase에서 설정하세요.
   • 사용 가능한 사회 제공자가 나열된 목록을 볼 수 있습니다.
   • 각 제공자는 활성화 toggle 및 구성 옵션

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

Step 3: Supabase에서 사회 제공자 설정

Supabase에서 Google 인증 설정

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

전문적인 Google 설정 가이드를 따라하세요. Google 인증 설정

이 가이드는

• 구글 클라우드 프로젝트 만들기
• 웹, iOS, Android에 대한 OAuth 2.0 인증서 설정
• consent 화면 설정
• 구글 설정을 완료한 후 Supabase에서 설정하세요:

Supabase에서 Google 제공자 활성화

1. Supabase 대시보드에서:
   • 인증 > 제공자 찾아보기
   • Google 활성화 ON으로 구글 클라우드 프로젝트 만들기
   • 구성 정보를 입력하세요:
     • Client ID: Google OAuth 클라이언트 ID Web Google Cloud Console에서 Client ID를 가져옵니다
     • Client Secret: Google OAuth 클라이언트 Secret Web Google Cloud Console에서 Client Secret를 가져옵니다
     • Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (자동으로 채워집니다)
   • 클릭 “저장”

중요Use the Web Client ID 및 Web Client Secret Supabase에서

Apple 인증 설정

Apple 인증 설정을 위한 자세한 안내

Apple 인증 설정 이 안내서에서는

이 안내서에서는

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

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

1. 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를 생성하세요 (see Supabase Apple docs 에서 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 개발자 계정 및 앱 만들기
• Facebook 로그인 제품 추가
• OAuth 리다이렉트 URI 구성
• App ID, App Secret 및 Client Token 획득
• iOS 및 Android에 대한 플랫폼별 구성

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

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

중요중요한 Supabase 설정 주의 사항https://your-project-ref.supabase.co/auth/v1/callback행 수준 보안 (RLS): 인증을 설정한 후에 테이블에 RLS를 활성화하세요 가기

Valid OAuth Redirect URIs

Facebook 앱의

• Facebook 로그인 설정에서
• Supabase callback URL을 추가하세요 데이터베이스 > 테이블 그리고 토글 RLS 활성화 각 테이블에 대해
• 인증된 사용자에 따라 데이터 접근을 제어하는 정책을 생성

사용자 관리:

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

설정 테스트:

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

인증 오류

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

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

플러그인은 사회 제공자(구글/애플/페이스북)와 네이티브로 인증합니다.

1. 플러그인은 제공자로부터 토큰을 받습니다. 이러한 토큰(액세스 토큰, ID 토큰)을 앱은 Supabase로 전송합니다.
2. Plugin authenticates with the social provider (Google/Apple/Facebook) natively Plugin receives tokens (access token, ID token) from the provider
3. Your app sends these tokens to Supabase using Plugin authenticates with the social provider (Google/Apple/Facebook) natively signInWithIdToken()
4. Supabase는 유효성을 검사합니다. 제공자와 함께 토큰을 검증하고 사용자 세션을 생성합니다.
5. 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'
  }
});

구글을 사용할 때

• Key points for Google: 웹 클라이언트 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는 Apple Sign in을 사용합니다 (추가 설정이 필요하지 않습니다)
• Android/Web는 Apple Developer Portal에서 생성한 Service ID가 필요합니다
• The redirectUrl Apple Developer Portal과 Supabase에서 구성한 값과 일치해야 합니다

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를 사용하세요
• Facebook App의 기본 설정에서 Client Token을 찾으세요
• limitedLogin: true iOS에서만 Facebook의 개인 정보 보호를 중점으로 하는 Limited Login 기능을 활성화합니다
• 중요: Supabase와 함께 Capgo로 소셜 로그인을 설정하는 방법을 보려면 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 앱이 시작될 때, 로그인 전에는
• 사용할 계획인 제공자만 구성하면 됩니다
• 이것은 원래 제공자에서 가져온 자격 증명입니다 이것은 원래 제공자에서 가져온 자격 증명입니다, Supabase에서 아닌 것
• Supabase에서 설정한 것과 일치하는지 확인하세요

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 구성

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

중요한 보안 고려 사항

1. 敏感 키를 클라이언트에 노출하지 마세요 in your client code
2. 구성 Row Level Security를 활성화하세요
3. __CAPGO_KEEP_0__ Supabase에서
4. 인증 토큰을 서버측에서 필요시
5. 자동으로 Supabase와 일반적인 문제 해결

토큰 불일치 오류

소셜 로그인 플러그인과 Supabase의 OAuth 제공자 설정이 일치하는지 확인하세요

• 리다이렉트 URL이 올바르게 구성되어 있는지 확인하세요
• 플랫폼별 문제

iOS: Apple Developer 설정과 일치하는지 확인하세요

• Android: Google Console에 올바르게 SHA1 지문을 추가했는지 확인하세요
• __CAPGO_KEEP_0__

인증 흐름 중단

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

결론

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

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

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

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

Keep going from Setup Supabase Authentication with Capacitor Social Login Plugin

Setup Supabase 인증을 사용하여 인증 및 계정 흐름을 계획하고 있습니다. Setup Supabase Authentication with Capacitor Social Login Plugin Setup Supabase 인증을 사용하여 인증 및 계정 흐름을 계획하고 있습니다. @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 (기업) 구현 세부 사항