메뉴로 바로가기

안드로이드에서 Google 로그인

Capgo Social Login을 사용하여 Android에서 Google 로그인을 설정하는 방법을 배울 것입니다. 이 가이드를 읽기 전에 이미 Android의 일반적인 설정 가이드를 읽었다고 가정합니다. 일반 설정 가이드.

Android에서 Google 로그인 사용

Android에서 Google 로그인 설정

주의

  1. Android 클라이언트 ID를 생성하세요.

    1. 검색 바를 클릭하세요.

      Google 콘솔 검색 바
    2. __CAPGO_KEEP_0__ 검색하기 credentials __CAPGO_KEEP_1__에서 __CAPGO_KEEP_0__를 클릭하세요. APIs and Services 스크린샷의 2번째 항목을 클릭하세요.

      __CAPGO_KEEP_0__ 결과를 보여주는 __CAPGO_KEEP_2__ 옵션에 __CAPGO_KEEP_3__와 __CAPGO_KEEP_4__가 강조되어 있습니다.
    3. __CAPGO_KEEP_1__에서 __CAPGO_KEEP_5__ 버튼을 클릭하세요. create credentials

      __CAPGO_KEEP_6__에서 __CAPGO_KEEP_7__ 옵션을 선택하세요.
    4. __CAPGO_KEEP_8__ 옵션을 선택하세요. OAuth client ID

      __CAPGO_KEEP_9__ 유형을 선택하세요.
    5. __CAPGO_KEEP_10__ 유형 선택 창에서 __CAPGO_KEEP_11__ 옵션을 강조하여 선택하세요. Android __CAPGO_KEEP_12__를 열어보세요.

      __CAPGO_KEEP_13__를 열어보세요.
    6. __CAPGO_KEEP_14__를 열어보세요.

    7. At the very bottom of the navigator, find the Gradle Scripts

      구어세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요
    8. 총주세요 build.gradle 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 app

      총주세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요
    9. 총주세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 android.defaultConfig.applicationId총주세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 package name 총주세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요

      총주세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요
    10. 총주세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 총주세요 안녕세요 주세요 android Terminal showing gradlew signInReport command ./gradlew signInReport

    Terminal showing gradlew signInReport command
    1. 위치 바깥으로 스크롤하여 상단에 있는 항목을 찾으세요. 다음 항목을 복사하세요. SHA1.
    SHA1 인증서 지문이 표시된 터미널 출력
    1. Google Console로 돌아가서 applicationId SHA1 Package Name 인증서 field에 create
    Android 클라이언트 생성 폼에 패키지 이름과 SHA1이 입력된 상태
  2. Android 클라이언트를 생성하기 위해 웹 클라이언트를 생성하세요.

    1. Google Console의 Create credentials 페이지로 이동하세요.

    2. 애플리케이션 유형을 Web

      애플리케이션 유형 선택 창에서 Web 옵션을 선택하세요.
    3. 클릭하세요. Create

      웹 클라이언트 생성 양식에 Create 버튼이 아래에 있습니다.
    4. 클라이언트 ID를 복사하세요. 이 값을 JS/TS __CAPGO_KEEP_0__에서 사용합니다. webClientId in your JS/TS code

      앱을
  3. Please 앱을 Android Studio에서 열어 주세요. 앱을 MainActivity

    1. Find cap open android

    2. Open the MainActivity.java

      1. 폴더 app Android Studio 프로젝트 탐색기에서 App 폴더를 찾으세요.

        Find
      2. Android Studio 프로젝트 구조에서 Java 폴더를 찾으세요. java

        Create
      3. Find your MainActivity.java and click on it

        MainActivity.java file in package structure
    3. Modify MainActivity.java. Please add the following 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() {}
      }
    4. Save the file

  4. Use Google Login in your application

    1. First, import SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';
    2. Call initialize. This should be called only once.

      // 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. Call SocialLogin.login. code을 클릭할 때 실행하는 버튼을 만들고.

      const res = await SocialLogin.login({
      provider: 'google',
      options: {}
      })
      // handle the response
      console.log(JSON.stringify(res))
  5. 테스트를 위해 에뮬레이터를 구성하십시오.

    1. 앱에 들어가십시오. Device manager 그리고 플러스 버튼을 클릭하세요

      Android Studio의 Device Manager에서 플러스 버튼이 강조된 상태
    2. 가상 장치를 만들기

      가상 장치 구성에서 Create Virtual Device 버튼
    3. Play Store를 지원하는 장치 중에任意의 장치를 선택하세요 Play Store 아이콘

      플레이 스토어 지원 장치가 표시된 하드웨어 선택

      보시다시피, pixel 8 를 지원합니다 Play Store 서비스

    4. 클릭 next

      장치 생성 마법사에서 Next 버튼
    5. OS 이미지의 유형이 맞는지 확인하세요. Google Play. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ Google Play

      Google Play 유형 이미지를 보여주는 시스템 이미지 선택 화면
    6. 다음으로 이동

      시스템 이미지 선택 화면의 다음 버튼
    7. 장치 확인. 장치 이름을 원하는 대로 지정을 해주세요.

      장치 구성 확인 화면에 완료 버튼
    8. 시뮬레이터로 Device Manager 시뮬레이터를 부팅하세요.

      시뮬레이터가 부팅되면 설정으로 들어가세요.
    9. 시뮬레이터 설정

      안드로이드 에뮬레이터에서 설정 앱을 보여주는 화면
    10. 설정 화면으로 이동하세요 Google Play

    구글 플레이 옵션을 포함한 설정 화면
    1. 클릭 Update 약 60초 동안 기다리세요
    구글 플레이 업데이트 화면에 Update 버튼이 있습니다
  6. 애플리케이션을 테스트하세요

    모든 것을 올바르게 수행했는지 확인하세요. 구글 로그인 흐름이 정상적으로 작동하는지 확인하세요.

    안드로이드에서 구글 로그인 흐름을 보여주는 데모

문제 해결

문제 해결

문제가 발생한 경우, 아래를 확인하세요 Github 문제.

Google 로그인과 관련된 문제는 항상 SHA1 인증서와 관련된 문제입니다.

개발 SHA1 인증서를 받을 수 없다면, 사용자 정의 키 스토어를 사용해 보세요. 여기 는 프로젝트에 키 스토어를 추가하는 방법에 대한 설명입니다.