Google 로그인 (웹)

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

__CAPGO_KEEP_0__

Google Console에서 웹 클라이언트를 생성하세요.

이미 안드로이드용 Google 로그인 설정이 완료되어 있다면, 이 단계는 생략할 수 있습니다. 단계 2로 바로 진행할 수 있습니다.
1. 검색 바 클릭
2. __CAPGO_KEEP_0__ credentials __CAPGO_KEEP_1__ APIs and Services __CAPGO_KEEP_0__
3. __CAPGO_KEEP_0__ create credentials
4. Select OAuth client ID
5. Select the Application type 으로 Web application
6. 클라이언트 이름을 입력하고 클릭하세요. Create
7. 클라이언트 ID를 복사하세요. 이 값을 webClientId 애플리케이션에서 사용하세요.
Google Console에서 웹 클라이언트를 구성하세요.
1. Google Console을 열어주세요. 인증 정보 페이지 웹 클라이언트를 클릭하세요
2. 이제 다음을 추가해 주세요. 이 앱을 사용하는 모든 주소가 포함되어야 합니다. 예를 들어, 나는 Authorized JavaScript originsONLY localhost만 사용할 것입니다. 하지만 custom 포트를 사용하기 때문에 localhost와 함께 사용해야 합니다. 클릭하세요 http://localhost 허용된 자바스크립트 원본 섹션에 ADD URI 버튼을 클릭하세요 http://localhost:5173
  1. URL을 입력하세요 add URI
  2. ADD URI 버튼
  3. URL을 모두 추가할 때까지 반복해 주세요
  4. 완료되면 화면이 다음과 같이 보일 것입니다
3. 이제는 몇 가지 추가해 주세요 Authorized redirect URIsCapacitorSocialLogin 플러그인을 사용할 페이지에 따라 달라질 것입니다. 나의 경우에는 http://localhost:5173/auth
  1. CapacitorSocialLogin 플러그인을 사용할 페이지를 클릭해 주세요 ADD URI
  2. URL을 입력하고 클릭해 주세요 ADD URL ADD URI 대화창에 리다이렉트 URL이 입력된 상태
4. 웹 클라이언트 설정에서 저장 버튼을 클릭해 주세요 save

Now, you should be ready to call login from JavaScript like so:

First, import SocialLogin

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

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

When using Google login on web, you 반드시 call any function from the plugin when the redirect happens to initialize the plugin so it can handle the redirect and close the popup window. You can call either isLoggedIn() 또는 initialize() - 두 가지 모두 리다이렉트 처리를 트리거합니다.

// Option 1: Call isLoggedIn when the redirect page loads
SocialLogin.isLoggedIn({ provider: 'google' }).catch(() => {
  // Ignore the result, this is just to initialize the plugin
});

// Option 2: Call initialize when the redirect page loads
SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
  }
}).catch(() => {
  // Ignore any errors, this is just to handle the redirect
});

로그인 버튼을 만들어서 SocialLogin.login 클릭했을 때

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

Google Login on Web을 사용하는 경우 Google Login on Web 인증 및 계정 흐름을 계획하고 연결하려면 Using @capgo/capacitor-social-login Using @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의 구현 세부 정보를 위해, 두 단계 인증 __CAPGO_KEEP_0__의 implementation detail에 대한 두 단계 인증.

Google 로그인 (웹)

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__

웹에서 Google 로그인에서 계속 진행하세요