Google 원탭 로그인/가입

:discourse: 요약 Discourse Google One Tap 플러그인은 Discourse에 Google One Tap 가입 및 로그인 기능을 추가합니다.
:hammer_and_wrench: 저장소 링크 https://github.com/discourse/discourse-google-one-tap
:open_book: 설치 가이드 Discourse에서 플러그인 설치 방법

기능

이 플러그인은 Discourse에 Google One Tap 로그인 및 가입 기능을 추가합니다. 이 플러그인이 설치되고 구성되면, 비로그인 사용자는 다음과 같은 프롬프트를 확인하게 됩니다:

해당 프롬프트를 통해 사용자는 현재 로그인 중인 Google 계정을 사용하여 가입하거나 로그인(사이트에 동일한 이메일 주소로 이미 계정이 있는 경우)할 수 있습니다.

구성

  1. google_one_tap_enabled 설정이 활성화되어 있는지 확인하세요.

  2. 다음 지침을 따라 클라이언트 ID를 발급받고, 로그인/가입 프롬프트 및 동의 화면의 외관을 구성하세요.

  3. 2단계에서 발급받은 클라이언트 ID를 google_oauth2_client_id 사이트 설정에 추가하세요.

변경 이력

없음.

크레딧

이 플러그인의 초기 버전을 개발해 주신 @ghassan님께 큰 감사를 드립니다.

27개의 좋아요

훌륭한 플러그인을 만들어 주셔서 감사합니다. 하지만 플러그인이 보이지 않는 div를 생성하여 그 아래 요소와 상호작용할 수 없게 만드는 버그가 있는 것 같습니다.
또한 모바일에서 페이지 왼쪽에 여분 공간이 생성됩니다.
모바일:


데스크톱:

1개의 좋아요

이것은 Discourse 서비스에 내장된 Google 로그인과 어떻게 다른가요?

1개의 좋아요

안녕하세요 :wave: 네, 이 플러그인에는 확실히 좀 더 :heart: 이 필요합니다. 어제 테스트해 보았는데 동일한 문제를 경험했습니다. 로그인/회원가입 모달의 Google iframe에도 문제가 있는 것 같습니다. 다른 소셜 버튼과 정렬 및 스타일이 일치하지 않고, 로그인 모달을 열었다가 회원가입으로 전환하면 Google 버튼이 렌더링되지 않습니다.

Don 씨, 이 부분에 대해 좀 더 자세한 정보와 가능하면 스크린샷도 함께 추가해 주시겠어요? 저는 로컬에서는 정상적으로 동작하게 만들 수 있었습니다:

하지만 시크릿 모드에서는 동일한 문제가 발생합니다:

이러한 문제가 발생하는 이유는 다양할 수 있습니다. 예를 들어, Google이 추가한 "지수형 쿨다운(exponential cool down)"이 그 중 하나입니다:

이것이 올바르게 로드되지 않았음을 감지하는 방법이 있을 수 있습니다 – 하지만 적어도 Chrome에서는 "Sign in to localhost with google.com"이라는 요소가 페이지에 존재하는 요소조차 아닙니다. 이 부분을 활용할 수 있을까요?

google.accounts.id.prompt((notification) => {
    console.log(notification)
});

이 PR이 문제를 해결해야 합니다. @Osama 몇 가지 CSS 스타일을 제거했습니다. 시간이 나실 때 확인해 주시겠어요?


3개의 좋아요

훌륭한 플러그인 감사합니다. 제가 찾던 바로 그 기능이었어요.
하지만 이 플러그인이 "Chrome third-party cookie deprecation starts Q1 2024"의 최신 변경 사항과도 호환되는지 궁금합니다. FedCM 요구 사항 및 마이그레이션에 대한 추가 정보를 확인해 보세요.

또 다른 관찰 사항.

기능이 매우 유사한데, Discourse가 이미 가지고 있는 네이티브 Google 로그인과 통합할 수 있을까요? 그래야 로그인 화면에 “Google로 로그인” 상자가 두 개 표시되지 않을 텐데 말이죠.

1개의 좋아요

@nathank 님에게 아직 답변이 없으신 것 같아, 제가 답변과 함께 질문도 하나 드리려고 합니다.

이 '원탭(One-tap)'은 사이트 방문 시 일반적으로 보이는 Google 계정 생성 프롬프트를 말하는 것 같습니다. 예를 들어 다음과 같은 형태죠:

이것과 네이티브 Google 인증 지원의 주요 차이점은, 사용자가 로그인/가입 화면을 직접 찾아 들어가는 것이 아니라 페이지에 접속하는 순간 이 기능이 트리거된다는 점이라고 생각합니다.

1개의 좋아요

조금 시일이 지난 질문에도 답해 주셔서 진심으로 감사드립니다!!

그렇게 간단하다면 (그렇게 보이는데), 왜 이 플러그인의 기능을 코어에 통합하지 않는 걸까요?

2개의 좋아요

네, 동의합니다. 아니면 코어에 옵션으로 추가하는 것도 좋습니다. 이는 가입률을 높이고 온보딩의 마찰을 줄이는 데 매우 잘 알려진 방법이며, 사용자들도 이러한 경험에 익숙합니다.

1개의 좋아요

그 해결책에는 실제로 로그인을 더 어렵게 만들었던 몇 가지 문제가 있었으며, 모바일에서는 지저분하게 보였습니다. 죄송합니다. 제가 왜 그것을 비활성화했는지 그 문제점들을 더 이상 기억할 수 없기 때문에 정말 쓸모없는 답변입니다. 심지어 여기 핀란드에서는 대다수가 Gmail을 사용하고 있는데도 말이죠.

방금 이 문제를 저도 알게 되었습니다. 다시 올립니다.

그 “평범한” Google 로그인은 쓰지 마세요. 더 어렵지도 않거든요. 어떤 상황에서는 한 탭이 활성화되지 않을 수 있으니 둘 다 유지했습니다.

맞습니다. 하지만 일부 상황에서 중복된 두 버튼 중 하나를 선택해야 하거나, 아예 버튼이 없는 상황을 원하지 않습니다. :slight_smile:

초기 페이지 로드 시 로그인/회원가입을 시도하는 모든 사용자는 의도치 않게 Google 서버에 연결됩니다.

  1. 관리자 → 사용자 지정 → 테마 → CSS/HTML으로 이동하세요.
  2. 활성 테마의 CSS 편집기를 엽니다.
  3. CSS 섹션에 다음 코드를 추가합니다:
div#google_one_tap.btn-social {
    display: none !important;
}
  1. 변경 사항을 저장합니다.
  2. 페이지를 새로고침해 버튼이 더 이상 표시되지 않는지 확인합니다.
2개의 좋아요