Google 로그인 웹

소개

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

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

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

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

   주의

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

   1. 검색 바를 클릭하세요

      

   2. 검색어를 입력하세요 credentials 검색 결과에서 API 및 서비스가 강조된 '인증 정보' 옵션을 클릭하세요 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. 아래의 인증 정보 페이지 웹 클라이언트를 클릭하세요.

      

   2. 이제, Authorized JavaScript origins에 추가하세요. 이에는 앱을 사용할 수 있는 모든 주소가 포함되어야 합니다. 예를 들어, 사용하지 마세요. localhost http://localhost 및 http://localhost:5173

      1. 클릭하세요. 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. 이러한 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 로그인을 사용할 때, 반드시 반드시 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'사용하여도 SocialLogin.login({ provider: 'google', ... }) 웹에서 최신 Google 토큰이 필요하다면 다시 호출하세요.

   3. 로그인 버튼을 만들 때 클릭했을 때 SocialLogin.login 호출하세요.

      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-social-login @capgo/capacitor-native-biometric 구현 세부 사항에 대한 @capgo/capacitor-native-biometric 두 단계 인증 구현 세부 사항에 대한 두 단계 인증