Capacitor 소셜 로그인 플러그인과 Supabase 인증을 설정하는 방법

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

사회 로그인과 Supabase를 사용하는 이유는 무엇인가요?

Supabase Supabase는 내장 인증을 포함한 강력한 백엔드-어스-어 서비스를 제공하며, @capgo/capacitor-social-login 플러그인은 iOS, Android, 웹 플랫폼에서 사회 인증을 제공합니다. @capgo/capacitor-supabase @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-supabase

• 는 Supabase와의 통합을 위한 내장 인증 도우미와 JWT 접근을 제공합니다.
• 그들은 다음과 같은 기능을 제공합니다.
• 사회 인증을 위한 단순한 통합
• 보안 토큰 관리를 위한 보안 토큰 관리 시스템입니다.
• 내장된 사용자 관리

사전 요구 사항

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

• Capacitor 프로젝트가 설정되어 있습니다
• Supabase 계정 및 프로젝트
• 개발자 계정이 있는 소셜 제공자 (Google, Apple, Facebook)

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

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

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

참고 소셜 로그인 및 Supabase 플랫폼별 설정을 위한 플러그인 페이지.

Step 2: Supabase 프로젝트 설정

Supabase 프로젝트 만들기 및 설정

1. Supabase 프로젝트 만들기:

   • 로 이동하세요. 및 회원가입/로그인 클릭
   • Click 회사 선택
   • 프로젝트 이름 입력
   • __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ (예: “MyApp Auth”)
   • 설정 데이터베이스 비밀번호 (이것을 안전하게 저장하세요)
   • 선택 지역 (가장 가까운 사용자에게 가장 가까운 것을 선택하세요)
   • 클릭 “새 프로젝트 만들기”

2. 프로젝트 자격 증명 받기:

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

인증 설정을 구성하세요

3. 설정:

   • 인증 > 설정 아래
   • Authentication & Settings 일반 설정:
     • 설정 사이트 URL __CAPGO_KEEP_0__ (예: https://yourdomain.com 또는 http://localhost:3000 개발용
     • 추가 설정 리다이렉트 URL 필요한 경우:

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

4. 이메일 설정 (선택 사항이지만 권장):

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

사회 인증 제공업체를 활성화하세요

5. 제공업체 섹션에 접근하세요:
   • 다음으로 인증 > 제공업체 Supabase 대시보드에서
   • 사용 가능한 사회 제공업체 목록을 볼 수 있습니다
   • 각 제공업체는 활성화 __CAPGO_KEEP_0__

각 설정 옵션을 토글하고

Step 3: Supabase에서 각 소셜 제공자를 세부적으로 구성하세요.

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

첫 번째로 Google OAuth 인증서를 받으세요.

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

이 가이드는 다음과 같은 내용을 다룹니다.

• Google Cloud 프로젝트를 생성하세요.
• iOS, Android 및 웹을 위한 OAuth 2.0 인증서를 설정하세요.
• consent 화면을 구성하세요.
• 필요한 Client ID 및 비밀 키를 받으세요.

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

1. Google 제공자 활성화:
   • Supabase 대시보드에서 인증 > 제공자
   • Google을 찾으십시오: Google 켜십시오 구성 정보를 입력하십시오:
   • Client ID
     • : Google OAuth웹 __CAPGO_KEEP_0__ 구글 클라우드 콘솔에서 가져온 Client ID
     • Client Secret: Google OAuth를 사용하는 Web Client Secret
     • Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (자동으로 입력됨)
   • 클릭 “저장”

중요: 웹 클라이언트 ID를 사용하세요 Web Client ID 그리고 웹 클라이언트 비밀번호 Supabase에서 Apple 인증을 설정하는 경우, 모바일 앱을 개발하는 경우에도 사용됩니다. 모바일 클라이언트 ID는 플러그인 구성에서 별도로 사용됩니다.

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

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

자세한 Apple 설정 가이드를 따라해 주세요: Apple 인증 설정

이 가이드는 다음과 같은 내용을 다룹니다.

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

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

1. Supabase에서 애플 제공자를 활성화하십시오.:
   • 다음으로 이동하십시오: 인증 > 제공자 및 "애플"을 켜십시오. 구성 정보를 입력하십시오:
   • Client ID
     • : 서비스 ID 식별자 (예를 들어,Client Secret com.yourapp.signin)
     • __CAPGO_KEEP_0__: __CAPGO_KEEP_0__을 사용하여 Apple 개인 키를 사용하여 이 JWT를 생성하세요 (Apple JWT 형식 참조) Supabase Apple 문서 참조 Service ID, 개인 키 및 JWT 생성을 위한 Apple의 요구 사항으로 인해 Apple 인증 설정이 가장 복잡합니다. 각 플랫폼에 대한 문서를 신중하게 따르세요.
     • Facebook 인증을 설정하는 Supabase: https://your-project-ref.supabase.co/auth/v1/callback Facebook 인증을 설정하는 방법
   • Facebook 인증을 설정하는 방법을 참조하세요: Facebook 인증을 설정하는 방법을 참조하세요:

Redirect URL(자동으로 입력됨)

클릭

“저장”

주의 페이스북 인증 설정

이 안내서에서는:

• 페이스북 개발자 계정 및 앱 만들기
• 페이스북 로그인 제품 추가
• OAuth 리다이렉션 URI 구성
• 앱 ID, 앱 시크릿, 클라이언트 토큰 가져오기
• iOS 및 Android 플랫폼에 대한 구체적인 구성

페이스북 설정을 완료한 후 Supabase에서 구성:

1. Supabase에서 페이스북 제공자 활성화:
   • 로 가기 인증 > 제공자 활성화 Facebook ON
   • 설정 정보를 입력하세요.
     • IDFacebook 앱 ID
     • 비밀번호Facebook 앱 비밀번호
     • 리다이렉션 URL: https://your-project-ref.supabase.co/auth/v1/callback 자동으로 채워집니다.
   • 클릭 “저장”

중요: Supabase 콜백 URL(__CAPGO_KEEP_0__)을 Facebook 앱의https://your-project-ref.supabase.co/auth/v1/callbackValid OAuth Redirect URIs Facebook 로그인 설정에서 중요한 Supabase 구성 참고 사항

Row Level Security (RLS):

인증을 설정한 후 테이블에 RLS를 활성화하세요

• Go to
• 데이터베이스 > 테이블 테이블당 RLS 활성화 를 토글하세요 for each table
• 인증된 사용자에 따라 데이터 접근을 제어하는 정책을 만들기

사용자 관리:

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

설정 테스트:

• Supabase의 내장 인증 테스트 도구 사용
• 가기 인증 > 사용자 그리고 클릭 “Invite user” 이메일 흐름을 테스트하기 위해 사용자를 초대하세요
• 인증 오류가 있는지 로그 섹션을 확인하세요 Step 4: Social Login 플러그인을 구성하세요 Supabase가 구성되면, 해당 인증 정보와 함께 Social Login 플러그인을 설정해야 합니다.

중요

: 플러그인은 Supabase가 아닌 원래 제공자에서 OAuth 인증 정보를 필요로 합니다. Supabase는 서버 측 인증을 처리합니다.__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

How the Authentication Flow Works

구현 전, 인증 흐름을 이해하십시오:

1. 플러그인은 소셜 제공자 (Google/Apple/Facebook)와
2. 자연스럽게 인증합니다. 플러그인은
3. 제공자로부터 액세스 토큰 및 ID 토큰을 signInWithIdToken()
4. 받습니다. 앱은 이러한 토큰을
5. Supabase로 전송합니다. Supabase는 제공자와 토큰을 검증하고 사용자 세션을 생성합니다. (Supabase는 사용자 인증을 위해 JWT 토큰을 반환합니다.)

Google 플러그인 설정

The plugin needs your 웹 클라이언트 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'
  }
});

