Android에서 Google Login

이 플러그인의 설치 단계와 전체 마크다운 가이드가 포함된 설정 프롬프트를 복사하세요.

소개

이 가이드에서는 Android용 Capgo Social Login으로 Google Login을 설정하는 방법을 알아봅니다. 이미 다음 내용을 읽었다고 가정합니다. 일반 설정 가이드.

이 섹션에서는 Android에서 Google login을 설정하는 방법을 배웁니다.

Android SHA1 인증서는 정말 골치 아픈 작업이라 누구에게도 이 설정을 권하고 싶지 않습니다. 다음 단계는 앱이 Google Play Store에 게시되지 않았고 로컬 시뮬레이터나 개발용 하드웨어 기기에서만 사용되는 가장 단순한 시나리오를 가정합니다.

Google Play 스토어에 앱을 배포했다면 반드시 프로덕션 릴리스용 Google Play 콘솔의 SHA1을 포함하는 추가 Android 클라이언트 ID를 추가해야 합니다. Google Play가 릴리스 번들에 서명하는 데 사용하는 SHA1 해시는 다음 위치에서 찾을 수 있습니다. Test and release > Setup > App Signing.

마지막으로, 설정을 잘못하면 오류가 명확하지 않을 수 있으며 디버깅이 매우 어려울 수 있다는 점을 강조하고 싶습니다. 설정에 어려움을 겪고 있다면 다음을 참고하세요. Github 이슈.

또한 다음 트러블슈팅 섹션을 참고할 수 있습니다. Android용 Google Login 설정 자세한 내용은 여기를 참고하세요.

Android 클라이언트 ID를 생성합니다.
1. 검색창을 클릭하세요
2. 검색: credentials 를 클릭하세요 APIs and Services 해당 항목(스크린샷의 2번)
3. 다음을 클릭하세요: create credentials
4. 선택 OAuth client ID
5. 다음을 선택하세요: Android 응용 프로그램 유형
6. Android Studio 열기
7. 네비게이터 맨 아래에서 다음 항목을 찾으세요: Gradle Scripts
8. 다음 항목을 찾아 build.gradle 모듈의 app
9. 다음을 복사하세요 android.defaultConfig.applicationId. 이것이 package name Google 콘솔에서
10. 이제 터미널을 여세요. 다음 경로에 있는지 확인하세요: android 앱 폴더로 이동하고 다음을 실행하세요 ./gradlew signInReport
1. 명령어 맨 위로 스크롤하세요. 아래 내용이 표시되어야 합니다. 다음을 복사하세요 SHA1.
1. 이제 Google Console으로 돌아가 다음을 입력하세요 applicationId 를 Package Name 으로 설정하고 인증서 필드에 SHA1을 입력한 뒤 create
Web 클라이언트 생성 (Android에 필수)
1. 다음으로 이동하세요: Create credentials Google Console의 페이지
2. 애플리케이션 유형을 Web
3. 클릭 Create
4. 클라이언트 ID를 복사하세요. 이 값을 webClientId JS/TS code에 사용합니다

다음을 포함하도록 MainActivity

Android Studio에서 앱을 여세요. 다음을 실행할 수 있습니다 cap open android
다음 항목을 찾아 MainActivity.java
1. 다음을 엽니다: app 폴더
2. 다음 항목을 찾아 java
3. 해당 항목을 찾으세요 MainActivity.java 그리고 클릭하세요

수정 MainActivity.java. 다음 code을 추가하세요

import ee.forgr.capacitor.social.login.GoogleProvider;
import ee.forgr.capacitor.social.login.SocialLoginPlugin;
import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
import com.getcapacitor.PluginHandle;
import com.getcapacitor.Plugin;
import android.content.Intent;
import android.util.Log;
import com.getcapacitor.BridgeActivity;

// ModifiedMainActivityForSocialLoginPlugin is VERY VERY important !!!!!!
public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {

      @Override
      public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
          PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
          if (pluginHandle == null) {
            Log.i("Google Activity Result", "SocialLogin login handle is null");
            return;
          }
          Plugin plugin = pluginHandle.getInstance();
          if (!(plugin instanceof SocialLoginPlugin)) {
            Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
            return;
          }
          ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
        }
      }

      // This function will never be called, leave it empty
      @Override
      public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

