본문으로 건너뛰기

소셜 로그인

소셜 로그인은 사용자가 Google, Facebook, Twitter, LinkedIn 등 기존 소셜 미디어 계정을 사용하여 로그인 및 회원가입할 수 있게 해주는 널리 사용되는 인증 (Authentication) 방법입니다.

소셜 로그인 장점:

  • 간소화된 온보딩 프로세스: 소셜 로그인을 통해 사용자는 새로운 계정을 만들거나 또 다른 비밀번호를 기억할 필요 없이 한 번의 클릭으로 회원가입 또는 로그인을 할 수 있습니다. 이는 마찰을 줄이고 사용자 참여를 높입니다.
  • 신뢰도 및 보안 향상: Google이나 Facebook과 같은 신뢰받는 플랫폼을 활용함으로써, 사용자는 애플리케이션에 더 큰 신뢰를 갖게 됩니다.
  • 사용자 데이터 확장: 소셜 로그인을 통해 이름, 이메일 주소, 프로필 사진 등 소셜 플랫폼에서 추가 프로필 정보를 수집할 수 있습니다.

소셜 로그인 구현하기

  1. 소셜 커넥터 구성:
    콘솔 > 커넥터 > 소셜 커넥터로 이동하세요. “소셜 커넥터 추가” 버튼을 클릭하고 추가하려는 소셜 커넥터(예: Google, Github)를 선택하세요. 자세한 내용은 소셜 커넥터를 참고하세요.

  2. 소셜 로그인 버튼 추가:
    기본적으로 새로 추가한 소셜 커넥터는 최종 사용자 로그인 페이지에 표시되지 않습니다. 로그인 페이지에 소셜 로그인 버튼을 추가하려면, 로그인 경험 설정에서 해당 소셜 커넥터를 활성화해야 합니다.

    콘솔 > 로그인 경험 > 회원가입 및 로그인

    으로 이동하세요. “소셜 커넥터 추가” 버튼을 클릭하여 회원가입 및 로그인 페이지에 소셜 로그인 버튼을 통합하세요. 드래그 앤 드롭으로 UI에서 순서를 조정할 수 있습니다.

  3. 계정 연동 옵션 설정:
    소셜 아이덴티티로 회원가입하는 신규 사용자의 경우, Logto는 소셜 계정을 Logto 시스템 내 기존 이메일 또는 휴대폰 번호 계정에 연동할 수 있도록 지원합니다. 기본적으로, 소셜 회원가입 시 관련 계정 연동 페이지가 사용자에게 표시되어, 기존 계정에 소셜 계정을 연동하거나 새 계정을 생성할 수 있습니다.

    이 과정을 간소화하려면, 로그인 경험 설정에서 자동 계정 연동 옵션을 활성화할 수 있습니다. 이메일 또는 휴대폰 번호가 일치할 경우 소셜 계정이 기존 계정에 자동으로 연동됩니다.

  4. 변경 사항 저장:
    변경 사항을 꼼꼼히 검토한 후 저장하여 구성을 적용하세요.

소셜 로그인 사용자 경험

소셜 로그인을 통해 Logto의 회원가입 및 로그인 과정이 사용자에게 더욱 간편해집니다.

  1. 소셜로 로그인: 사용자가 로그인 페이지에 표시된 소셜 로그인 버튼을 클릭합니다.
  2. 리디렉션: 사용자는 소셜 아이덴티티 제공자의 인증 페이지로 리디렉션됩니다.
  3. 소셜 인증: 사용자가 소셜 자격 증명을 입력하고 소셜 제공자에서 인증을 완료합니다. 이미 소셜 제공자에 로그인되어 있다면 자동으로 인증될 수 있습니다. 여러 로그인 세션이 감지되면, 사용자는 올바른 계정(예: 여러 Google 계정) 선택을 요청받을 수 있습니다.
    노트:

    Google “prompt” 파라미터는 Google 커넥터에서 설정할 수 있으며, Google 로그인 시 계정 선택 및 동의 화면의 사용자 경험을 맞춤화할 수 있습니다.

  4. Logto로 돌아오기: 인증이 성공하면, 소셜 제공자가 인증 데이터를 포함하여 사용자를 Logto 로그인 페이지로 리디렉션합니다.
  5. 소셜 아이덴티티 검증: Logto가 소셜 인증 데이터와 사용자 아이덴티티를 검증합니다. 소셜 아이덴티티와 연결된 사용자 계정이 없으면 새 계정이 생성됩니다.
  6. 사용자 인증: Logto가 사용자를 인증하고, 인증 과정을 완료하기 위해 클라이언트 애플리케이션으로 리디렉션합니다.

