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. Google 로그인 플러그인을 사용하려면 Authentication 메뉴

   

4. Supabase 인증 메뉴에서 Providers 탭

   

5. 구글 로그인 제공자를 찾으세요 Google 구글 로그인 제공자

   

6. 구글 로그인 제공자 활성화

   

7. __CAPGO_KEEP_0__

   

   주의

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

8. 버튼 Save 클릭

   

주의

주의 당신은 하지 않아야 합니다 Client Secret (for OAuth) 또는 Callback URL (for OAuth)이 가이드를 따라야 하는 경우 iOS에서 Google에 대해 설정하는 것이 필요하지 않습니다. Skip nonce checks Voilà, Supabase 인증과 함께 Google Sign-In을 이제 활성화했습니다 🎉

Google Sign-In과 Supabase 인증 Helper가 어떻게 작동하는가

Google Sign-In과 Supabase 인증 Helper가 어떻게 작동하는가

완전한 Implementation

예제 앱의

파일에서 완전한 Implementation을 찾을 수 있습니다. Google Sign-In과 Supabase 인증 Helper가 어떻게 작동하는가 supabaseAuthUtils.ts 이 섹션에서는 Supabase와 Google Sign-In의 실제 작동 방식을 설명합니다. 이 흐름을 이해하면 인증 프로세스를 구현하고 문제를 해결하는 데 도움이 됩니다.

1. 난수 생성

구현은 Supabase 난수 요구 사항을 따르는 안전한 난수 pair를 생성합니다. Supabase 난수 요구 사항:

// 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 토큰의 난수 해시를 포함합니다.
• rawNonce 은 Supabase로 전달 → Supabase는 raw nonce의 해시를 생성하고 토큰의 nonce와 비교합니다.

2. Google Sign-In

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

복사

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 토큰을 검증하는 것은 여러 중요한 목적을 위해 수행됩니다:

잘못된 요청 방지

1. : 토큰의 대상 또는 비어있는 nonce가 잘못되면 Supabase는 토큰을 거부하더라도 토큰이 잘못된 경우에만 검증합니다. 이로 인해 불필요한 __CAPGO_KEEP_0__ 호출이 줄어들고 더 명확한 오류 메시지가 제공됩니다.: If the token has an incorrect audience or nonce mismatch, Supabase will reject the token anyway. Validating first avoids unnecessary API calls and provides clearer error messages.

2. __CAPGO_KEEP_0__On iOS 플랫폼에서, Google Sign-In SDK은 성능을 위해 토큰을 캐시할 수 있습니다. 캐시된 토큰이 반환될 때, 캐시된 토큰은 다른 nonce (또는 nonce가 없는 경우)로 생성되었을 수 있습니다. 따라서 Supabase는

3. 오류로 토큰을 거부합니다. Supabase로 전송하기 전에 토큰을 검증하면 이 문제를 빠르게 감지하고 자동으로 새 토큰으로 다시 시도할 수 있습니다. 보안

4. (iOS): iOS에서 토큰이 사용자 지정 Google Client IDs에 발급된 것을 확인하여, 다른 애플리케이션의 토큰을 사용하여 잠재적인 보안 문제를 방지합니다.더 나은 오류 처리

: Supabase로 전송하기 전에 토큰을 검증하면 iOS 캐싱 문제를 투명하게 처리하는 자동 다시 시도 로직이 필요합니다.

1. 검증이 실패하면 함수는 자동으로:
2. Google에서 로그아웃 (iOS에서 캐시된 토큰을 삭제 - 중요)
3. 인증을 다시 시도 (새 토큰 생성과 올바른 nonce를 강제)

다시 시도도 실패하면 오류를 반환

4. Supabase 로그인

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

완전한 Code 참조

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

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

추가 예제 파일

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

다음 단계

다음 단계 섹션

• 다음 단계에 대해 진행해 주세요: 대상 플랫폼에 대한 플랫폼별 설정 가이드로 이동하세요:
• 안드로이드 설정
• iOS 설정

Supabase Google 로그인 - 일반 설정에서 계속

Supabase Google 로그인 - 일반 설정을 사용 중이라면 Supabase Google 로그인 - 일반 설정 인증 및 계정 흐름을 계획하고 Supabase Google 로그인 - 일반 설정을 연결하려면 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login의 native 기능 @capgo/capacitor-social-login @capgo/capacitor-social-login의 implementation detail @capgo/capacitor-passkey @capgo/capacitor-passkey의 implementation detail @capgo/capacitor-native-biometric capgo/capacitor-native-생체인식 구현 세부 사항에 대해 두 단계 인증 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-생체인식 구현 세부 사항에 대해 두 단계 인증