파일을 저장하세요

애플리케이션에서 Google Login 사용
1. 먼저 import합니다 SocialLogin
```
import { SocialLogin } from '@capgo/capacitor-social-login';
```
2. initialize를 호출하세요. 이 함수는 한 번만 호출해야 합니다.
```
// onMounted is Vue specific
// webClientId is the client ID you got in the web client creation step not the android client ID.
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
    }
  })
})
```
3. 호출하세요 SocialLogin.login. 버튼을 만들고 클릭 시 다음 code를 실행하세요.
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response
console.log(JSON.stringify(res))
```
  Google을 다음과 같이 초기화한 경우, mode: 'offline', SocialLogin.login() 반환합니다 serverAuthCode 를 백엔드 교환 흐름에 사용하세요. 해당 모드에서는 SocialLogin.refresh({ provider: 'google' }) 앱에서 호출하지 마세요. 교환은 serverAuthCode 백엔드에서 수행하고, Google refresh token을 백엔드에 저장한 뒤 백엔드에서 갱신하세요.
테스트용 에뮬레이터 설정
1. 들어가서 Device manager 그리고 + 버튼을 클릭하세요
2. 가상 디바이스 생성
3. 아이콘이 있는 기기를 아무거나 선택하세요 Play Store 아이콘
  
  보시다시피, pixel 8 는 Play Store 서비스를 지원합니다
4. 클릭 next
5. OS 이미지가 다음 유형인지 확인하세요 Google Play. 반드시 해당 유형이어야 합니다 Google Play
6. 다음을 클릭하세요
7. 기기를 확인하세요. 에뮬레이터 이름은 원하는 대로 설정할 수 있습니다
8. 들어가서 Device Manager 시뮬레이터를 부팅하세요
9. 시뮬레이터가 부팅되면 설정(Settings)으로 들어갑니다
10. 들어가서 Google Play
1. 클릭 Update 그리고 약 60초 기다립니다
애플리케이션 테스트

모두 제대로 진행했다면 Google 로그인 플로우가 정상적으로 작동하는 것을 확인할 수 있습니다:

문제 해결

문제가 발생하면 먼저 앱 구성을 Google Cloud Console 값과 비교해 보세요. Android Google Sign-In 실패는 보통 패키지 이름, SHA-1 또는 클라이언트 ID 불일치로 인해 발생합니다.

Credential Manager, SHA-1 및 Firebase

Android에서 이 플러그인은 Google Credential Manager(androidx.credentials 및 Sign in with Google)를 사용하며, 레거시 GoogleSignInClient API를 사용하지 않습니다. Logcat 오류 중 GetCredentialCustomException: [28444] Developer console is not set up correctly 은 해당 스택에서 발생합니다.

Logcat을 GoogleProvider 또는 CapgoSocialLogin 로그인 실패 후 필터링하세요. 플러그인은 패키지 이름, 서명 SHA-1 및 마스킹된 webClientId 를 기록하므로 Google Cloud Console과 비교할 수 있습니다.

필수 Google Cloud 설정

같은 Google Cloud 프로젝트에 두 종류의 OAuth 2.0 Client ID가 필요합니다:

Client 유형	용도	사용 위치
웹 애플리케이션	서버 / ID token audience	`webClientId` 에서 `SocialLogin.initialize()`
Android, 서명 키당 하나씩	APK가 Google을 호출할 권한이 있음을 증명	Google Cloud Console에서만 사용. 이 ID를 다음으로 전달하지 마세요: `webClientId`

흔히 하는 실수 중 하나는 Android client ID를 사용하는 것입니다. webClientIdCredential Manager에는 Web client ID가 필요합니다. Android client에는 콘솔에 등록된 올바른 package name과 SHA-1만 있으면 됩니다.

테스트하는 빌드에 서명하는 인증서마다 Android OAuth client를 하나씩 생성하세요:

Debug: 다음에서 ./gradlew signingReport debug variant용.
Release: 실제로 설치하는 APK 또는 AAB에서 가져옵니다.
Play App Signing: Play Console > App integrity > App signing key certificate에서 가져옵니다. 업로드 키 SHA-1이 이미 등록되어 있더라도 Play Store 빌드에는 이 정보가 반드시 필요합니다.

이 applicationId 에서 android/app/build.gradle Android OAuth client의 package name과 정확히 일치해야 하며, 모든 .debug 접미어.

OAuth 동의 화면이 Testing 모드인 경우, 테스트에 사용하는 모든 Google 계정을 Audience > Test users에 추가하세요. 앱을 Production으로 게시할 필요는 없습니다. email 및 profile scopes. Digital Asset Links (assetlinks.json)는 Credential Manager를 통한 Google 로그인에 필요하지 않습니다.

Google Cloud 변경 사항이 반영되는 데 최대 몇 시간이 걸릴 수 있습니다.

Error 28444: 개발자 콘솔이 올바르게 설정되지 않음

이는 거의 항상 Google이 설치된 APK 서명 인증서, 패키지 이름, 그리고 다음 항목의 조합을 거부했음을 의미합니다: webClientId. 다음 체크리스트를 확인하세요:

확인 webClientId Web application client ID가 맞는지, 그리고 다음으로 끝나는지 확인하세요: .apps.googleusercontent.com.
앱을 실행하여 오류를 재현한 뒤, Logcat에서 다음 내용을 확인하세요: GoogleProvider, signingSha1=, 그리고 package=.
다음에서 Google Cloud Console > Credentials, Android OAuth 클라이언트를 열고 정확한 패키지 이름과 SHA-1을 확인하세요.
릴리스 빌드를 테스트하는 경우, 디버그 키스토어만 아니라 해당 빌드의 SHA-1을 등록하세요.
앱이 Play Store를 통해 배포되는 경우, Play App Signing SHA-1도 등록하세요.
Web 및 Android 클라이언트가 동일한 Google Cloud 프로젝트에 있는지 확인하세요.
동의 화면이 Testing 상태라면, Google 계정이 테스트 사용자인지 확인하세요.
콘솔 변경 후 잠시 기다렸다가 다시 시도하세요.

USER_CANCELLED 잘 설정되지 않은 디버그 빌드에서 계정을 선택한 후에도 SHA-1 또는 클라이언트 ID 불일치일 수 있습니다. 먼저 위의 콘솔 설정을 수정하세요.

설치하는 빌드에서 SHA-1 추출하기

디버그 또는 로컬 빌드:

cd android && ./gradlew signingReport

서명된 릴리스 APK:

keytool -printcert -jarfile android/app/release/app-release.apk

해당 SHA-1을 패키지 이름이 일치하는 Android OAuth 클라이언트에 추가하고, 동일한 서명된 APK를 다시 설치한 뒤 다시 테스트하세요:

adb install android/app/release/app-release.apk

토큰은 다음 항목 아래에 중첩되어 있습니다: result:

const login = await SocialLogin.login({ provider: 'google' });
const idToken = login.result?.idToken;

Firebase Auth의 경우 해당 자격 증명을 생성하세요 idToken Web 클라이언트 ID를 사용하세요 webClientId 에서 initialize.

개발용 SHA-1 인증서를 가져올 수 없다면 커스텀 키스토어를 사용해 보세요. 이 이슈 코멘트에서 프로젝트에 키스토어를 추가하는 방법을 설명합니다.

사용 중이라면 Android에서 Google Login 인증 및 계정 흐름을 설계할 때, 이를 다음 항목과 연결하세요: @capgo/capacitor-social-login 사용하기 @capgo/capacitor-social-login 사용 시 네이티브 기능을 위해, @capgo/capacitor-social-login @capgo/capacitor-social-login의 구현 세부 사항은, @capgo/capacitor-passkey @capgo/capacitor-passkey의 구현 세부 사항은 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric의 구현 세부 사항은, 2단계 인증 2단계 인증의 구현 세부 사항에 대해서는