계정 연동

앞서 언급했듯이, Logto는 사용자가 소셜 계정을 Logto 시스템 내 기존 이메일 또는 휴대폰 번호 계정에 연동할 수 있도록 지원합니다. 이 과정은 다양한 인증 (Authentication) 방법 및 아이덴티티 제공자 간에 통합된 사용자 계정을 유지하는 데 필수적입니다.

  • 새 계정 생성: 소셜 아이덴티티로 로그인했을 때 Logto 시스템에 해당 계정이 없고, 제공된 이메일 또는 휴대폰 번호가 기존 사용자 계정과 일치하지 않으면 Logto에 새 계정이 직접 생성됩니다.

  • 기존 계정 연동: 소셜 아이덴티티가 제공한 이메일 또는 휴대폰 번호가 이미 Logto의 기존 계정과 연결되어 있다면, 유연한 계정 연동 프로세스를 제공합니다.

    • 자동 계정 연동: 로그인 경험 설정에서 “자동 계정 연동” 옵션이 활성화되어 있으면, Logto는 이메일 또는 휴대폰 번호가 일치하는 경우 소셜 계정을 기존 계정에 자동으로 연동합니다. 사용자는 계정 연동 안내를 받지 않고 즉시 기존 계정으로 로그인됩니다. 소셜 계정이 연동되어, 이후 두 가지 방법 모두로 로그인할 수 있습니다.

    • 수동 계정 연동: “자동 계정 연동” 옵션이 비활성화된 경우, 사용자는 로그인 과정에서 소셜 계정을 기존 계정에 연동할지 안내를 받습니다. 사용자는 계정 연동 또는 새 계정 생성을 선택할 수 있습니다.

      소셜 계정 연동
노트:

소셜 회원가입 과정에서 이메일 또는 휴대폰 번호가 기존 계정과 일치하는 관련 계정이 발견되었으나, 사용자가 계정 연동을 선택하지 않은 경우, 해당 이메일 또는 휴대폰 번호는 Logto의 새 계정에 동기화되지 않습니다. 이는 모든 사용자 계정에서 이메일과 휴대폰 번호의 고유성을 보장합니다.

이메일 또는 휴대폰 번호가 필수 회원가입 식별자인 경우, 사용자는 회원가입 과정에서 다른 이메일 또는 휴대폰 번호를 입력하라는 안내를 받게 됩니다. 자세한 내용은 추가 사용자 프로필 수집을 참고하세요.

추가 사용자 프로필 데이터 수집

소셜 회원가입 과정에서, 설정한 필수 회원가입 식별자(이메일 주소, 휴대폰 번호, 사용자명)에 따라, 사용자는 소셜 제공자 인증 후 회원가입 또는 로그인 완료를 위해 추가로 검증된 정보를 입력해야 할 수 있습니다.

예를 들어, 이메일 주소사용자명이 필수 회원가입 식별자로 설정된 경우:

  1. 검증된 이메일 주소를 제공하는 소셜 아이덴티티로 회원가입

    소셜 아이덴티티가 검증된 이메일 주소를 제공하면, 해당 이메일 주소가 사용자 프로필에 동기화되고, 사용자는 회원가입 완료를 위해 사용자명 입력을 요청받습니다.

  2. 검증된 이메일 주소를 제공하지 않는 소셜 아이덴티티로 회원가입

    소셜 아이덴티티가 검증된 이메일 주소를 제공하지 않는 경우, 사용자는 회원가입 과정에서 이메일 주소 입력을 요청받습니다. 사용자는 입력한 이메일 주소로 전송된 인증 코드를 입력하여 이메일을 검증해야 합니다.

  3. 이미 등록된 이메일 주소를 제공하는 소셜 아이덴티티로 회원가입

    소셜 아이덴티티가 이미 Logto 시스템에 등록된 이메일 주소를 제공하는 경우, 사용자는 소셜 계정을 기존 계정에 연동하거나 새 계정을 생성할지 안내를 받습니다. 새 계정 생성을 선택하면, 새로운 이메일 주소 입력 및 검증을 요청받습니다.

