Supabase Google 로그인 - 일반 설정

소개

Capacitor Social Login 플러그인을 사용하여 Google Sign-In을 Supabase 인증과 통합하는 방법에 대한 안내서입니다. 이 설정은 모바일 플랫폼에서 네이티브 Google Sign-In을 사용하면서 백엔드 인증을 위해 Supabase Auth를 활용할 수 있도록 합니다.

준비 사항

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

1. Supabase 프로젝트를 생성했습니다.

2. Google Login 일반 설정 Google OAuth 인증서를 설정하는 방법에 대한 안내서를 읽었습니다. Google OAuth 인증서를 설정하는 방법에 대한 플랫폼별 안내서를 읽었습니다.

3. Android 설정

   • iOS 설정
   • Created a Supabase project
   • 웹 설정

   주의

   Capgo 튜토리얼을 시작하기 전에, 사용할 플랫폼에 대한 클라이언트 ID를 생성해야 합니다. 7단계에서 사용하겠습니다.

Supabase에서 Google OAuth 제공자를 활성화하는 방법

1. Capgo로 이동하세요 Supabase 대시보드

2. 프로젝트 클릭

   

3. Capgo로 이동하세요 Authentication 메뉴

   

4. __CAPGO_KEEP_1__을 클릭하세요. Providers __CAPGO_KEEP_2__

   

5. __CAPGO_KEEP_1__ 제공자를 찾으세요. Google __CAPGO_KEEP_0__ Google 제공자

   

6. __CAPGO_KEEP_0__ Google 제공자 활성화

   

7. __CAPGO_KEEP_0__ Google 제공자 클라이언트 ID 추가

   

   Note

   이 포함된 웹 클라이언트 ID, iOS 클라이언트 ID 및 Android 클라이언트 ID입니다. 사용할 플랫폼에 따라 일부를 생략할 수 있습니다.

8. 버튼을 클릭하세요. Save button

   

Note

You 설정하지 마십시오. 또는 Client Secret (for OAuth) . 일부 소스는 설정하는 것을 제안할 수도 있습니다. Callback URL (for OAuth). Some sources might also suggest setting Skip nonce checks iOS에서 Google을 사용할 수 있지만 이 안내서를 통해 필요하지 않습니다.

Voilà, Supabase 인증과 함께 Google Sign-In을 이제 활성화했습니다 🎉

Google Sign-In with Supabase 인증 도우미가 어떻게 작동하는지

이 섹션에서는 Supabase와 Google Sign-In 통합이 어떻게 작동하는지 설명합니다. 이 흐름을 이해하면 인증 프로세스를 구현하고 문제를 해결하는 데 도움이 됩니다.

완전한 Implementation

완전한 Implementation은 예제 앱의 supabaseAuthUtils.ts 파일에

1. Nonce Generation

__CAPGO_KEEP_0__는 안전한 난수 pair를 생성하여 Supabase nonce 요구 사항을 따릅니다:

// Generate URL-safe random nonce
function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

// Hash the nonce with SHA-256
async function sha256Hash(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

// Generate nonce pair
async function getNonce(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hash(rawNonce);
  return { rawNonce, nonceDigest };
}

Flow:

• rawNonce: URL-safe random string (64 hex characters)
• nonceDigest: SHA-256 해시의 rawNonce (16진수 인코딩)
• nonceDigest Google Sign-In으로 전달 → Google는 ID 토큰에 nonce digest를 포함합니다
• rawNonce Supabase로 전달 → Supabase는 raw nonce를 해시하고 토큰의 nonce와 비교합니다

2. Google Sign-In

__CAPGO_KEEP_0__는 플러그인을 초기화하고 Google과 로그인합니다:

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    // iOS only:
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    mode: 'online', // Required to get idToken
  },
});

const response = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    nonce: nonceDigest, // Pass the SHA-256 hashed nonce
  },
});

3. JWT Validation

Supabase로 토큰을 전송하기 전에 구현은 JWT 토큰을 검증합니다.

