Supabase Google 로그인 - 일반 설정

소개

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

준비 사항

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

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

2. Google Login 일반 설정 가이드를 읽어보세요. __CAPGO_KEEP_0__ 구글 OAuth 인증서를 설정하는 방법을 알아보세요.

3. 구글 OAuth 인증서를 설정하는 방법을 알아보세요.

   • Android, iOS, 웹 환경에서 구글 OAuth 인증서를 설정하는 방법을 알아보세요.
   • Android 환경에서 구글 OAuth 인증서를 설정하는 방법을 알아보세요.
   • iOS 환경에서 구글 OAuth 인증서를 설정하는 방법을 알아보세요.

   주의

   주의

Supabase 튜토리얼을 시작하기 전에, 사용할 플랫폼에 맞는 클라이언트 ID를 생성해야 합니다.

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

2. 프로젝트 클릭

   

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

   

4. 선택하기 Providers 탭

   

5. 제공자 찾기 Google 제공자

   

6. provider를 활성화하세요.

   

7. 사용할 플랫폼에 따라 클라이언트 ID를 추가하세요.

   

   주의

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

8. 클릭하여 Save button

   

주의

Capgo를 사용하여 Google Sign-In을 Supabase 인증과 통합하는 방법을 설명합니다. SHOULD NOT Capgo를 사용하여 Google Sign-In을 Supabase 인증과 통합하는 방법을 설명합니다. Client Secret (for OAuth) or Callback URL (for OAuth)Capgo를 사용하여 Google Sign-In을 Supabase 인증과 통합하는 방법을 설명합니다. Skip nonce checks Capgo를 사용하여 Google Sign-In을 Supabase 인증과 통합하는 방법을 설명합니다.

Capgo를 사용하여 Google Sign-In을 Supabase 인증과 통합하는 방법을 설명합니다.

Capgo를 사용하여 Google Sign-In을 Supabase 인증과 통합하는 방법을 설명합니다.

Capgo를 사용하여 Google Sign-In을 Supabase 인증과 통합하는 방법을 설명합니다.

완전한 Implementation

완전한 implementation은 예시 앱의 파일에 supabaseAuthUtils.ts 1. Nonce Generation

Nonce Generation

복사 Flow::

// 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 };
}

: SHA-256 해시

• rawNonce__CAPGO_KEEP_0__
• nonceDigest__CAPGO_KEEP_0__ rawNonce (hex-encoded)
• nonceDigest Google Sign-In으로 전달되는 __CAPGO_KEEP_0__은 Google이 ID 토큰에 포함하는 해시된 nonce입니다.
• rawNonce Supabase로 전달되는 __CAPGO_KEEP_0__은 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

클립보드에 복사

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 };
}

Why validate before Supabase?

Supabase JWT 토큰을 전송하기 전에 토큰을 유효화하는 것은 여러 가지 중요한 목적으로 사용됩니다.:

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

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

3. nonce 일치 오류 오류로 거부합니다. 유효화하기 전에 보내기 전에, 우리는 이 문제를 일찍 감지하고 자동으로 다시 시도하여 새 토큰을 생성할 수 있습니다.

4. 보안(iOS): iOS에서 유효화는 특정 Google Client IDs를 위한 토큰이 발급되었는지 확인하여, 다른 애플리케이션의 토큰을 사용하는 잠재적인 보안 문제를 방지합니다.

오류 처리

1. : Supabase에 전송하기 전에 토큰을 유효화하면 자동으로 다시 시도 로직이 가능하여, iOS 캐싱 문제를 투명하게 처리할 수 있습니다.
2. 유효화가 실패하면 함수는 자동으로:
3. 재시도도 실패하면 오류를 반환합니다.

4. Supabase 로그인

마지막으로 유효한 토큰이 Supabase로 전송됩니다.

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

Code 완전한 참조

예제 앱의 파일에서 완전한 implementation을 확인할 수 있습니다. supabaseAuthUtils.ts - URL-안전한 난수 생성

• getUrlSafeNonce() - SHA-256로 문자열을 해시
• sha256Hash() - __CAPGO_KEEP_0__
• getNonce() - __CAPGO_KEEP_0__ pair을 생성합니다.
• decodeJWT() - JWT 토큰을 해독합니다.
• validateJWTToken() - JWT 토큰의 대상과 nonce을 검증합니다.
• authenticateWithGoogleSupabase() - 자동 재시도 기능이 포함된 메인 인증 함수입니다.

추가 예제 파일

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

다음 단계

설치 대상 플랫폼에 맞는 플랫폼별 설정 안내서로 이동하세요:

• Android 설정
• iOS 설정
• 웹 설정