Google 로그인

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

소개

이 가이드에서, Google 로그인을 Capgo 소셜 로그인과 함께 웹 애플리케이션에 설정하는 방법을 배울 것입니다. 이 가이드를 읽기 전에 이미 일반 설정 가이드를 읽었다고 가정합니다. 일반 설정 가이드.

Google Console에서 웹 클라이언트를 생성합니다.

Google Console에서 웹 클라이언트를 생성합니다.

Google 로그인 Android 설정이 이미 완료되어 있으므로 이 단계를 건너뛸 수 있습니다. 이미 웹 클라이언트를 생성했습니다. 2 단계로 바로 진행할 수 있습니다.
1. 검색 바 클릭
2. 검색어 입력 credentials API 및 서비스가 강조된 자격 증명 옵션을 보여주는 검색 결과 APIs and Services Google 콘솔에서
3. API 및 서비스를 선택합니다. create credentials
4. API 및 서비스를 선택합니다. OAuth client ID
5. Select the Application type as Web application
6. 클라이언트 이름을 입력하고 클릭하세요. Create
7. 클라이언트 ID를 복사하세요. 이 ID를 webClientId 애플리케이션에서 사용합니다.
Google Console에서 웹 클라이언트를 구성하세요.
1. Google Console을 열어 자격 증명 페이지를 열어 주세요. __CAPGO_KEEP_0__을 클릭하세요.
2. 이제 __CAPGO_KEEP_0__에 다음을 추가해 주세요. 이에 포함된 모든 주소가 __CAPGO_KEEP_0__ 앱을 사용하는 데 사용될 수 있습니다. 나의 경우에는 localhost만 사용할 것입니다. 하지만 사용하는 커스텀 포트 때문에 localhost와 포트를 모두 추가해야 합니다. Authorized JavaScript origins__CAPGO_KEEP_0__을 클릭하세요. __CAPGO_KEEP_0__의 Authorized JavaScript origins 섹션에서 ADD URI 버튼을 클릭하세요. __CAPGO_KEEP_0__을 입력하세요. http://localhost __CAPGO_KEEP_0__에서 localhost URL을 입력한 ADD URI 대화창 http://localhost:5173
  1. __CAPGO_KEEP_0__까지 반복하세요. 모든 URL을 추가할 때까지. add URI
  2. __CAPGO_KEEP_0__
  3. __CAPGO_KEEP_0__
  4. When you finish, your screen should look something like this
3. Now, please add some Authorized redirect URIs이 기능을 사용하기 위해 CapacitorSocialLogin 플러그인을 사용할 페이지에 따라 달라집니다. 나의 경우에는 http://localhost:5173/auth
  1. Please click on ADD URI
  2. URL을 입력하고 ADD URL 다시
4. Click save

Now, you should be ready to call login 자바스크립트와 같이:

첫 번째로 import를 합니다. SocialLogin

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

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

웹에서 Google 로그인 사용할 때, 리다이렉트가 발생하면 반드시 plugin에서 함수를 호출해야 합니다. isLoggedIn() 리다이렉트를 처리하고 팝업 창을 닫기 위해 plugin을 초기화 시킬 수 있습니다. 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));

If you are using Google 로그인 사용 인증 및 계정 흐름을 계획하고 계정에 연결하려면 Using @capgo/capacitor-social-login Capgo에서 제공하는 Native Capability을 사용하기 위해 @capgo/capacitor-social-login @capgo/capacitor-social-login Capgo에서 제공하는 @capgo/capacitor-social-login의 Implementation Detail을 사용하기 위해 @capgo/capacitor-passkey Capgo에서 제공하는 @capgo/capacitor-passkey의 Implementation Detail을 사용하기 위해 @capgo/capacitor-native-biometric Capgo에서 제공하는 @capgo/capacitor-native-biometric의 Implementation Detail을 사용하기 위해 Two-factor authentication __CAPGO_KEEP_0__ 구현 세부 사항.

Google 로그인

소개

웹에서 Google 로그인 사용

Google Login on Web에서 계속하기