Supabase Google 로그인 - 일반 설정

소개

이 가이드는 Supabase 인증과 함께 Google Sign-In을 통합하는 Capacitor Social Login 플러그인을 사용하여 native Google Sign-In을 모바일 플랫폼에서 사용하는 동안 백엔드 인증을 위해 Supabase Auth를 사용하는 방법을 안내합니다.

사전 요구 사항

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

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

2. 설정하기 Google 로그인 일반 설정 Google OAuth 인증서를 설정하는 방법에 대한 안내서를 읽었습니다

3. 설정하기

   • Google OAuth 인증서를 설정하는 방법에 대한 플랫폼별 안내서를 읽었습니다
   • Android 설정
   • iOS 설정

   주의

   주의입니다. Supabase 튜토리얼을 시작하기 전에 사용할 플랫폼의 클라이언트 ID를 생성해야 합니다. 7단계에서 사용할 것입니다.

Google OAuth 제공자 활성화

1. Go to your Supabase

2. Click on your

   

3. Do go to the Authentication 메뉴

   

4. Click on the Providers 탭

   

5. Find the Google provider

   

6. Enable the provider

   

7. Add the client IDs for the platforms you plan to use

   

   Note

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

8. Click on the Save __CAPGO_KEEP_0__

   

주의

당신은 하지 않아야 합니다 설정 Client Secret (for OAuth) 또는 Callback URL (for OAuth). 일부 자료는 iOS에서 Google 설정하는 것을 제안할 수도 있지만 이 가이드를 따라야 하는 것은 필요하지 않습니다. Skip nonce checks Voilà, 당신은 이제 Supabase 인증을 사용하여 Google Sign-In을 활성화했습니다 🎉

Google Sign-In with Supabase Authentication Helper가 어떻게 작동하는지

Google Sign-In with Supabase Authentication Helper가 어떻게 작동하는지 설명하는 섹션입니다.

이 섹션에서는 Google Sign-In이 Supabase와 어떻게 통합되는지 underlying flow를 설명합니다. 이 흐름을 이해하면 인증 프로세스를 implement하고 troubleshoot하는 데 도움이 됩니다.

Complete Implementation

Complete Implementation은 예제 앱의 supabaseAuthUtils.ts 파일에 있습니다.

1. Nonce Generation

implementation은 Supabase nonce 요구 사항을 따라 secure nonce pair를 생성합니다. Copy to clipboard:

// 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: __CAPGO_KEEP_0__ (64 자리 16진수 문자)
• nonceDigest: __CAPGO_KEEP_0__의 SHA-256 해시 rawNonce (16진수 인코딩)
• nonceDigest Google Sign-In으로 전달 → Google은 ID 토큰에 nonce摘要를 포함합니다.
• rawNonce Supabase로 전달 → Supabase는 토큰의 nonce와 raw 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로 전송하기 전에 implementation은 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와 같은 플랫폼 (특히 iOS)에서 Google Sign-In SDK이 성능을 위해 토큰을 캐싱할 수 있습니다. 캐시된 토큰이 반환될 때, 캐시된 토큰은 다른 nonce (또는 nonce가 없는 경우)로 생성되었을 수 있습니다. Supabase는 nonce 불일치 오류로 토큰을 거부합니다. 유효성을 검사하기 전에 Supabase로 토큰을 전송하면, 이 문제를 일찍 감지하고 자동으로 새 토큰으로 다시 시도할 수 있습니다.

3. 보안 (iOS): iOS에서 유효성을 검사하면, 토큰이 특정 Google Client ID에 발급된 것을 확인하여, 다른 애플리케이션의 토큰을 사용하는 잠재적인 보안 문제를 방지합니다.

4. 오류 처리: Supabase 이전에 유효성을 검사하면, 자동으로 다시 시도 로직을 감지할 수 있습니다. 이는 iOS 캐싱 문제를 투명하게 처리하는 데 필수적입니다.

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

1. iOS에서 cached 토큰을 삭제하는 critical 작업을 수행합니다.
2. 인증을 다시 시도합니다 (correct nonce를 사용하여 토큰을 새로 생성합니다).
3. retry도 실패하면 에러를 반환합니다.

4. Supabase 로그인

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

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

Code 완료 참조

구현은 예제 앱의 파일에 있습니다. 이 파일에는 다음이 포함됩니다. supabaseAuthUtils.ts 예제 앱의 파일, 이에 포함되어 있습니다.

• getUrlSafeNonce() - __CAPGO_KEEP_0__ URL-safe 난수 생성
• sha256Hash() - __CAPGO_KEEP_0__ SHA-256 해시
• getNonce() - __CAPGO_KEEP_0__ nonce pair 생성
• decodeJWT() - __CAPGO_KEEP_0__ JWT 토큰 디코딩
• validateJWTToken() - __CAPGO_KEEP_0__ JWT 대상자 및 nonce 검증
• authenticateWithGoogleSupabase() - __CAPGO_KEEP_0__ 자동 재시도 포함 인증 함수

추가 예제 파일

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

다음 단계

원하는 플랫폼에 맞는 설정 가이드로 이동하세요:

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

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

인증 및 계정 흐름을 계획하고 계신 경우 Supabase Google Login - 일반 설정 이를 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login과 연결하세요 Using @capgo/capacitor-social-login capgo의 원시 기능을 사용하는 @capacitor/__CAPGO_KEEP_2__-social-login에 대해 @capgo/capacitor-social-login capgo의 구현 세부 정보를 사용하는 @capacitor/__CAPGO_KEEP_2__-social-login에 대해 @capgo/capacitor-passkey capgo의 구현 세부 정보를 사용하는 @capacitor/__CAPGO_KEEP_2__-passkey에 대해 @capgo/capacitor-native-biometric capgo의 구현 세부 정보를 사용하는 @capacitor/__CAPGO_KEEP_2__-native-biometric에 대해 두 단계 인증 __CAPGO_KEEP_0__의 구현 세부 정보를 사용하는 두 단계 인증에 대해