function validateJWTToken(idToken: string, expectedNonceDigest: string): { valid: boolean; error?: string } {
  const decodedToken = decodeJWT(idToken);

  // Check audience matches your Google Client IDs
  const audience = decodedToken.aud;
  if (!VALID_GOOGLE_CLIENT_IDS.includes(audience)) {
    return { valid: false, error: 'Invalid audience' };
  }

  // Check nonce matches
  const tokenNonce = decodedToken.nonce;
  if (tokenNonce && tokenNonce !== expectedNonceDigest) {
    return { valid: false, error: 'Nonce mismatch' };
  }

  return { valid: true };
}

Supabase로 토큰을 전송하기 전에 왜 검증해야 하나요?

JWT 토큰을 검증하기 전에 Supabase로 토큰을 전송하는 것은 여러 중요한 목적을 위해 사용됩니다.

1. 잘못된 요청 방지: 토큰의 대상 또는 nonce 일치 오류가 있는 경우 Supabase는 토큰을 거부하더라도 토큰이 잘못된 대상 또는 nonce 일치 오류가 있는 경우 Supabase는 토큰을 거부합니다. 검증하기 전에 불필요한 API 호출을 피하고 더 명확한 오류 메시지를 제공합니다.

2. 토큰 캐싱 문제: iOS와 같은 플랫폼 (특히 iOS)에서 Google Sign-In SDK이 성능을 위해 토큰을 캐싱할 수 있습니다. 캐시된 토큰이 반환될 때 캐시된 토큰은 이전에 생성된 nonce (또는 nonce가 없는 경우)와 다를 수 있습니다. Supabase에서 토큰을 거부하는 “nonce 일치 오류” 오류가 발생할 수 있습니다. 토큰을 전송하기 전에 검증하면 이 문제를 빠르게 감지하고 자동으로 새 토큰으로 다시 시도할 수 있습니다.

3. 보안 (iOS): iOS에서 Google Client ID에 대한 토큰이 발급되었는지 확인하여 보안 문제를 방지합니다.

4. 더 나은 오류 처리: Supabase가 iOS 캐싱 문제를 투명하게 자동으로 다시 시도하는 데 필수적인 문제를 감지하기 때문에 Supabase가 허용하는 자동 다시 시도 로직을 감지합니다.

유효성 검사 실패 시 함수는 자동으로:

1. Google에서 로그아웃 (캐시된 토큰을 삭제 - iOS에서 중요)
2. 인증을 다시 시도하십시오 (새로운 토큰 생성을 강제하고 올바른 nonce를 사용)
3. 재시도도 실패하면 오류를 반환합니다.

4. Supabase 로그인

유효성 검사된 토큰이 최종적으로 Supabase로 전송됩니다:

const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: googleResponse.idToken,
  nonce: rawNonce, // Pass the raw (unhashed) nonce
});

Complete Code Reference

완전 구현은 예제 앱의 파일에 있습니다. 이 파일에는 다음과 같은 항목이 포함되어 있습니다. supabaseAuthUtils.ts - URL-safe 난수 생성

• getUrlSafeNonce() - SHA-256로 문자열 해시
• sha256Hash() - 난수 pair 생성
• getNonce() - JWT 토큰 디코딩
• decodeJWT() - JWT 청원 및 난수 검증
• validateJWTToken() - 자동 재시도 기능이 포함된 메인 인증 함수
• authenticateWithGoogleSupabase() 추가 예제 파일

추가 예제 파일

• SupabasePage.tsx - 예제 컴포넌트 (웹에서 리다이렉트 처리)
• SupabaseCreateAccountPage.tsx - 예제 계정 생성 페이지

다음 단계

__CAPGO_KEEP_0__을(를) 다음 플랫폼에 맞는 설정 가이드로 진행해 주세요.

• Please proceed to the platform-specific setup guide for your target platform:
• 안드로이드 설정
• iOS 설정

웹 설정

If you are using Supabase Google Login - General Setup to plan authentication and account flows, connect it with Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication 두 단계 인증 구현 세부 사항에 대한.