구글 로그인 (웹)

소개

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

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

Google Console에서 웹 클라이언트를 생성하기

1. 주의

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

   검색 바 클릭

   1. search bar

      

   2. 검색하십시오 credentials 그리고 APIs and Services 스크린샷에 표시된 옵션 (번호 2) 클릭하십시오

      

   3. 클릭하십시오 create credentials

      

   4. 생성하기 OAuth client ID

      

   5. OAuth 클라이언트 ID 옵션 선택하십시오 Application type 선택하십시오 Web application

      

   6. 클라이언트 이름을 지정하고 클릭하세요. Create

      

   7. __CAPGO_KEEP_0__ ID를 복사하세요. 이 값을 애플리케이션에서 사용합니다. webClientId __CAPGO_KEEP_1__

      

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

   1. 클라이언트 자격 증명 페이지를 열어 주세요. 클릭하세요. 클라이언트 자격 증명 목록에서 웹 클라이언트를 클릭하세요.

      

   2. 예를 들어, 나의 경우 Authorized JavaScript origins__CAPGO_KEEP_0__ localhost를 사용하십시오. 그러나 custom 포트를 사용하고 있기 때문에 custom 포트를 추가해야 합니다. custom 포트를 추가해야 합니다. http://localhost 그리고 http://localhost:5173

      1. 버튼을 클릭하십시오. add URI

         

      2. URL을 입력하십시오.

         

      3. URL을 모두 추가할 때까지 반복하십시오.

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

         

   3. CapacitorSocialLogin 플러그인을 사용할 페이지에 따라 달라질 것입니다. Authorized redirect URIsCapacitorSocialLogin 플러그인을 사용할 페이지에 따라 달라질 것입니다. http://localhost:5173/auth

      1. 클릭해 주세요 ADD URI

         

      2. URL을 입력하고 클릭하세요 ADD URL 다시

         

   4. 클릭 save

      

3. 이제 자바스크립트에서 호출할 준비가 되었습니다: login 먼저 import를 호출하세요

   1. 클립보드에 복사 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 로그인을 사용할 때, 리다이렉트가 발생하면 플러그인을 초기화하여 리다이렉트를 처리하고 팝업 창을 닫아야 합니다. 리다이렉트 처리를 트리거하는 함수를 호출할 수 있습니다. - 두 함수 모두 리다이렉트 처리를 트리거합니다. 클립보드 복사 주의 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 토큰을 사용해도. google.mode: 'online'. 웹에서 새로운 Google 토큰이 필요하면 호출하세요. SocialLogin.login({ provider: 'google', ... }) 다시 호출합니다.

   3. 로그인 버튼을 만들려면 클릭했을 때 호출하는 SocialLogin.login 클릭했을 때 호출

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

웹에서 Google 로그인에서 계속

Google 로그인 on Web을 사용 중이면 Google 로그인 on Web을 사용하여 인증 및 계정 흐름을 계획하려면 connect it with Using @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/capacitor-native-biometric에서 확인할 수 있습니다. 두 단계 인증 두 단계 인증 구현에 대한 세부 정보는 두 단계 인증에서 확인할 수 있습니다.