Google 로그인 웹

소개

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

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

웹에서 구글 로그인을 사용하는 것은 매우 간단합니다. 웹에서 구글 로그인을 사용하려면 다음 단계를 수행해야 합니다.

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

   주의

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

   1. 검색 바를 클릭합니다.

      

   2. 검색어를 입력하고 credentials 선택 (스크린샷의 2번째 옵션) APIs and Services APIs 및 Services가 강조된 자격 증명 옵션을 보여주는 검색 결과

      

   3. Google Console에 있는 create credentials

      

   4. 선택하세요 OAuth client ID

      

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

      

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

      

   7. 클라이언트 ID 정보에서 webClientId 를 복사하세요

      

2. 구글 콘솔에서 웹 클라이언트를 구성하세요.

   1. Please open the 인증 정보 페이지 클릭하세요.

      

   2. Now, please add the Authorized JavaScript origins. 이에는 앱을 사용하는 모든 주소가 포함되어야 합니다. 예를 들어, 나는 localhost만 사용할 것입니다. 하지만 나는 커스텀 포트를 사용하기 때문에 및 Please click on http://localhost 허용된 자바스크립트 원본 목록에서 ADD URI 버튼을 클릭하세요. http://localhost:5173

      1. AND add URI

         

      2. URL을 입력해 주세요.

         

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

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

         

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

      1. CapacitorSocialLogin 플러그인을 사용할 페이지를 클릭해 주세요. ADD URI

         

      2. URL을 입력하고 ADD 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',
         }
       })
      })

   웹 리다이렉트 처리

   웹에서 Google 로그인 사용할 때, 반드시 반드시 redirect가 발생할 때 플러그인을 초기화하여 리다이렉트를 처리하고 팝업 창을 닫을 수 있도록 플러그인에서 함수를 호출할 수 있습니다. 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.refresh({ provider: 'google' }) implement되지 않으며 google.mode: 'online'사용하여도 SocialLogin.login({ provider: 'google', ... }) 웹에서 최신 Google 토큰이 필요하시면 다시 호출하세요.

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

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

구글 로그인 웹에서 계속

이 경우 구글 로그인 웹 인증 및 계정 흐름을 계획하고 사용하는 경우 @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-passkey @capgo/capacitor-passkey 인증 및 계정 흐름을 계획하고 사용하는 경우 @capgo/capacitor-social-login을 연결합니다. @capgo/capacitor-native-생체인증 구현 세부 사항에 대한 @capgo/capacitor-native-생체인증, 그리고 두 단계 인증 구현 세부 사항에 대한 두 단계 인증.