개요
이 문서는 사용자가 소셜 계정을 통해 사이트에 회원가입/ 로그인 할 수 있도록 소셜 로그인 확장을 설정하는 방법에 대한 지침을 제공합니다.
앱 생성 및 설정
소셜 로그인이 제대로 작동하려면 사이트를 앱에 연결할 수 있도록 각 소셜 네트워크에서 앱을 만들어야합니다. 각 앱 설정에 대해 별도의 문서를 만들었습니다.
사이트에 앱 연결
각 앱을 만든 후에는 앱 ID / 키와 비밀 키를 복사하여 설정 페이지의 소셜 네트워크 탭에 붙여 넣어야합니다.
일반 설정
소셜 로그인 확장 프로그램의 일반 설정 탭에서 다음을 수행 할 수 있습니다.
- 계정 페이지에서 소셜 탭 켜기 / 끄기
- 기본 회원가입 양식에 기본적으로 소셜 로그인 버튼 표시
- 기본 로그인 양식에 기본적으로 소셜 로그인 버튼 표시
소셜 네트워크 설정 탭
각 소셜 네트워크에는 특정 네트워크를 활성화/ 비활성화 할 수있는 자체 탭이 있습니다. 소셜 로그인이 작동하려면 API 키를 추가해야하는 각 탭에 있습니다.
소셜 로그인 단축 코드
소셜 로그인 확장 프로그램을 사용하면 단축 코드를 사용하여 사이트의 어느 곳에 나 소셜 로그인 버튼을 배치 할 수 있습니다. 버튼을 추가하려는 위치에 따라 사이트에서 다른 출력을 가질 수 있도록 여러 개의 소셜 로그인 단축 코드를 만들 수 있습니다.
각 단축 코드에 대한 일반 설정을 통해 다음을 수행 할 수 있습니다.
- 소셜 로그인을 통해 회원가입 시 사용자에게 특정 역할 할당
- 로그인 한 사용자에게만 소셜 버튼 표시
- 사용자 로그인 유지
- 소셜 버튼에 대한 통합 유형을 선택합니다 : 로그인 만, 회원가입 만 또는 둘 다 (기본값).
새 소셜 로그인 단축 코드 생성
소셜 로그인 단축 코드를 생성하려면 Ultimate Member 메뉴에서 소셜 로그인을 클릭하고 새로 추가 버튼을 클릭하십시오. 새로운 소셜 로그인 페이지에서 표시할 버튼을 결정하고 사이트에서 버튼이 표시되는 방식을 변경하는 몇 가지 스타일 옵션을 적용 할 수도 있습니다. 사이트에 버튼을 출력하려면 단축 코드를 복사하여 사이트에 추가하기만 하면됩니다.
소셜 회원가입 양식
사용자가 소셜 로그인 버튼을 사용하여 사이트에 회원가입을 시도하면 앱 권한을 수락하기 위해 소셜 네트워크 사이트로 이동합니다. 그리고 수락하면 소셜 회원가입 양식(이 양식은 플러그인을 활성화하면 양식 목록에 자동으로 추가됩니다)을 보여주는 오버레이가 표시되는 사이트로 다시 리디렉션됩니다.
이 양식은 사용자가 2단계 등록 프로세스를 완료하거나 One-Step 프로세스에서 자동으로 이메일 주소를 생성할 수 있도록 필수 사용자 세부 정보를 수집하는데 필요합니다 (예 : Twitter는 사용자의 이메일 주소를 전달하지 않음). 소셜 네트워크 계정이 사이트의 사용자에게 연결되면 사용자가 사이트로 돌아오면 즉시 로그인됩니다 (해당 브라우저에서 소셜 네트워크에 로그인되어있는 한).
사이트에 사용자를 등록하기 위해 소셜 네트워크 앱의 데이터를 처리하는 방법에는 두 가지가 있습니다.
One-Step 프로세스
오버레이에 회원가입 양식 필드를 표시하지 않고 자동으로 사용자를 등록하려는 경우 이 프로세스를 선택할 수 있습니다. 이를 통해 사용자는 회원가입 한 다음 성공적인 등록시 자동으로 로그인 할 수 있습니다.
소셜 네트워크 중 하나가 사용자의 이메일 주소를 전달하지 않거나 이메일 주소가 사이트에서 이미 사용 된 경우 등록 프로세스를 계속하는데 사용할 수있는 4 가지 옵션 중에서 선택할 수 있습니다.
- Link Accounts & Login immediately (계정 연결 및 즉시 로그인)
- Link Accounts & Redirect to Login Page (계정 연결 및 로그인 페이지로 리디렉션)
- Allow new account creation with a generated Email Address (생성된 이메일 주소로 새 계정 생성 허용)
- Do not link accounts & prevent from account creation (계정 연결 금지 및 계정 생성 방지)
회원가입 프로세스 중에 오버레이에 미리로드된 콘텐츠 또는 이미지 로더를 표시하는 스플래시 화면을 표시 할 수 있는 옵션도 있습니다. Ultimate Member 양식 빌더를 사용하여 소셜 회원가입 양식의 콘텐츠를 수정할 수 있습니다.
2단계 프로세스
사용자가 회원가입 과정에서 사이트에 제출할 필드를 확인하도록 허용하려는 경우가 있습니다. 2단계 프로세스를 통해 사용자는 세부 정보를 확인하고 양식에서 편집하거나 회원가입 양식을 제출하기 전에 작성할 추가 필드를 추가할 수 있습니다.
소셜 네트워크 필드의 회원가입 양식 필드 동기화
소셜 로그인은 회원가입 프로세스에서 필드 값을 채우기 위해 소셜 네트워크에서 오는 특정 데이터를 동기화하는 양식 빌더에 필드 옵션을 추가합니다. 모든 소셜 네트워크가 동일한 데이터를 반환하는 것은 아닙니다. 예를 들어, Instagram은 이메일 주소를 전달하지 않지만, Facebook은 이메일 주소를 반환하지만 Facebook 애플리케이션에서 이메일 권한을 사용합니다.
동기화 필드 옵션 목록 및 확장 옵션이있는 동기화 필드를 참조하십시오.
계정 페이지
소셜 로그인 확장 프로그램은 “소셜 연결”이라는 사용자 계정 페이지에 새 탭을 추가합니다. 이 탭에서 사용자는 자신의 계정에서 소셜 네트워크를 연결/ 연결 해제 할 수 있습니다.
프로필 사진 가져 오기
소셜 로그인 확장 프로그램은 소셜 네트워크 프로필에서 사용자의 프로필 사진을 사이트의 프로필 사진으로 가져옵니다. 가장 최근에 연결된 소셜 네트워크는 사용되는 사진입니다 (예 : 사용자가 Twitter에 회원가입하면 Twitter 프로필 사진이 표시되지만 계정 페이지에서 Facebook에 연결하면 Facebook 프로필 사진이 사이트의 프로필 사진이됩니다. ).
원문: https://docs.ultimatemember.com/article/1531-social-login-2-3-setup
