웹에서 Supabase Google 로그인

소개

이 가이드는 Google Sign-In을 Web에서 Supabase Authentication에 통합하는 데 도움이 될 것입니다. Google Login Web 설정을 이미 완료한 것으로 가정합니다.

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

구현

예제 앱의 파일에서 완전한 구현이 사용할 수 있습니다. 이 안내서에서는 주요 개념과 사용 방법을 설명합니다. 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);
}

Section titled “Using the Authentication Helper”

__CAPGO_KEEP_0__

웹에서 Google 로그인 사용 시, 반드시 플러그인에서 리다이렉트가 발생할 때 함수를 호출하여 플러그인을 초기화하여 리다이렉트를 처리하고 팝업 창을 닫아야 합니다. isLoggedIn() 또는 initialize() -

두 가지 모두 리다이렉트 처리를 트리거합니다.

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

구현 예시

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
}

클립보드에 복사하기 SupabasePage.tsx 전체 예제를 참조하세요.

인증 흐름이 어떻게 작동하는지 자세히 설명하는 자세한 설명을 원하신다면, nonce 생성, JWT 검증 및 Supabase 로그인과 같은 내용을 확인하시기 바랍니다.

전체 __CAPGO_KEEP_0__ 참조를 확인하시려면 "Complete __CAPGO_KEEP_0__ Reference" 섹션을 참조하세요. 또한 확인하시기 바랍니다..

For the complete code reference, see the Complete Code Reference section in the General Setup guide.

SupabaseCreateAccountPage.tsx

• SupabaseCreateAccountPage.tsx SupabaseCreateAccountPage.tsx
• SupabaseCreateAccountPage.tsx - 예시 계정 생성 페이지

중요한 참고 사항

리다이렉트 처리

웹에서 Google 로그인 사용할 때, 반드시 플러그인에서 리다이렉트가 발생할 때 호출해야 하는 함수를 호출하여 플러그인을 초기화하여 리다이렉트를 처리하고 팝업 창을 닫아야 합니다. isLoggedIn() 또는 initialize() - 둘 다 호출하면 리다이렉트 처리를 트리거합니다.

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

Nonce 처리

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

• rawNonce Supabase로 이동 signInWithIdToken()
• Supabase는 rawNonce 를 해시화합니다. nonceDigest Google Sign-In에서 제공하는
• nonceDigest 를 비교합니다. nonce SHA-256 해시, 16진수 인코딩

Google Sign-In API의

자동 재시도 구현

• 첫 번째 시도에서 JWT 검증이 실패하면 로그아웃하고 다시 시도합니다.
• 이것은 캐시된 토큰이 잘못된 nonce를 가지고 있을 수 있는 경우를 처리합니다.
• 재시도도 실패하면 오류가 반환됩니다.

문제 해결

인증이 실패하면:

• 리다이렉트가 작동하지 않습니다.: 컴포넌트 마운트 시 호출하십시오 (위의 예시 참조) isLoggedIn() 유효한 청중
• : Google 클라이언트 ID가 Google Cloud Console과 Supabase에서 일치하는지 확인하십시오인증된 리다이렉트 URL
• Redirect not working: Google Cloud Console 및 Supabase에서 인증된 리다이렉트 URL이 설정되어 있는지 확인하세요.
• Nonce 일치하지 않음: 콘솔 로그를 확인하세요 - 함수는 자동으로 다시 시도하지만 필요할 경우 수동으로 로그아웃 먼저 해보세요.
• 토큰 유효성 검사 실패: initialize 함수에 idToken을 얻기 위해 mode: 'online' __CAPGO_KEEP_0__
• 예시 앱을 참조하세요. example app code 이전