Capacitor 소셜 로그인 플러그인을 사용하여 Supabase 인증 설정

모바일 앱에서 인증을 설정하는 것은 복잡할 수 있지만 Supabase와 __CAPGO_KEEP_0__ 소셜 로그인 플러그인을 combination하는 것은 간단합니다. Supabase 와 Capgo 소셜 로그인 플러그인 이 튜토리얼은 Capacitor 앱에 Google, Apple, Facebook과 같은 사회 인증을 Supabase와 통합하는 방법을 안내합니다.

Supabase와 사회 로그인 사용하는 이유

Supabase 는 내장 인증을 포함하여 강력한 백엔드-어스-어 서비스를 제공하며, @capgo/capacitor-social-login 플러그인은 iOS, Android, 웹 플랫폼에서 모두 원생 사회 인증을 제공합니다. 그들은 다음과 같은 것을 제공합니다.

• 사회 인증이 간소화됩니다.
• 보안 토큰 관리
• 플랫폼 간 호환성
• 실시간 데이터베이스 통합
• 내장된 사용자 관리

사전 요구 사항

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

• Capacitor 프로젝트를 설정하세요
• Supabase 계정과 프로젝트가 필요합니다
• Google, Apple, Facebook와 같은 선택한 소셜 제공자에 대한 개발자 계정이 필요합니다

1단계: 소셜 로그인 플러그인을 설치하고 설정하세요

Capgo 소셜 로그인 플러그인을 설치하세요:

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

2단계: Supabase 프로젝트를 설정하세요

Supabase 프로젝트를 생성하고 설정하세요