Google One-tap

Logto는 Google 커넥터에서 Google One-tap 로그인 방식도 지원하여, 사용자가 한 번의 클릭으로 로그인할 수 있습니다. 이 기능은 사용자가 Google 인증 페이지로 리디렉션될 필요 없이 로그인 과정을 더욱 간소화합니다.

Google One-tap 로그인을 활성화하려면 Google 커넥터 설정 안내를 따르세요. 활성화 후, 사용자가 로그인 페이지에 도달하면 "Google로 로그인" 팝업이 표시됩니다. 클릭 시, Google 계정으로 자동 인증되어 애플리케이션으로 리디렉션됩니다.

로그인 경험에서 Google One Tab 활성화

최초 소셜 로그인 후, 사용자는 계정 설정에서 연결된 소셜 계정을 관리할 수 있습니다. 이를 통해 기존 프로필에 추가 소셜 계정을 연동하거나 더 이상 사용하지 않는 소셜 연결을 해제할 수 있습니다.

사용자는 셀프 서비스 계정 센터를 통해 다음과 같은 기능을 이용할 수 있습니다:

  • 새 소셜 계정 연동: 동일한 사용자 프로필에 추가 소셜 제공자 연결
  • 기존 소셜 계정 해제: 다른 방법으로 접근 권한을 유지하면서 소셜 연결 해제
  • 연동된 계정 보기: 현재 연동된 모든 소셜 아이덴티티 확인

계정 관리 기능 구현에 대한 자세한 내용은 계정 설정 문서를 참고하세요.

토큰 저장 및 서드파티 API 호출

지원되는 소셜 커넥터에 대해 서드파티 토큰 저장을 선택적으로 활성화할 수 있습니다. 사용자가 인증하고 권한을 부여하면, 제공자가 발급한 액세스 토큰 (Access token) 및 리프레시 토큰 (Refresh token)이 Logto의 시크릿 볼트에 안전하게 저장됩니다. 애플리케이션은 (Account API를 통해) 나중에 이 토큰을 조회하여, 사용자를 대신해 추가 소셜 인증 없이 제공자 API(예: Google Calendar에 이벤트 추가 등)를 호출할 수 있습니다. 설정 방법은 서드파티 토큰 저장을 참고하세요.

자주 묻는 질문 (FAQs)

내 웹사이트에 소셜 로그인 버튼을 추가하고 바로 소셜로 로그인하려면 어떻게 해야 하나요?

Logto를 사용하면 웹사이트에 소셜 로그인 버튼을 추가하고, 기본 로그인 폼을 표시하지 않고 바로 소셜 로그인 프로세스를 시작할 수 있습니다. 자세한 내용은 Direct sign-in 가이드를 참고하세요.

소셜로 회원가입 후 이메일 또는 휴대폰 번호가 프로필에 표시되지 않는 이유는 무엇인가요?

Logto에서는 이메일 주소와 휴대폰 번호가 로그인 식별자로 사용되어 사용자를 고유하게 식별합니다. 검증된 이메일 주소와 휴대폰 번호만 식별자로 허용됩니다. 소셜 아이덴티티가 email_verified 또는 phone_number_verified 클레임을 제공하지 않으면, 이메일 주소나 휴대폰 번호는 사용자 프로필에 동기화되지 않습니다. 대신, 사용자 프로필의 소셜 아이덴티티 데이터에서 확인할 수 있습니다.

검증되지 않은 이메일 또는 휴대폰 번호를 사용자 프로필로 지원하는 기능은 곧 제공될 예정입니다.

소셜 로그인 경험

6가지 설정으로 Google 로그인 전환율 극대화하기