Supabase 구글 로그인 - 일반 설정

소개

이 안내서에서는 Supabase 인증과 함께 Google Sign-In을 통합하는 Capacitor Social Login 플러그인을 사용하여 Google Sign-In을 모바일 플랫폼에서 사용하는 방법을 안내합니다. 이 설정은 모바일 플랫폼에서 native Google Sign-In을 사용하면서 백엔드 인증을 Supabase Auth로 사용할 수 있도록 합니다.

준비 사항

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

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

2. Google Login 일반 설정 Google OAuth 인증서를 설정하는 방법에 대한 안내서 목적 플랫폼에 맞는 Google OAuth 인증서를 설정하기 위해 다음을 따라하세요:

3. 안드로이드 설정

   • __CAPGO_KEEP_0__
   • iOS 설정
   • 웹 설정

   주의

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

구글 OAuth 제공자 활성화

1. Supabase 대시보드 프로젝트 클릭

2. 프로젝트 선택

   

3. 이동하세요 Authentication 메뉴

   

4. 클릭하여 Providers 탭

   

5. 찾아보기 Google 제공자

   

6. 제공자 활성화

   

7. 클라이언트 ID를 추가하려는 플랫폼에 대한 ID를 추가하세요

   

   주의

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

8. 버튼 Save Supabase Google Provider Save

   

당신은

하지 않아야 합니다 설정하지 않거나 또는 Client Secret (for OAuth) 앱플로우 플러그인 또는 Callback URL (for OAuth). 어떤 소스에서는 iOS에서 Google에 대해 설정하는 것을 제안할 수 있지만 이 안내서를 통해 이 설정은 필요하지 않습니다. Skip nonce checks for Google on iOS, but with this guide this isn’t needed.

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

How Google Sign-In with Supabase Authentication Helper Works

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

Complete Implementation

예제 앱의 file. supabaseAuthUtils.ts 1. Nonce Generation

1. Nonce Generation

구현은 Supabase nonce 요구 사항에 따라 안전한 nonce 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

기능은 플러그인을 초기화하고 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 전에 검증하는가?

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

1. 잘못된 요청 방지: 토큰의 대상 또는 비어있는 nonce가 일치하지 않으면 Supabase는 토큰을 거부합니다. 검증하기 전에 먼저 API 호출을 피하고 더 명확한 오류 메시지를 제공합니다.

2. 토큰 캐싱 문제: iOS와 같은 플랫폼에서 Google Sign-In SDK이 성능을 위해 토큰을 캐싱할 수 있습니다. 캐시된 토큰이 반환되면 캐시된 토큰은 다른 nonce (또는 비어있는 nonce)으로 생성되었을 수 있습니다. Supabase는 nonce가 일치하지 않는 오류로 토큰을 거부합니다. Supabase로 토큰을 전송하기 전에 검증하면 이 문제를 일찍 감지하고 자동으로 새 토큰으로 다시 시도할 수 있습니다.

3. 보안 (iOS): iOS에서 발급된 토큰이 사용자 지정 Google Client IDs와 일치하는지 확인하여, 다른 애플리케이션의 토큰을 사용하는 잠재적인 보안 문제를 방지합니다.

4. 오류 처리: 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
});

완전한 Code 참조

__CAPGO_KEEP_0__ 완전한 구현은 예제 앱의 __CAPGO_KEEP_0__의 supabaseAuthUtils.ts 파일에 포함되어 있습니다.

• getUrlSafeNonce() - URL-safe 난수 생성
• sha256Hash() - SHA-256로 문자열 해시
• getNonce() - 난수 pair 생성
• decodeJWT() - JWT 토큰 디코딩
• validateJWTToken() - JWT 청중과 난수 유효성 검사
• authenticateWithGoogleSupabase() - 자동 재시도 기능이 포함된 메인 인증 함수

추가 예제 파일

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

다음 단계

플랫폼에 따라 대상 플랫폼에 대한 설정 가이드로 이동하세요:

• 안드로이드 설정
• iOS 설정
• 웹 설정

Supabase Google 로그인 - 일반 설정에서 계속 진행하세요

만약 당신이 Supabase Google 로그인 - 일반 설정 인증 및 계정 흐름을 계획하고 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric Using @capgo/capacitor-social-login 두 단계 인증 두 단계 인증 구현에 대한 세부 정보입니다.