웹사이트에 Google One Tap을 구현하는 완벽 가이드

분명 여러분도 이런 경험 있으실 거예요. 웹사이트에 접속해서 회원가입을 하려고 하는데, 끝도 없이 긴 양식에 심지어 반려동물 이름까지 입력하라는 메시지가 뜨는 거죠. 결국 대부분의 사람들은... 우리는 포기하고 탭을 닫습니다.이 문제를 해결하기 위해 구글은 사용자가 콘텐츠에 접근하는 데 있어 어떠한 장벽도 없애고, 사실상 즉각적인 등록을 가능하게 하는 도구인 원탭(One Tap)을 출시했습니다.

기본적으로 화면에 부드럽게 나타나는 모달 창으로, 사용자가 다음과 같은 작업을 수행할 수 있도록 해줍니다. 한 번의 탭으로 앱을 실행하세요이메일이나 비밀번호를 입력할 필요가 없습니다. 시스템이 브라우저에 이미 열려 있는 Google 세션을 사용하기 때문입니다. 이는 사용자의 불편함을 최소화하고 간편한 로그인을 제공함으로써 전환율을 높이는 데 매우 효과적인 전략입니다. 매우 매끄러운 사용자 경험 그리고 현대.

원탭의 마법은 어떻게 작동할까요?

기존의 "Google로 로그인" 버튼과 달리, One Tap은 능동적입니다. 시스템은 보안 토큰과 사용자 정보를 기반으로 사용자 계정에 로그인하라는 메시지를 표시합니다. 안드로이드 자동 완성 또는 스마트 잠금사용자가 이러한 키 관리 기능을 구성하지 않은 경우 시스템이 실행되지 않을 수 있으며 기존 방식을 사용해야 할 수도 있습니다. 보안 측면에서 모든 것은... 비밀번호가 없는 토큰이는 데이터 교환이 네트워크를 통해 키를 전송하는 것보다 훨씬 더 안전하다는 것을 의미합니다.

OneTap을 프로젝트에 통합하는 단계

웹사이트에 이 기능을 구현하려면 논리적인 순서를 따르면 과정이 매우 간단합니다. 첫 번째 단계는 Google Search Console을 준비하는 것입니다.

1. Google Cloud 콘솔에서의 구성

왕국의 열쇠 없이는 아무것도 할 수 없습니다. 구글 클라우드에 접속해야 합니다. 새 프로젝트를 생성하다접속 후에는 설정을 구성해야 합니다. OAuth 동의 화면앱 이름과 지원 이메일을 입력하는 칸입니다. 중요한 점은 대상 사용자를 선택하는 것입니다. 내부 사용자용(회사 내) 또는 외부 사용자용(모든 사람) 중에서 선택할 수 있습니다. 외부 사용자를 선택하는 경우 Google에서 다음과 같은 질문을 할 것입니다. 애플리케이션을 확인하세요 생산에 들어가기 전에.

다음으로, 생성해야 합니다. OAuth 클라이언트 ID여기에서 어떤 도메인을 승인할지 정의합니다. 팁 하나 드리자면, 두 개의 별도 클라이언트를 만드는 것이 좋습니다. 하나는 다른 도메인용입니다. 로컬호스트에서의 테스트 그리고 실제 운영 환경에 사용할 별도의 서버를 만들어 개발 과정에서 보안 충돌을 방지합니다.

2. 프런트엔드 구현

페이지 구성 방식에 따라 두 가지 경로가 있습니다.

정적 HTML을 통해: 간단한 웹사이트나 캐싱을 적극적으로 사용하는 웹사이트에 적합합니다. 간단히 다음 코드를 삽입하기만 하면 됩니다. div 아이디로 g_id_onload클라이언트 ID와 Google이 POST 방식으로 자격 증명을 보낼 대상 URL을 전달합니다.
동적 자바스크립트를 통해: 더 많은 제어권을 원하는 분들을 위해, 다음 방법을 사용하세요. google.accounts.id.initialize 그런 다음 프롬프트를 표시합니다. google.accounts.id.prompt()예를 들어, 이렇게 하면 다음과 같은 이점을 얻을 수 있습니다. 메시지를 언제 표시할지 결정하세요 사용자가 며칠 후에 다시 방문했는지 여부에 따라 결정됩니다.