Google에 대한 주요 점:

• Use the 웹 클라이언트 ID (안드로이드/iOS 클라이언트 ID가 아닌) webClientId field
• The plugin will work on all platforms with just the Web Client ID
• The iOSClientId __CAPGO_KEEP_0__는 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 (서비스 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는 네이티브 Sign in with Apple을 사용합니다 (추가 구성이 필요하지 않습니다).
• Android/Web는 Apple Developer Portal에서 생성한 서비스 ID가 필요합니다.
• __CAPGO_KEEP_1__ 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 기능을 활성화합니다.
• 중요: 자세한 Limited Login 정보, ATT 고려 사항을 포함하여 Facebook 설정 가이드 를 참조하세요.

Limited Login에 대한 자세한 정보를 포함하여

모든 제공자 초기화하는 방법:

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() 앱이 시작될 때, 로그인 전 사용할 계획인 제공자만 구성하면 됩니다.
• 이 제공자 인증서는 Supabase의
• 원래 제공자 에서 나온 것입니다.Supabase에서 구성한 제공자 인증서와 일치하도록 하세요.
• 5단계: Supabase 클라이언트 설정

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 capability 설정에 로그인하세요.
• 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 Configuration

Android 설정에 대한 자세한 설명서를 보려면 다음 플랫폼별 설명서를 참조하십시오.

• Google Android 설정 - SHA-1 지문, Google Play Services 설정
• Apple Android 설정 - 안드로이드 서비스 ID 설정
• Facebook 안드로이드 설정 (일반적인 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를 완전히 구성하기 위한 링크된 플랫폼 설명서를 참조하십시오. Google Play Services 설정 및 패키지 이름 설정 포함.

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

중요한 보안 고려 사항

1. 敏感 키를 절대 노출하지 마세요 클라이언트 code
2. 환경 변수를 사용하여 구성 서버에서 토큰 갱신이 필요할 경우 토큰을 검증
3. 서버에서 토큰 갱신이 필요할 경우 토큰을 갱신 Supabase에서 Row Level Security를 활성화
4. 서버에서 토큰을 검증 서버에서 토큰을 갱신
5. 토큰 갱신을 처리 자동으로 Supabase와 연동

일반적인 문제 해결

토큰 불일치 오류

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

플랫폼별 문제

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

인증 흐름 중단

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

결론

You now have a complete authentication system combining Supabase’s robust backend with native social login capabilities. This setup provides:

• Secure, native social authentication
• Seamless token management
• Real-time database integration
• Cross-platform compatibility

The combination of Supabase and the Capgo Social Login plugin offers a powerful, scalable authentication solution for your Capacitor apps.

For more advanced features like multi-factor authentication or custom claims, check out the Supabase documentation and the Social Login plugin documentation.

Keep going from Setup Supabase Authentication with Capacitor Social Login Plugin

Capgo를 사용하는 경우 Setup Supabase Authentication with Capacitor Social Login Plugin 인증 및 계정 흐름을 계획하고 연결하려면 @capgo/capacitor-social-login @capgo/capacitor-social-login에서 구현 세부 정보를 참조하십시오. @capgo/capacitor-passkey @capgo/capacitor-passkey에서 구현 세부 정보를 참조하십시오. @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric에서 구현 세부 정보를 참조하십시오. 두 단계 인증 __CAPGO_KEEP_0__ 두 단계 인증 구현 세부 사항에 대해 SSO (기업) __CAPGO_KEEP_0__ SSO (기업) 구현 세부 사항에 대해