1. Supabase 프로젝트를 생성하세요:

   • 다음으로 supabase.com 으로 가입하거나 로그인하세요
   • 클릭 “새 프로젝트”
   • 회사 선택
   • 프로젝트 이름 입력 (예: “MyApp Auth”) 데이터베이스 비밀번호 설정
   • (이것을 안전하게 저장하세요) 지역 선택 (사용자와 가장 가까운 지역을 선택하세요)
   • __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ __CAPGO_KEEP_2__
   • 클릭 새 프로젝트 만들기

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

   • 생성된 후 이동하세요 설정 > API
   • 이미지를 복사하세요 (예를 들어 비공개 공개 URL https://your-project-ref.supabase.co)
   • __CAPGO_KEEP_0__ 키 앱에서 나중에 사용하기 위해 저장하세요 API
   • __CAPGO_KEEP_0__

인증 설정을 구성하세요

3. 일반 인증 설정을 설정하세요:

   • 가장 인증 > 설정
   • 아래 일반 설정:
     • 설정 사이트 URL 앱의 URL (예: https://yourdomain.com 또는 http://localhost:3000 개발용
     • 추가 URL 재지정 __CAPGO_KEEP_0__

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

4. 이메일 설정 구성 (선택 사항이지만 권장되는 경우)

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

사회 인증 제공업체 활성화

5. 제공업체 섹션에 접근:
   • 가기 인증 > 제공자 __CAPGO_KEEP_0__
   • Supabase 대시보드에서 제공된 소셜 제공자를 확인할 수 있습니다.
   • 각 제공자는 Enable toggle 및 구성 옵션

각각의 소셜 제공자를 자세히 구성해 보겠습니다.

Step 3: Supabase에서 소셜 제공자 구성하기

Supabase에서 Google 인증 설정하기

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

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

이 안내서에는 다음 항목이 포함되어 있습니다.

• Google Cloud 프로젝트를 생성하는 방법
• 웹, iOS, Android를 위한 OAuth 2.0 인증서를 설정하는 방법
• consent 화면을 구성하는 방법
• Google 설정을 완료한 후 Supabase에서 설정하는 방법

Google 설정을 Supabase에 구성한 후, 다음 단계를 수행하세요.

1. Supabase에서 Google 제공자를 활성화하세요.:
   • Supabase 대시보드에서 인증 > 제공자
   • 찾아보세요. Google 활성화/비활성화 버튼을 클릭하세요. ON
   • 구성 정보를 입력하세요:
     • Client ID: Google OAuth의 Client ID Web Google Cloud Console에서 Client ID를 가져오세요
     • Client Secret: Google OAuth의 Client Secret Web Google Cloud Console에서 Client Secret를 가져오세요
     • Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (자동으로 채워집니다)
   • 클릭 “Save”

중요: 모바일 앱을 개발하는 경우에도 Supabase에서 Web Client ID와 Web Client Secret를 사용하세요. 모바일 클라이언트 ID는 플러그인 구성에서 별도로 사용됩니다. 웹 클라이언트 ID 및 웹 클라이언트 시크릿 Supabase에서 Apple 인증을 설정하는 경우

Apple 인증서를 받으세요:

자세한 Apple 설정 가이드를 따라하세요:

Apple 인증 설정 Apple 인증 설정

이 안내서에서는 다음을 다룹니다.

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

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

1. Supabase에서 Apple 제공자 활성화:
   • Authentication > 제공자로 이동 Apple 제공자 활성화/비활성화 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ ON
   • 설정 정보를 입력하세요:
     • Client ID: 서비스 ID 식별자 (예: com.yourapp.signin)
     • Client Secret: Apple 개인 키를 사용하여 JWT를 생성하세요 (JWT 형식 참조: Supabase Apple docs )
     • 리다이렉트 URL: https://your-project-ref.supabase.co/auth/v1/callback (자동 채우기)
   • 클릭 “저장”

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

Supabase에서 Facebook 인증 설정

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

Facebook 인증 설정 가이드를 완전히 따르세요: Facebook 인증 설정

이 안내서가 다루는 내용은 다음과 같습니다.

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

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

1. Supabase에서 Facebook 제공자를 활성화하세요:
   • Authentication > Providers로 이동하세요 Facebook을 활성화하려면 Facebook 켜기 구성 정보를 입력하세요:
   • Client ID:
     • Facebook App IDClient Secret:
     • Facebook App Secret__CAPGO_KEEP_0__
     • 리다이렉트 URL: https://your-project-ref.supabase.co/auth/v1/callback (자동으로 입력됨)
   • 클릭 “저장”

중요: Supabase callback URL (을)를 Facebook 앱의 https://your-project-ref.supabase.co/auth/v1/callback)에 추가하십시오. Facebook 로그인 설정에서 유효한 OAuth 리다이렉트 URI 중요한 Supabase 구성 참고 사항

행 단위 보안 (RLS):

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

• After setting up authentication, enable RLS on your tables
• Go to 데이터베이스 > 테이블 그리고 toggle RLS를 각 테이블에 대해 활성화 인증된 사용자에 따라 데이터 접근을 제어하는 정책을 만들기 위해
• 사용자 관리:

인증된 사용자를

• 인증 > 사용자 인증 이벤트를 모니터링하기 위해
• 인증 > 로그 이메일 템플릿을 설정하기 위해
• Authentication > Users 인증 > 이메일 템플릿

설정 테스트:

• Supabase의 내장 인증 테스트 도구를 사용하세요
• 로 가기 인증 > 사용자 및 “Invite user” 인증 이메일 흐름을 테스트하기 위해 사용자를 초대하세요
• 인증 오류가 있는지 로그 섹션을 확인하세요 4단계: 사회 로그인 플러그인을 구성하세요 __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

이제 Supabase가 설정되었습니다. 해당 인증서를 사용하여 Social Login 플러그인을 설정해야 합니다. 중요: 플러그인은 OAuth 인증서를 원래 제공자(구글/애플/페이스북)에서 받고, Supabase는 서버 측 인증을 처리합니다. 인증 흐름 설정하기 전에 흐름을 이해하세요:

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

플러그인은 제공자로부터 토큰을 받습니다.

1. (액세스 토큰, ID 토큰) 앱은 이러한 토큰을 전송합니다.
2. 플러그인은 앱이 받은 토큰을 Supabase에 전송합니다. Supabase는 앱이 받은 토큰을 사용하여 사용자를 인증합니다.
3. 인증이 완료되면 사용자는 앱에 로그인할 수 있습니다. Supabase를 사용하여 signInWithIdToken()
4. Supabase는 제공자와 토큰을 검증하고 사용자 세션을 생성합니다.
5. Supabase는 앱의 인증된 요청에 대한 자체 JWT 토큰을 반환합니다.

Google 플러그인 구성

플러그인은 모든 플랫폼에 대해 Web Client ID 선택적으로 iOS-specific 기능을 위해 iOS Client ID iOS-specific 기능을 위해

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

Google에 대한 주요 점

• 웹 클라이언트 ID를 사용하세요. __CAPGO_KEEP_0__ 웹 클라이언트 ID (안드로이드/아이오스 클라이언트 ID가 아닌)를 __CAPGO_KEEP_0__에 입력하세요. webClientId __CAPGO_KEEP_0__
• 웹 클라이언트 ID만 사용하면 모든 플랫폼에서 플러그인을 작동시킬 수 있습니다.
• __CAPGO_KEEP_1__ iOSClientId __CAPGO_KEEP_1__는 iOS 전용 Google 기능을 위해만 사용됩니다.

__CAPGO_KEEP_2__

__CAPGO_KEEP_2__는 iOS와 안드로이드에서 다릅니다.

iOS (자연스러운 애플 로그인):

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

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

Apple과 관련된 주요 점:

• iOS는 Native Sign in with Apple을 사용합니다. (추가 설정이 필요하지 않습니다.)
• 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를 사용하세요.
• Client Token은 Facebook App의 기본 설정에서 찾을 수 있습니다.
• limitedLogin: true iOS에서만 Facebook의 개인 정보 보호를 중점으로 하는 Limited Login 기능을 활성화합니다.
• 중요: 우리의 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'
    }
  });
}

