Google 소셜 로그인을 설정하세요
Google 커넥터는 애플리케이션이 Google의 OAuth 2.0 인증 시스템을 사용할 수 있는 간결한 방법을 제공합니다.
팁:
이 가이드는 Logto 커넥터에 대한 기본적인 이해를 전제로 합니다. 익숙하지 않은 분들은 커넥터 가이드를 참조하여 시작하세요.
Google API Console 에서 프로젝트 설정하기
- Google API Console 에 방문하여 Google 계정으로 로그인하세요.
- 상단 메뉴 바에서 프로젝트 선택 버튼을 클릭하고, 새 프로젝트 버튼을 클릭하여 프로젝트를 생성하세요.
- 새로 생성된 프로젝트에서 APIs & Services를 클릭하여 APIs & Services 메뉴로 들어가세요.
동의 화면 구성하기
애플리케이션 구성 및 등록하기
- 왼쪽 APIs & Services 메뉴에서 OAuth 동의 화면 버튼을 클릭하세요.
- 원하는 사용자 유형을 선택하고 생성 버튼을 클릭하세요. (참고: 외부를 사용자 유형으로 선택한 경우, 나중에 테스트 사용자를 추가해야 합니다.)
이제 앱 등록 편집 페이지에 있습니다.
앱 등록 편집하기
OAuth 동의 화면 구성하기
- 지침에 따라 OAuth 동의 화면 양식을 작성하세요.
- 저장 후 계속을 클릭하여 계속 진행하세요.
스코프 구성하기
- 스코프 추가 또는 제거를 클릭하고 팝업 드로어에서
../auth/userinfo.email,../auth/userinfo.profile및openid를 선택한 후 업데이트를 클릭하여 완료하세요. 사용 가능한 모든 스코프를 추가하는 것이 좋습니다. 그렇지 않으면 구성에 추가한 일부 스코프가 작동하지 않을 수 있습니다. - 필요한 대로 양식을 작성하세요.
- 저장 후 계속을 클릭하여 계속 진행하세요.
테스트 사용자 추가하기 (외부 사용자 유형만 해당)
- 사용자 추가를 클릭하고 테스트 사용자를 추가하여 이 사용자가 애플리케이션에 접근할 수 있도록 하세요.
- 저장 후 계속을 클릭하여 계속 진행하세요.
이제 Google OAuth 2.0 동의 화면이 구성되었습니다.
OAuth 2.0 자격 증명 얻기
- 왼쪽 APIs & Services 메뉴에서 자격 증명 버튼을 클릭하세요.
- 자격 증명 페이지에서 상단 메뉴 바의 + 자격 증명 생성 버튼을 클릭하고 OAuth 클라이언트 ID를 선택하세요.
- OAuth 클라이언트 ID 생성 페이지에서 애플리케이션 유형으로 웹 애플리케이션을 선택하세요.
- 애플리케이션의 기본 정보를 입력하세요.
- + URI 추가를 클릭하여 승인된 JavaScript 출처 섹션에 승인된 도메인을 추가하세요. 이는 logto 인증 페이지가 제공될 도메인입니다. 우리의 경우, 이는
${your_logto_origin}이 됩니다. 예:https://logto.dev. - + URI 추가를 클릭하여 승인된 리디렉션 URI 섹션에 승인된 리디렉션 URI를 설정하세요. 이는 로그인 후 사용자를 애플리케이션으로 리디렉션합니다. 우리의 경우, 이는
${your_logto_endpoint}/callback/${connector_id}가 됩니다. 예:https://logto.dev/callback/${connector_id}.connector_id는 Logto Admin Console 커넥터 세부 정보 페이지의 상단 바에서 찾을 수 있습니다. - 생성을 클릭하여 완료한 후 클라이언트 ID와 클라이언트 비밀을 받게 됩니다.
커넥터 구성하기
이전 섹션에서 언급한 OAuth 앱 세부 정보 페이지에서 얻은 클라이언트 ID와 클라이언트 비밀로 clientId와 clientSecret 필드를 작성하세요.
scope는 스코프의 공백으로 구분된 목록입니다. 제공되지 않으면, 기본적으로 openid profile email로 설정됩니다.
prompts는 필요한 사용자 상호작용 유형을 지정하는 문자열 배열입니다. 문자열은 다음 값 중 하나일 수 있습니다:
none: 인증 서버는 인증 또는 사용자 동의 화면을 표시하지 않습니다. 사용자가 이미 인증되지 않았고 요청된 스코프에 대한 사전 구성된 동의가 없는 경우 오류를 반환합니다. 기존 인증 및 / 또는 동의를 확인하려면 none을 사용할 수 있습니다.consent: 인증 서버는 클라이언트에게 정보를 반환하기 전에 사용자에게 동의를 요청합니다.select_account: 인증 서버는 사용자에게 사용자 계정을 선택하도록 요청합니다. 이는 인증 서버에 여러 계정이 있는 사용자가 현재 세션이 있는 여러 계정 중에서 선택할 수 있도록 합니다.
구성 유형
| 이름 | 유형 |
|---|---|
| clientId | string |
| clientSecret | string |
| scope | string |
| prompts | string[] |
Google One Tap 활성화하기
Google One Tap은 사용자가 Google 계정으로 웹사이트나 앱에 로그인할 수 있는 안전하고 쉬운 방법입니다.
Google 커넥터를 설정하면, 커넥터 세부 정보 페이지에 Google One Tap 카드가 표시됩니다. 스위치를 전환하여 가입 및 로그인 페이지에서 Google One Tap을 활성화할 수 있습니다.
Google One Tap을 활성화하면 다음 옵션을 구성할 수 있습니다:
- 가능한 경우 자격 증명 자동 선택: 특정 조건이 충족되면 Google 계정으로 사용자를 자동으로 로그인합니다.
- 사용자가 외부를 클릭 / 탭하면 프롬프트 취소: 사용자가 프롬프트 외부를 클릭하거나 탭하면 Google One Tap 프롬프트를 닫습니다. 비활성화된 경우, 사용자는 프롬프트를 닫기 위해 닫기 버튼을 클릭해야 합니다.
- ITP 브라우저에서 업그레이드된 One Tap UX 활성화: Intelligent Tracking Prevention (ITP) 브라우저에서 업그레이드된 Google One Tap 사용자 경험을 활성화합니다. 자세한 내용은 이 페이지를 참조하세요.
노트:
웹사이트에서 Google One Tap을 활성화하려면 (Logto 로그인 경험 외), 이 기능은 개발 중입니다. 업데이트를 기대해 주세요.
참고 자료
Google Identity: OAuth 2.0 설정