핵심은 바로 이것이다. 원탭 메시지를 가리면 안 됩니다. 웹사이트의 다른 요소(배너 또는 팝업 등)와 함께 숨겨져 있을 수 있습니다. 시스템에서 구글 iframe의 픽셀 하나라도 숨기는 것이 감지되면 불이익을 받을 수 있습니다. 프로젝트를 일시 중단하세요 UX 표준을 위반했기 때문입니다.

3. 백엔드 검증 (필수 단계)

사용자가 클릭하면 Google은 JWT(JSON 웹 토큰)를 전송합니다. 절대 맹목적으로 믿어서는 안 됩니다. 이 토큰은 서버에 도착했기 때문에 유효합니다. Google의 공식 라이브러리(예: )를 사용하여 반드시 검증해야 합니다. google-auth (파이썬 또는 PHP/Laravel의 Google 클라이언트 API).

이 과정에는 JWT를 디코딩하고 필드가 올바른지 확인하는 작업이 포함됩니다. aud (청중) 당신의 것과 정확히 일치합니다 OAuth 클라이언트 ID더 나아가 위조 공격을 방지하기 위해서는 다음과 같은 조치를 시행하는 것이 필수적입니다. CSRF 토큰 유효성 검사 브라우저 쿠키와 POST 요청에 전송된 값을 비교하여 확인합니다. 확인이 완료되면 이메일과 사용자 이름을 추출하여 계정을 생성하거나 로그인할 수 있습니다.

프롬프트의 특수한 경우 및 동작

원탭 기능이 항상 나타나는 것은 아니며, 이는 정상입니다. 이러한 현상에는 몇 가지 이유가 있습니다. 교육의 순간들예를 들어, 프롬프트는 다음과 같을 수 있습니다. 생략 사용자가 최근에 수동으로 창을 닫았다면, 지수적인 냉각 기간이 시작됩니다. 테스트 중에 이를 재설정하려면 브라우저의 사이트 설정으로 이동하면 됩니다. 권한 재설정.

컨텍스트를 사용자 지정할 수도 있습니다. 속성을 사용하는 경우 data-context="signup"텍스트가 "접근..."에서 다음으로 변경됩니다. "…에서 등록하세요"이는 사용자가 플랫폼을 처음 사용하는 경우에 훨씬 더 이해하기 쉽습니다.

Logto와 같은 도구와의 고급 통합 기능

ID 서버 전체를 수동으로 관리하고 싶지 않다면 Logto와 같은 솔루션을 사용하여 프로세스를 간소화할 수 있습니다. 이러한 도구를 사용하면 Google을 ID 공급자(IdP)로 연결하세요 시각적으로 간편하게 사용할 수 있습니다. 클라이언트 ID와 클라이언트 시크릿을 콘솔에 붙여넣고 원탭 스위치를 활성화하기만 하면 됩니다. 특히 네이티브 Android 앱에서 유용하며, 사용자 경험과 앱 경험을 결합할 수 있습니다. 크롬 맞춤 탭 원탭(One Tap) 방식으로 원활한 인증을 제공합니다.

One Tap은 설계상 다음과 같은 특징을 갖고 있다는 점에 주목할 필요가 있습니다. ID 토큰만 반환합니다.애플리케이션에서 외부 Google API(예: Google Drive 또는 캘린더)에 액세스해야 하는 경우 OneTap에서 직접 액세스 토큰을 얻을 수 없습니다. 이 경우 특정 워크플로를 시작해야 합니다. 점진적 승인 사용자가 로그인한 후 필요한 특정 권한(범위)을 요청합니다.