웹에서 Supabase Google 로그인

GitHub

__CAPGO_KEEP_0__ 설치

소개

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

Google Login Web 설정 Supabase Google Login - 일반 설정
구현 제목이 '구현'인 섹션.

구현은 완전한 예제 앱의

설명서 설명서 supabaseAuthUtils.ts 파일. 이 안내서에서는 주요 개념과 사용 방법을 설명합니다.

인증 도우미 사용

The 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() - both will trigger the redirect handling.

이 OAuth popup flow가 올바르게 작동하기 위해 필수입니다.

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

세부 설명을 원하시면, nonce 생성, JWT 검증 및 Supabase 로그인에 대한 자세한 설명은 General Setup 가이드의 "How It Works" 섹션을 참조하세요. General Setup 가이드의 "How It Works" 섹션.

완전한 code 참조를 원하시면, General Setup 가이드의 "Complete code Reference" 섹션을 참조하세요. General Setup 가이드의 "Complete Code Reference" 섹션.

또한 참조하세요:

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

중요한 주의 사항

리다이렉트 처리

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

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

Nonce 처리

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

rawNonce Supabase로 이동 signInWithIdToken()
Supabase는 해시를 생성하고 rawNonce Google Sign-In의 ID 토큰에서 nonceDigest SHA-256 해시(16진수 인코딩)가 파라미터에 포함되어 있습니다.
nonceDigest Google Sign-In API의 nonce 자동 다시 시도

자동 다시 시도

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

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

__CAPGO_KEEP_0__

인증이 실패한 경우:

리다이렉트가 작동하지 않는다: 올바른 컴포넌트 마운트 시 호출하십시오 (위의 예시 참조) isLoggedIn() 유효한 청중
: Google 클라이언트 ID가 Google Cloud Console과 Supabase 모두에 일치하는지 확인하십시오인증된 리다이렉트 URL
: Google Cloud Console과 Supabase 모두에서 인증된 리다이렉트 URL이 구성되어 있는지 확인하십시오Nonce 일치하지 않음
: 콘솔 로그를 확인하십시오 - 함수는 자동으로 다시 시도하지만 필요할 경우 수동으로 로그아웃하십시오토큰 유효성 검사 실패
__CAPGO_KEEP_0__: 사용 중인 __CAPGO_KEEP_0__ 버전을 확인하세요. mode: 'online' initialize 함수 호출 시 idToken을 얻기 위해
예시 앱 __CAPGO_KEEP_0__을 참조하세요. example app code Supabase Google Login on Web을 사용하여 인증 및 계정 흐름을 계획하고

Supabase Google Login on Web을 사용 중인 경우 Supabase Google Login on Web Supabase Google Login on Web Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @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__의 구현 세부 사항을 두 단계 인증 에서 확인하세요.