Supabase Google 로그인

이 플러그인의 설치 단계와 전체 마크다운 가이드를 포함한 설정 지시를 복사하세요.

__CAPGO_KEEP_0__

이 가이드는 Google Sign-In을 Supabase Authentication과 통합하는 데 도움이 됩니다. Web에서 작동하려면 Google Login Web 설정과 Supabase Google Login - 일반 설정이 이미 완료되어야 합니다.

the Google Login Web 설정
the Supabase Google Login - 일반 설정.

Implementation

Implementation 구현은 예제 앱의 __CAPGO_KEEP_3__ supabaseAuthUtils.ts 파일에 있습니다. 이 가이드는 주요 개념을 설명하고 사용 방법을 알려줍니다.

인증 도우미를 사용하는 방법

그 authenticateWithGoogleSupabase 함수는 인증 흐름의 모든 단계를 처리합니다:

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithGoogleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

중요: 리다이렉트 처리

웹에서 Google 로그인을 사용할 때, 리다이렉트가 발생하면

반드시 플러그인을 초기화하기 위해 플러그인에서 함수를 호출해야 합니다. 플러그인이 리다이렉트를 처리하고 팝업 창을 닫을 수 있도록 하기 때문입니다. 플러그인에서 함수를 호출할 수 있는 방법은 두 가지가 있습니다. 또는 isLoggedIn() OR initialize() - 두 가지 모두 리다이렉트 처리를 트리거합니다.

이 OAuth 팝업 흐름이 올바르게 작동하기 위해 필수입니다.

Implementation Example

Google Sign-In을 처리하는 컴포넌트에 이 코드를 추가하세요.

import { useEffect } from 'react';
import { SocialLogin } from '@capgo/capacitor-social-login';

function SupabasePage() {
  // Check Google login status on mount to invoke redirect handling
  // This doesn't serve any functional purpose in the UI but ensures
  // that any pending OAuth redirects are properly processed
  useEffect(() => {
    const checkGoogleLoginStatus = async () => {
      try {
        await SocialLogin.isLoggedIn({ provider: 'google' });
        // We don't use the result, this is just to trigger redirect handling
      } catch (error) {
        // Ignore errors - this is just for redirect handling
        console.log('Google login status check completed (redirect handling)');
      }
    };

    checkGoogleLoginStatus();
  }, []);

  // ... rest of your component
}

See the SupabasePage.tsx 를 참조하십시오. 완전한 예제를 확인하세요.

How It Works

을 참조하십시오. 일반 설정 안내서의 "How It Works" 섹션.

code의 전체 참조를 보려면 일반 설정 안내서의 "Complete Code Reference" 섹션을 참조하십시오..

또한 참조하십시오:

SupabasePage.tsx - 리다이렉트 처리를 포함한 예제 컴포넌트
SupabaseCreateAccountPage.tsx - 계정 생성 페이지의 예제

중요한 주의 사항

리다이렉트 처리

Google 로그인 사용 시 웹에서 MUST plugin에서 함수를 호출하여 리다이렉트가 발생할 때 플러그인을 초기화하여 리다이렉트를 처리하고 팝업 창을 닫을 수 있도록 하십시오. isLoggedIn() OR initialize() - 두 가지 모두 리다이렉트 처리를 트리거합니다.

이것은 OAuth 팝업 흐름이 올바르게 작동하기 위해 필수입니다. 인증 후 팝업 창이 닫지 않는 이유입니다.

Nonce 처리

Nonce 구현은 React Native Google Sign In 문서에서 설명하는 패턴을 따릅니다. Supabase로 이동:

rawNonce Supabase는 해시를 생성합니다. signInWithIdToken()
__CAPGO_KEEP_0__ rawNonce 그것을 Google Sign-In의 ID 토큰에서 가져온 (SHA-256 해시, 16진수 인코딩)과 비교합니다. nonceDigest Google Sign-In API의 parameter에 포함된 것입니다.
nonceDigest Google Sign-In API의 parameter에 포함된 (SHA-256 해시, 16진수 인코딩)입니다. nonce 자동 재시도

자동 재시도

JWT 검증이 첫 번째 시도에서 실패하면 로그아웃하고 다시 시도합니다.

캐시된 토큰이 잘못된 nonce를 가지고 있는 경우를 처리합니다.
재시도도 실패하면 오류가 반환됩니다.
문제 해결

문제 해결

If authentication fails:

Redirect가 작동하지 않습니다.: __CAPGO_KEEP_0__에서 컴포넌트가 마운트 될 때 호출하세요. isLoggedIn() Invalid audience
: Google Client ID가 Google Cloud Console과 Supabase에서 일치하는지 확인하세요.Authorized redirect URLs
: Google Cloud Console과 Supabase에서 허용된 리다이렉트 URL이 설정되어 있는지 확인하세요.Nonce mismatch
: 콘솔 로그를 확인하세요. 함수는 자동으로 다시 시도하지만 필요할 때 수동으로 로그아웃 할 수 있습니다.Token validation fails
: __CAPGO_KEEP_1__를 사용하는지 확인하세요.Redirect not working mode: 'online' initialize 콜백에서 idToken을 얻기 위해
Review the code 예제 앱을 참조하세요 참조용으로 __CAPGO_KEEP_0__ 예제 앱을 참조하세요

Supabase Google Login on Web을 사용 중이라면 Supabase Google Login on Web을 사용 중이라면 인증 및 계정 흐름을 계획하고 연결하려면 Supabase Google Login on Web을 사용하세요 @capgo/capacitor-social-login을 사용하여 Native Capability를 구현하세요 @capgo/capacitor-social-login을 사용하여 Native Capability를 구현하세요 @capgo/capacitor-social-login을 사용하세요 @capgo/capacitor-social-login @capgo/capacitor-passkey @capgo/capacitor-passkey @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-biometric 두 단계 인증