웹에서 Google Login

소개

이 가이드에서는 웹 애플리케이션용 Capgo Social Login으로 Google Login을 설정하는 방법을 알아봅니다. 다음 내용은 이미 읽었다고 가정합니다. 일반 설정 가이드.

웹에서 Google 로그인 사용하기

웹에서 Google Login을 사용하는 건 꽤 간단합니다. 사용하려면 다음 단계를 따르세요:

1. Google Console에서 웹 클라이언트 생성

   참고

   이미 Android용 Google Login을 설정했다면 웹 클라이언트를 이미 생성했으므로 이 단계는 건너뛰고 바로 2단계로 진행해도 됩니다.

   1. 검색창을 클릭하세요

      

   2. 검색: credentials 를 클릭하세요 APIs and Services 옵션 (스크린샷의 2번 항목)

      

   3. 다음을 클릭하세요: create credentials

      

   4. 선택 OAuth client ID

      

   5. 다음을 선택하세요: Application type 로 Web application

      

   6. 클라이언트 이름을 입력하고 클릭하세요 Create

      

   7. 클라이언트 ID를 복사하세요. 이 ID는 다음 용도로 사용됩니다: webClientId 애플리케이션 내

      

2. Google Console에서 Web 클라이언트 설정하기

   1. 다음 페이지를 열고 credentials 페이지를 사용 중인 Web 클라이언트를 클릭하세요

      

   2. 이제 다음을 추가해 주세요 Authorized JavaScript origins. 앱에서 사용할 수 있는 모든 주소를 포함해야 합니다. 제 경우에는 오직 localhost만 사용하지만, 커스텀 포트를 사용하므로 둘 다 추가해야 합니다. http://localhost 및 http://localhost:5173

      1. 클릭해 주세요 add URI

         

      2. URL을 입력해 주세요

         

      3. 모든 URL을 추가할 때까지 반복하세요

      4. 완료하면 화면이 다음과 비슷하게 보일 겁니다

         

   3. 이제 다음을 추가해 주세요: Authorized redirect URIs. CapacitorSocialLogin 플러그인을 사용할 페이지에 따라 설정이 달라집니다. 여기서는 http://localhost:5173/auth

      1. 클릭해 주세요 ADD URI

         

      2. URL을 입력하고 ADD URL 호출하세요

         

   4. 클릭 save

      

3. 이제 다음과 같이 JavaScript에서 login 를 호출할 준비가 되었습니다:

   1. 먼저, import 하세요 SocialLogin

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

   2. 그 다음 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',
         }
       })
      })

   Web Redirect 처리

   웹에서 Google 로그인을 사용할 때는 반드시 리다이렉트가 발생할 때 플러그인을 초기화하기 위해 플러그인의 함수를 호출해야 합니다. 그래야 리다이렉트를 처리하고 팝업 창을 닫을 수 있습니다. 다음 중 하나를 호출하거나 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.refresh({ provider: 'google' }) 사용하더라도 구현되어 있지 않습니다. google.mode: 'online' 웹에서 새로운 Google token이 필요한 경우, SocialLogin.login({ provider: 'google', ... }) 다시.

   3. 클릭 시 다음을 호출하는 로그인 버튼을 만드세요: SocialLogin.login 클릭 시

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

웹에서 Google Login으로 계속하기

사용 중이라면 웹에서 Google 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단계 인증의 구현 세부 사항에 대해서는