Google Android에 로그인

소개

이 가이드에서는 Android에 대한 Capgo 소셜 로그인을 사용하여 Google 로그인을 설정하는 방법을 알아봅니다. 일반 설정 가이드를 이미 읽으셨다고 가정합니다.

Android에서 Google 로그인 사용

이 부분에서는 Android에서 Google 로그인을 설정하는 방법을 알아봅니다.

Android SHA1 인증서는 매우 고통스럽기 때문에 누구에게도 이를 설정하도록 하고 싶지 않습니다. 다음 단계에서는 Google Play 스토어에 게시되지 않고 로컬 시뮬레이터 또는 개발 하드웨어 장치에서만 사용되는 앱의 가장 간단한 시나리오를 가정합니다.

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

마지막으로, 실수를 해도 오류가 명확하지 않다는 점을 언급하는 것이 중요합니다. 디버깅이 매우 어려울 수 있습니다. 설정에 어려움을 겪는다면 Github 문제를 살펴보세요.

또한 자세한 내용은 Google Android에 대한 로그인 설정의 문제 해결 섹션을 참조하세요.

Android 클라이언트 ID를 생성합니다.
1. 검색창을 클릭하세요
2. credentials을 검색하고 ‘API 및 서비스’ 항목(스크린샷의 2번)을 클릭합니다.
3. ‘사용자 인증 정보 생성’을 클릭하세요.
4. OAuth client ID를 선택하세요.
5. Android 애플리케이션 유형을 선택합니다.
6. Android 스튜디오를 엽니다.
7. 네비게이터 맨 아래에서 ‘Gradle Scripts’를 찾으세요.
8. app 모듈에 대한 build.gradle을 찾습니다.
9. android.defaultConfig.applicationId을 복사합니다. 이것이 Google 콘솔의 패키지 이름이 됩니다.
10. 이제 터미널을 엽니다. 앱의 android 폴더에 있는지 확인하고 ./gradlew signInReport을 실행하세요.
1. 이 명령의 맨 위로 스크롤하십시오. 다음을 확인해야 합니다. SHA1을 복사합니다.
1. 이제 Google 콘솔로 돌아갑니다. ‘패키지 이름’으로 applicationId을 입력하고 인증서 필드에 SHA1을 입력한 후 create을 클릭하세요.
웹 클라이언트 생성(Android에 필요함)
1. Google 콘솔의 ‘인증서 생성’ 페이지로 이동합니다.
2. 애플리케이션 유형을 Web로 설정합니다.
3. Create을 클릭하세요.
4. 클라이언트 ID를 복사합니다. 이를 JS/TS 코드에서 webClientId로 사용합니다.

MainActivity 수정1. Android Studio에서 앱을 열어주세요. ‘cap open android’를 실행할 수 있습니다.

MainActivity.java 찾기
1. app 폴더를 엽니다.
2. java 찾기
3. MainActivity.java을 찾아 클릭하세요.

MainActivity.java을 수정합니다. 다음 코드를 추가해주세요

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 로그인을 사용하세요.

먼저 SocialLogin을 가져옵니다.

import { SocialLogin } from '@capgo/capacitor-social-login';

초기화를 호출합니다. 이 호출은 한 번만 호출되어야 합니다.

// 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',
    }
  })
})

SocialLogin.login에 전화하세요. 버튼을 만들고 클릭 시 다음 코드를 실행합니다.

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response
console.log(JSON.stringify(res))

테스트용 에뮬레이터 구성
1. ‘장치 관리자’로 이동하여 더하기 버튼을 클릭합니다.
2. 가상 디바이스 생성
3. Play Store 아이콘이 있는 장치를 선택하세요.
  
  보시다시피 pixel 8은 Play Store 서비스를 지원합니다.
4. next을 클릭하세요.
5. OS 이미지 유형이 Google Play인지 확인하세요. 반드시 Google Play 유형이어야 합니다.
6. 다음을 클릭하세요
7. 장치를 확인하세요. 원하는 대로 에뮬레이터의 이름을 지정할 수 있습니다.
8. ‘장치 관리자’로 이동하여 시뮬레이터를 부팅하세요.
9. 시뮬레이터가 부팅된 후 설정으로 이동합니다.
10. Google Play로 이동합니다.
1. Update을 클릭하고 약 60초 동안 기다립니다.
애플리케이션 테스트

모든 작업을 올바르게 수행했다면 Google 로그인 흐름이 제대로 작동하는 것을 볼 수 있습니다.