Capacitor와 Supabase 인증을 통합하는 __CAPGO_KEEP_1__ Social Login 플러그인 설정

인증 설정은 모바일 앱에서 복잡할 수 있지만, Capgo를 사용하여 Supabase와 Social Login을 결합하는 것은 간단합니다. Supabase 그와 함께 Capgo 소셜 로그인 플러그인 Capacitor

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

Supabase 인증을 위한 robust backend-as-a-service를 제공하며, @capgo/capacitor-social-login iOS, Android, 웹 플랫폼에서 native social 인증을 제공하는 @capgo/capacitor-supabase tight한 Supabase 통합을 위해,

• @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-supabase
• native auth helpers와 JWT access를 제공합니다.
• Social 로그인
• 보안 토큰 관리
• 멀티 플랫폼 호환성

준비 사항

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

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

Step 1: Social Login 플러그인을 설치하고 구성하십시오.

먼저 Capgo Social Login 플러그인을 설치하십시오:

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

Social Login 그리고 Supabase Supabase 플랫폼별 설정을 위한 플러그인 페이지.

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

Supabase 프로젝트 만들기 및 설정

1. Capgo와 Supabase 프로젝트를 생성하고 설정하세요:

   • 가장 먼저 이동하세요 다음으로 supabase.com
   • 회원가입/로그인 클릭
   • “새 프로젝트”
   • 조직 선택 프로젝트 이름 (예: “MyApp Auth”)
   • 설정 데이터베이스 비밀번호 설정 (이 비밀번호를 안전하게 저장하세요)
   • Select your 지역 선택 (사용자 위치에 가장 가까운 지역을 선택하세요)
   • 버튼 클릭 새 프로젝트 만들기

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 설정configure your email provider
   • 이메일 확인 및 비밀번호 초기화 기능을 활성화합니다.
   • 개발 환경에서 내장 이메일 서비스를 사용할 수 있습니다.

사회 인증 제공자 활성화

5. 제공자 섹션에 접근:
   • 다음으로 인증 > 제공자 Supabase 대시보드에서
   • 사용 가능한 사회 제공자가 목록으로 표시됩니다.
   • 각 제공자는 활성화 스위치 및 구성 옵션을 가지고 있습니다.

현재 각 사회 공급자에 대한 세부 설정을 구성해 보겠습니다:

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

구글 인증을 위한 Supabase 설정

구글 인증을 Supabase에 설정하는 방법

구글 인증을 설정하기 위해 먼저 구글 OAuth 인증서를 받으세요: 구글 설정 가이드를 따라하세요:

구글 인증 설정

• 이 가이드는 다음과 같은 내용을 다룹니다:
• 구글 클라우드 프로젝트를 생성하는 방법
• 웹, iOS, Android를 위한 OAuth 2.0 인증서를 설정하는 방법
• consent 화면을 설정하는 방법

구글 클라이언트 ID 및 비밀 키를 얻는 방법

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

중요: Google OAuth 웹 클라이언트 ID 및 웹 클라이언트 비밀 키 Supabase에서 웹 클라이언트 비밀 키를 설정하는 방법

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

Apple 인증을 위한 Apple 계정 정보를 얻으세요:

Apple 인증 설정에 대한 자세한 설명서를 따라하세요: Apple 인증 설정

이 설명서에서는 다음 항목을 다룹니다:

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

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

1. Supabase에서 애플 제공자를 활성화하세요:
   • 다음으로 인증 > 제공자 밑에있는 애플 켜기
   • 구성 정보를 입력하세요:
     • Client ID: 애플리케이션 ID (예: com.yourapp.signin)
     • 클라이언트 시크릿: 애플 프라이빗 키를 사용하여 JWT를 생성하세요 ( 애플 문서 JWT 형식)
     • 리다이렉트 URL: https://your-project-ref.supabase.co/auth/v1/callback (자동으로 입력)
   • 클릭 “저장”

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

Supabase에서 Facebook 인증 설정

Facebook 인증을 위한 Facebook 자격 증명 얻기:

Facebook 인증 설정 완전 가이드 따르기: Facebook 인증 설정

이 안내서에서는:

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

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

1. Supabase에서 Facebook 제공자 활성화:
   • 로 가기 인증 > 제공자 Facebook 토글 Facebook 제공자 활성화 켜짐
   • 설정 정보를 입력하세요:
     • 클라이언트 ID: Facebook 앱 ID
     • 클라이언트 시크릿: Facebook 앱 비밀번호
     • Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (자동 채우기)
   • Click “저장”

중요: Supabase 콜백 URL을 추가하십시오.https://your-project-ref.supabase.co/auth/v1/callbackFacebook 앱에 )을 추가하세요. OAuth 인증 URI Facebook 로그인 설정에서

중요한 Supabase 구성 참고 사항

RLS(행위자 수준 보안)

• 인증을 설정한 후 테이블에 RLS를 활성화하세요.
• 가장 먼저 이동하세요 RLS를 활성화하세요. toggle RLS 활성화 __CAPGO_KEEP_0__
• __CAPGO_KEEP_0__

사용자 관리:

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

설정 테스트:

• Supabase의 내장 인증 테스트 도구를 사용하세요
• 으로 이동하고 인증 > 사용자 을 클릭하세요 “사용자 초대” 이메일 흐름을 테스트하기 위해
• 체크하는 로그 인증 오류를 확인하는

4단계: Social Login 플러그인 구성

Supabase가 설정되면, Social Login 플러그인을 설정해야 합니다. 해당 플러그인에 필요한 인증 정보를 입력해야 합니다. 중요OAuth 인증 정보가 필요합니다. 인증 흐름의 동작 방식 서버 사이드 인증은 Supabase가 처리하고, Capgo는 Supabase와 별개로 인증을 처리합니다.

인증 흐름은 어떻게 작동합니까?

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

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

Google 플러그인 구성

이 플러그인은 다음을 필요로 합니다. 웹 클라이언트 ID 모든 플랫폼에 대해 옵션으로 iOS 클라이언트 ID iOS 전용 기능을 위해 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'
  }
});

구글의 주요 점:

• 구글의 웹 클라이언트 ID (Android/iOS 클라이언트 ID가 아닌) webClientId 필드
• Web 클라이언트 ID만 사용해도 플러그인은 모든 플랫폼에서 작동합니다.
• 이 iOSClientId iOS는 선택 사항이며 iOS 특정 Google 기능만을 위해 사용됩니다.

애플 플러그인 구성

애플 구성은 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'
  }
});

애플의 주요 점:

• iOS는 네이티브 신인 애플 (추가 구성이 필요하지 않음) 사용
• Android/Web는 애플 개발자 포털에서 생성한 서비스 ID가 필요합니다
• 이 redirectUrl 애플 개발자 포털과 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은 Facebook App의 기본 설정에서 찾을 수 있습니다
• limitedLogin: true iOS에서만 Facebook의 개인 정보 보호를 중점으로 한 Limited Login 기능을 활성화합니다
• 중요: 우리의 자세한 Limited Login 정보, ATT 고려 사항을 포함하여 : 자세한 Limited Login 정보를 포함하여

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

설치

Supabase 서비스를 생성하세요.

npm install @supabase/supabase-js

__CAPGO_KEEP_0__

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

Xcode 프로젝트 설정을 포함한 iOS 설정 지침에 대한 자세한 설명은 링크된 가이드를 참조하십시오.

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>

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. Sensitive 키를 절대 노출하지 마세요 클라이언트에서 code
2. 환경 변수를 사용하여 구성 구성
3. Supabase에서 Row Level Security를 활성화 Supabase에서
4. 토큰을 자동으로 갱신 Supabase와 함께
5. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

일반 문제 해결

토큰 불일치 오류

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

플랫폼별 문제

• iOS: 애플 개발자 설정과 패키지 ID가 일치하는지 확인하십시오.
• Android: Google 콘솔에 SHA1 지문이 올바르게 추가되어 있는지 확인하십시오.

인증 흐름 중단

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

결론

현재 Supabase의 강력한 백엔드와 네이티브 소셜 로그인 기능을 결합한 완전한 인증 시스템을 구축했습니다. 이 설정은:

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

Supabase와 Capgo Social Login 플러그인을 결합하면 Capacitor 앱에 대한 강력하고 확장 가능한 인증 솔루션을 제공합니다.

더 많은 고급 기능 다단 인증 또는 HTML 텍스트 조각에서 추출한 텍스트입니다. (parent key `alternatives_cta_questions`). 페이지/영역: Capacitor live-update 대안 비교 페이지. 역할: 마케팅 또는 법적 문단. 표시되는 곳: page alternatives.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지합니다.HTML 텍스트 조각에서 추출한 텍스트입니다. (parent key `appflow_cta_questions`). 페이지/영역: Appflow 비교/이동 마케팅 복사본. 역할: 마케팅 또는 법적 문단. 표시되는 곳: page alternatives/ionic-appflow.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지합니다. HTML 텍스트 조각에서 추출한 텍스트입니다. (parent key `capwesome_cta_questions`). 페이지/영역: Capawesome 비교 페이지. 역할: 마케팅 또는 법적 문단. 표시되는 곳: page alternatives/capawesome.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지합니다. 그리고 소셜 로그인 플러그인 문서.

Setup Supabase 인증과 Capacitor 소셜 로그인 플러그인을 계속 진행하세요.

Setup Supabase 인증과 __CAPGO_KEEP_0__ 소셜 로그인 플러그인을 사용하는 경우 Setup Supabase 인증과 Capacitor 소셜 로그인 플러그인을 사용하는 경우 __CAPGO_KEEP_0__ 소셜 로그인 플러그인과 연결하여 인증 및 계정 흐름을 계획하세요. capgo/capacitor-social-login에서 구현 세부 정보를 참조하세요. capgo/capacitor-passkey에서 구현 세부 정보를 참조하세요. capgo/capacitor-native-biometric에서 구현 세부 정보를 참조하세요. @capgo/capacitor-passkey 구현 세부 사항을 위해 @capgo/capacitor-social-login @capgo/capacitor-passkey @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-biometric Capacitor와 함께 Supabase를 설정하는 방법 SSO (기업) SSO (기업) 구현 방법