웹에서 Google 로그인 사용하기

이 플러그인의 설치 단계와 전체 마크다운 가이드가 포함된 설정 프롬프트를 복사하세요.

소개

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

Google Console에서 웹 클라이언트 만들기

주의

검색 바 클릭
1. Google Console 검색 바
2. __CAPGO_KEEP_0__를 검색하고 credentials __CAPGO_KEEP_0__에서 2번 스크린샷에 표시된 APIs and Services __CAPGO_KEEP_0__ 옵션을 클릭하세요.
3. Google Console에서 create credentials
4. __CAPGO_KEEP_0__를 선택하세요. OAuth client ID
5. __CAPGO_KEEP_1__를 선택하세요. Application type __CAPGO_KEEP_2__를 선택하세요. Web application
6. __CAPGO_KEEP_0__를 입력하세요. Create
7. 클라이언트 ID를 복사하세요. 이 값을 webClientId 애플리케이션
Google Console에서 웹 클라이언트를 구성하십시오.
1. 다음으로 인증 정보 페이지를 열어 주십시오. 클릭하여
2. 다음으로 Authorized JavaScript origins. 이에 포함되어야 하는 것은, 당신이 앱을 사용할 수 있는 모든 주소입니다. 예를 들어, 나의 경우는 ONLY localhost를 사용하되, 사용하는 커스텀 포트 때문에 둘 다 추가해야 합니다. http://localhost 그리고 http://localhost:5173
  1. 클릭하세요. add URI
  2. URL을 입력하세요.
  3. 모든 URL을 추가할 때까지 반복하세요.
  4. 완료했을 때 화면은 다음과 같이 보일 것입니다.
3. 다음과 같이 URL을 추가하세요. Authorized redirect URIsCapacitorSocialLogin 플러그인을 사용할 페이지에 따라 달라질 것입니다. 나의 경우는 http://localhost:5173/auth
  1. 클릭하세요. ADD URI
  2. URL을 입력하고 클릭하세요. ADD URL 다시
4. 클릭 save
현재, 자바스크립트에서 호출할 준비가 되었습니다. 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' }) 구현되지 않았습니다. Cloudflare, Capacitor, GitHub, Capgo, code, API, SDK, CLI, npm, bun과 같은 보호된 토큰을 제외하고, 모든 리다이렉트 상황에서. google.mode: 'online'. Google 토큰이 필요하면 Web에서 다시 호출하세요. SocialLogin.login({ provider: 'google', ... }) 다시.
1. 클릭했을 때 호출하는 로그인 버튼을 생성하세요. SocialLogin.login 클립보드에 복사
```
const res = await SocialLogin.login({
 provider: 'google',
 options: {}
})
// Handle the response
console.log(JSON.stringify(res));
```