Google 로그인 웹

소개

이 가이드에서, Google 로그인과 Capgo Social Login을 사용하여 웹 애플리케이션을 설정하는 방법을 배울 것입니다. 이미 일반 설정 가이드를 읽으셨다고 가정합니다. 일반 설정 가이드.

웹에서 Google 로그인을 사용하는 방법

웹에서 구글 로그인을 사용하는 것은 매우 간단합니다. 이를 사용하려면 다음 단계를 따르세요.

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

   주의

   Android에서 구글 로그인을 이미 설정했다면, 이 단계를 건너뛸 수 있습니다. 이미 웹 클라이언트를 생성했기 때문입니다. 2단계로 바로 진행할 수 있습니다.

   1. 검색 바를 클릭하세요

      

   2. 검색어를 입력하세요 credentials 그리고 검색 결과에서 APIs and Services option (스크린샷의 2번)

      

   3. Google Console에 있는 create credentials

      

   4. 선택하세요 OAuth client ID

      

   5. 선택하세요 Application type Web 옵션을 Web application

      

   6. 클라이언트 ID를 복사하세요. 이 값을 Create

      

   7. 클라이언트 ID를 webClientId 클라이언트 ID를

      

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

   1. Please open the 인증 정보 페이지 웹 클라이언트를 클릭하세요.

      

   2. 이제, Authorized JavaScript origins에 추가하세요. 이에는 앱을 사용할 수 있는 모든 주소를 포함해야 합니다. 예를 들어, 나는 ONLY 밖에 사용하지 않습니다. 하지만 나는 http://localhost 를 사용하기 때문에 http://localhost:5173

      1. 도 추가해야 합니다. add URI

         

      2. URL을 입력해 주세요.

         

      3. URL을 모두 추가할 때까지 반복해 주세요.

      4. 완료되면 화면이 다음과 같이 보일 것입니다.

         

   3. 다음과 같은 URL을 추가해 주세요. Authorized redirect URIsCapacitorSocialLogin 플러그인을 사용할 페이지에 따라 다르니, http://localhost:5173/auth

      1. 제 경우는 ADD URI

         

      2. Authorized redirect URIs 섹션의 ADD URI 버튼 ADD URL URL을 입력하고

         

   4. 클릭 save

      

3. 현재, 자바스크립트에서 호출할 준비가 되었어야 합니다. login 자바스크립트에서 호출하는 방법은 다음과 같습니다:

   1. 먼저, import를 호출하세요. SocialLogin

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

   2. 클립보드에 복사

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

   웹 리다이렉트 처리

   웹 리다이렉트 처리 웹에서 구글 로그인 사용할 때, 반드시 redirect가 발생했을 때 플러그인을 초기화하기 위해 플러그인에서 호출할 수 있는 함수를 호출할 수 있습니다. 플러그인이 리다이렉트를 처리하고 팝업 창을 닫을 수 있도록 하려면 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 토큰이 필요하면 다시 호출하세요. SocialLogin.login({ provider: 'google', ... }) 로그인 버튼을 만들 때 클릭했을 때 호출하는 함수를 호출하세요.

   3. __CAPGO_KEEP_0__ SocialLogin.login __CAPGO_KEEP_0__

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

구글 로그인 웹에서 계속

이러한 기능을 사용 중이라면 구글 로그인 웹 인증 및 계정 흐름을 계획하고 계정 관리를 위해 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey @capgo/capacitor-native-biometric 구현 세부 사항에 대한 @capgo/capacitor-native-biometric, 그리고 두 단계 인증 두 단계 인증 구현 세부 사항에 대한.