웹에서 Google 로그인

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

소개

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

웹에서 구글 로그인을 사용하는 것은 상당히 간단합니다. 이 기능을 사용하려면 다음 단계를 수행해야 합니다.

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

구글 로그인 Android 설정이 이미 완료되어 있다면, 이 단계를 생략하고 2단계로 진행할 수 있습니다.
1. 검색 바를 클릭하세요.
2. 검색어를 입력하세요. credentials 검색 결과에서 APIs and Services APIs 및 Services가 강조된 자격 증명 옵션을 클릭하세요.
3. 자격 증명 옵션을 클릭하세요. create credentials
4. 선택 OAuth client ID
5. 선택한 Application type 으로 Web application
6. 클라이언트 이름을 입력하고 클릭하세요. Create
7. 클라이언트 ID를 복사하세요. 이 ID를 애플리케이션에서 사용합니다. webClientId 애플리케이션에서
클라이언트 ID 세부 사항을 표시합니다. 웹 클라이언트 ID를 복사하세요.
1. 이러한 기능을 사용하려면 인증 정보 페이지를 열어 주세요 웹 클라이언트를 클릭하세요
2. 이제 다음 단계로 이동해 주세요 Authorized JavaScript origins이 URL을 추가해 주세요. 이에 포함된 주소는 앱을 사용할 때 사용할 수 있는 모든 주소입니다. 사용하지 않습니다. localhost만 사용합니다. http://localhost and http://localhost:5173
  1. localhost와 함께 사용합니다. add URI
  2. URL을 입력하세요
  3. 모든 URL을 추가할 때까지 다시 반복해 주세요
  4. 작업을 마치면 화면은 다음과 같이 보일 것입니다
3. 다음과 같은 URL을 추가해 주세요 Authorized redirect URIsCapacitorSocialLogin 플러그인을 사용할 페이지에 따라 다를 수 있습니다. 저는 이 플러그인을 사용할 페이지는 http://localhost:5173/auth
  1. 클릭해 주세요 ADD URI
  2. URL을 입력하고 다시 클릭해 주세요 ADD URL again
4. 클릭 save
웹 클라이언트 설정 하단의 저장 버튼 login 자바스크립트에서 호출할 준비가 되었어야 합니다.
1. from 자바스크립트와 같이 호출합니다. 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',
   }
 })
})
```
다음으로, initialize를 호출합니다. 이 함수는 단 한 번만 호출해야 합니다.
웹 리다이렉트 처리 MUST 반드시 플러그인에서 함수를 호출해야 합니다. 플러그인이 리다이렉트를 처리하고 팝업 창을 닫을 수 있도록 초기화할 수 있습니다. 플러그인에서 호출할 수 있는 함수는 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'웹에서 최신 Google 토큰을 얻으려면 다시 호출하세요. SocialLogin.login({ provider: 'google', ... }) again.
1. 이용자 SocialLogin.login - both will trigger the redirect handling:
```
const res = await SocialLogin.login({
 provider: 'google',
 options: {}
})
// Handle the response
console.log(JSON.stringify(res));
```

이 경우 구글 로그인 웹 인증 및 계정 흐름을 계획하고 사용하는 경우 @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-native-biometric Using @capgo/capacitor-social-login for capgo capacitor-native-biometric 구현 세부사항에 대해 두 단계 인증 구글 소셜 로그인 플러그인 구현 세부 정보

웹에서 Google 로그인

소개

웹에서 Google 로그인 사용

구글 로그인 웹에서 계속