Google 로그인 웹

소개

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

일반 설정 가이드

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

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

   주의

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

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

      

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

      

   3. 클릭하여 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에 추가하세요. 이에는 앱을 사용할 수 있는 모든 주소가 포함되어야 합니다. 예를 들어, 사용하지 마세요. 사용하지 마세요. http://localhost 이 두 주소를 모두 추가해야 합니다. http://localhost:5173

      1. 인증된 자바스크립트 원본 섹션에 ADD URI 버튼을 클릭하세요. add URI

         

      2. URL을 입력해 주세요.

         

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

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

         

   3. 다음과 같이 몇 가지를 추가해 주세요. 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' }) 구현되지 않으며 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-passkey @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and 두 단계 인증 두 단계 인증 구현 세부 사항