Google 로그인 (웹)

소개

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

웹에서 Google 로그인 사용하기

웹에서 Google 로그인 사용하기

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

   __CAPGO_KEEP_0__

   이미 안드로이드용 Google 로그인 설정이 완료되어 있다면, 이 단계는 건너 뛰어 2단계로 바로 진행할 수 있습니다.

   1. 검색 바 클릭

      

   2. __CAPGO_KEEP_0__ credentials __CAPGO_KEEP_0__ APIs and Services __CAPGO_KEEP_0__

      

   3. __CAPGO_KEEP_0__ create credentials

      

   4. Select OAuth client ID

      

   5. Select the Application type as Web application

      

   6. Name your client and click Create

      

   7. Copy the client ID, you’ll use this as the webClientId 애플리케이션에서 사용할

      

2. 클라이언트 ID 세부 정보를 표시합니다. Web 클라이언트 ID를 복사하세요.

   1. Google Console에서 웹 클라이언트를 구성하세요. Open the 인증 정보 페이지 웹 클라이언트를 클릭하세요

      

   2. 이제 다음을 추가해 주세요. 이 앱을 사용할 수 있는 모든 주소를 포함해야 합니다. 예를 들어, 나는 Authorized JavaScript originsONLY localhost만 사용할 것입니다. 하지만 custom 포트를 사용하기 때문에 localhost와 함께 추가해야 합니다. 그리고 http://localhost 클릭하세요 http://localhost:5173

      1. 인증된 자바스크립트 원본 섹션에 ADD URI 버튼 add URI

         

      2. ADD URI 대화창에 localhost URL이 입력된 상태

         

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

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

         

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

      1. 이용할 페이지에 따라 달라질 것입니다. 나의 경우에는 ADD URI

         

      2. ADD URI 버튼을 클릭하여 ADD URL URL을 입력하고

         

   4. ADD URI dialog에 리다이렉트 URL을 입력한 후 save

      

3. 이제 JavaScript에서 호출할 준비가 되었습니다. login from JavaScript와 같이 호출하십시오.

   1. 먼저 import SocialLogin

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

   2. Then, 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 로그인 웹에서 사용할 때, MUST 리다이렉트가 발생하면 플러그인에서 함수를 호출하여 플러그인을 초기화하여 리다이렉트를 처리하고 팝업 창을 닫아야 합니다. isLoggedIn() OR 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', ... }) 클릭했을 때

   3. 클립보드에 복사 SocialLogin.login 구글 로그인에서 계속 진행하세요

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

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__에서 __CAPGO_KEEP_1__-social-login을 사용하는 경우 Google 로그인 웹 인증 및 계정 흐름을 계획하고 연결하려면 capgo/capacitor-social-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_KEEP_0__