Google 웹에서 로그인

소개

이 가이드에서는 웹 애플리케이션용 Google 로그인을 Capgo 소셜 로그인으로 설정하는 방법을 알아봅니다. 일반 설정 가이드를 이미 읽으셨다고 가정합니다.

웹에서 Google 로그인 사용

웹에서 Google 로그인을 사용하는 것은 매우 간단합니다. 이를 사용하려면 다음을 수행해야 합니다.

Google 콘솔에서 웹 클라이언트 생성

:::참고 Android에 대한 Google 로그인을 이미 구성한 경우 이미 웹 클라이언트를 생성했으므로 이 단계를 건너뛸 수 있습니다. 2단계로 바로 진행할 수 있습니다. :::
1. 검색창을 클릭하세요
2. credentials을 검색하고 ‘API 및 서비스’ 옵션을 클릭합니다(스크린샷의 2번).
3. ‘사용자 인증 정보 생성’을 클릭하세요.
4. OAuth client ID을 선택하세요.
5. ‘애플리케이션 유형’을 ‘웹 애플리케이션’으로 선택합니다.
6. 고객 이름을 지정하고 Create을(를) 클릭하세요.
7. 클라이언트 ID를 복사합니다. 이를 애플리케이션에서 webClientId로 사용합니다.
Google 콘솔에서 웹 클라이언트 구성
1. 자격 증명 페이지를 열고 웹 클라이언트를 클릭하세요.
2. 이제 Authorized JavaScript origins을 추가하세요. 여기에는 앱에 사용할 수 있는 모든 주소가 포함되어야 합니다. 어떤 경우에는 만 localhost를 사용하겠지만, 사용자 정의 포트를 사용하기 때문에 http://localhost 및 http://localhost:5173을 모두 추가해야 합니다.
  1. ‘URI 추가’를 클릭하세요.
  2. URL을 입력해주세요
  3. 모든 URL을 추가할 때까지 반복하세요.
  4. 완료되면 화면은 다음과 같아야 합니다.
3. 이제 ‘승인된 리디렉션 URI’를 추가해 주세요. 이는 CapacitorSocialLogin 플러그인을 사용하기 위해 의존하는 페이지에 따라 달라집니다. 제 경우에는 http://localhost:5173/auth에서 사용할 예정입니다.
  1. ADD URI를 클릭하세요.
  2. URL을 입력하고 ‘URL 추가’를 다시 클릭하세요.
4. save을(를) 클릭하세요.

이제 다음과 같이 JavaScript에서 login을 호출할 준비가 되었습니다.

먼저 SocialLogin을(를) 가져옵니다.

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

그런 다음 초기화를 호출합니다. 이는 한 번만 호출해야 합니다.

// 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.login를 호출하는 로그인 버튼을 생성합니다.

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