중요한 주의 사항:

• 앱이 시작될 때 한번 initialize() 각 로그인 전에 사용할 계획인 제공자만 구성하면 됩니다
• 이곳의 자격 증명은
• __CAPGO_KEEP_0__ 원본 제공자, Supabase에서 제공하지 않는
• Supabase에서 제공한 설정과 일치하는 제공자 인증 정보를 확인하세요.

5단계: Supabase 클라이언트 설정

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단계: 인증 흐름 구현

both를结合한 인증 서비스를 생성하세요:

// 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 설정 지침을 보려면 플랫폼별 지침을 참조하십시오:

• 구글 Android 설정 - SHA-1 지문, 구글 플레이 서비스 구성
• 애플 Android 설정 - Android 서비스 ID 구성
• 페이스북 Android 설정 (일반 페이스북 지침) - 페이스북 SDK 통합

Android 설정의 필수 항목:

1. SHA-1 지문을 얻으십시오 (구글에 필요)

# 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 설정 및 패키지 이름 구성과 같은 완전한 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. 敏感 키를 절대 노출하지 마십시오. 클라이언트 code
2. 환경 변수를 사용하여 구성 환경 변수를 사용하여 구성
3. 행 수준 보안 활성화 Supabase에서
4. 토큰 유효성 검사 필요한 경우 백엔드에서
5. 토큰 갱신 자동으로 Supabase와

일반적인 문제 해결

토큰 불일치 오류

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

플랫폼별 문제

• iOS: Apple Developer 구성과 bundle ID가 일치하는지 확인하세요
• 안드로이드: Google Console 에서 SHA1 finger print를 정확하게 추가하세요

인증 흐름 중단

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

결론

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

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

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

Cloudflare, Capacitor, GitHub, Capgo, API, SDK, CLI, npm, bun 다단 인증 또는 __CAPGO_KEEP_0__Supabase 문서 및 Social Login 플러그인 문서 __CAPGO_KEEP_1__.