Skip to content

Google Auth 이관을 @capgo/social-login으로

@GitHub

이 가이드는 “에서” “로”의 이동을 위한 포괄적인 단계를 제공하며, 인증 경험을 향상시키고 smooth한 전환을 보장합니다. 새로운 플러그인은 여러 가지 사회 인증 제공자를 단일, 일관된 __CAPGO_KEEP_0__ 하에 통합합니다. @codetrix-studio/capacitor-google-auth 설치 @capgo/capacitor-social-login, ensuring a smooth transition and improved authentication experience. The new plugin unifies multiple social authentication providers under a single, consistent API.

기존 패키지를 제거하십시오:

targetLanguage
  1. protectedTokens

    __CAPGO_KEEP_0__ 창
    npm uninstall @codetrix-studio/capacitor-google-auth
  2. __CAPGO_KEEP_1__ 패키지를 설치하세요:

    __CAPGO_KEEP_0__ 창
    npm install @capgo/capacitor-social-login
    npx cap sync

구글 인증 설정에서 중요한 변경 사항

__CAPGO_KEEP_2__ 제목: 중요한 변경 사항

중요한 변경 사항: 업데이트된 플러그인은 모든 플랫폼에서 웹 클라이언트 ID를 사용해야 합니다.

__CAPGO_KEEP_3__ 필요합니다:

  1. Google Cloud Console에서 Web Client ID를 만듭니다. 만약 없다면 (인증서를 얻는 방법)
  2. 이 Web Client ID를 모든 플랫폼의 webClientId 필드에 사용하세요
  3. Android의 경우, SHA1과 함께 Android Client ID를 만드는 것이 필요합니다. 하지만 이 토큰은 사용되지 않습니다 (Android 설정 가이드)

Code 변경 사항

Code 변경 사항
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
import { SocialLogin } from '@capgo/capacitor-social-login';

설정은 단순한 호출에서 더 구조화된 GoogleAuth.initialize() 구글 구성이 중첩된 SocialLogin.initialize() 복사

GoogleAuth.initialize({
clientId: 'CLIENT_ID.apps.googleusercontent.com',
scopes: ['profile', 'email'],
grantOfflineAccess: true,
});
await SocialLogin.initialize({
google: {
webClientId: 'WEB_CLIENT_ID.apps.googleusercontent.com', // Use Web Client ID for all platforms
iOSClientId: 'IOS_CLIENT_ID', // for iOS
mode: 'offline' // replaces grantOfflineAccess
}
});

로그인 섹션

로그인 메서드는

에서 GoogleAuth.signIn() 명시적 제공자 지정과 함께 SocialLogin.login() 복사

const user = await GoogleAuth.signIn();
const res = await SocialLogin.login({
provider: 'google',
options: {
scopes: ['email', 'profile'],
forceRefreshToken: true // if you need refresh token
}
});

Android

Android
  1. 업데이트 MainActivity.java (Android 전체 설정 가이드):
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;
public class MainActivity extends BridgeActivity {
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);
}
}
public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}
  1. iOS 설정 가이드업데이트)

  2. AppDelegate.swift capacitor.config.json사용하지 않습니다.

{
"plugins": {
"GoogleAuth": {
"scopes": ["profile", "email"],
"serverClientId": "xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
"forceCodeForRefreshToken": true
}
}
  1. Google Sign-In 메타 태그를 제거하세요. 그 전에 사용하셨다면: index.html 복사하기
<meta name="google-signin-client_id" content="{your client id here}" />
<meta name="google-signin-scope" content="profile email" />

복사하기

interface GoogleLoginResponse {
provider: 'google';
result: {
accessToken: {
token: string;
expires: string;
// ... other token fields
} | null;
idToken: string | null;
profile: {
email: string | null;
familyName: string | null;
givenName: string | null;
id: string | null;
name: string | null;
imageUrl: string | null;
};
};
}

제공자 정보:

  • provider: 인증 제공자 식별 ('google')
  • result.accessToken: 만료 시간이 있는 액세스 토큰 세부 정보
  • result.idToken: 인증을 위한 ID 토큰
  • result.profile: 이메일, 이름 및 이미지 URL 포함한 사용자 프로필 정보

새 패키지는 Google 이외의 여러 가지 소셜 인증 제공자를 지원합니다:

이 통합 접근 방식은 다음과 같은 것을 제공합니다:

  • 모든 제공자에서 일관적인 API
  • Improved TypeScript 지원
  • 개선된 오류 처리
  • 활발한 유지 보수 및 커뮤니티 지원

세부한 설정 지침을 확인하려면 main 문서 이 추가 제공자에 대한 세부한 설정 지침을 확인하려면

Google Auth Migration에서 @capgo/social-login로 계속 진행하세요.

제목 ‘Google Auth Migration에서 @capgo/social-login로 계속 진행하세요.’

Google Auth Migration을 @__CAPGO_KEEP_0__/social-login으로 사용 중이라면 Google Auth Migration을 @capgo/social-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단계 인증의 구현 세부 정보를 사용하여