1. 시작하기

2. 회원가입 폼

회원가입 폼에 서비스정책(서비스약관, 개인정보보호정책 등) 넣기

얼티밋 멤버 > 폼에서 서비스정책을 넣을 폼을 선택합니다. 폼에서 ‘+’ 버튼을 클릭하면 필드 매니저가 나타나고 여기에서 ‘서비스정책’ 필드를 클릭합니다. 이어서 필드를 편집할 수 있는 화면이 나오면, 아래 스크린샷과 같이 설정하고, 추가를 클릭하면 됩니다.

• Title: 관리자가 편집할 때 보이는 이름입니다. 임의로 입력하시면 됩니다.
• Label: 사용자에게 보이는 필드 이름입니다. 입력하지 않고 비워두면 약관내용과 동의여부만 나옵니다.
• Meta Key: 얼티밋 멤버의 개별 필드가 가진 고유값입니다. 임의의 영문나 숫자로 입력하시면 됩니다. 예) terms
• Edit Choices: 동의를 묻는 문장을 넣어주십시오. 예) 상기 서비스이용약관에 동의합니다.
• Is this field required?: 회원가입 시, 동의를 필수로 할 경우에는 체크해 주십시오. ‘제3자 마케팅 정보제공’과 같이 선택적인 서비스정책은 체크하지 않으면 됩니다.
• Can user edit this field?: 체크되어 있어야 사용자가 동의가 가능합니다.
• Textarea Height: 서비스정책을 보여주는 텍스트영역의 높이입니다. 레이아웃에 맞게 조절합니다.
• 서비스정책: 말 그대로 동의의 대상인 서비스 정책을 입력합니다. 줄바꿈도 편집이 가능합니다. 메모장 같은 텍스트 에디터로 편집 후, 넣는 게 편리합니다.

회원가입 폼에 한국 주소 넣기

얼티밋 멤버 > 폼에서 서비스정책을 넣을 폼을 선택합니다. 폼에서 ‘+’ 버튼을 클릭하면 필드 매니저가 나타나고 여기에서 ‘한국 주소’ 필드를 클릭하면, 곧바로 필드가 추가됩니다. 추가된 한국 주소 필드를 편집할 수 있으나, 기본값을 사용하시는 게 좋습니다.

소셜로그인 전용 회원가입 폼 적용하기

소셜로그인 을 통한 회원가입시 별도의 회원가입폼을 선택할수 있습니다. 네이버 의 경우 비밀번호 필드가 존재할 경우 심사 과정에서 반려 가 됩니다.

1. 얼티밋 멤버 > 폼 에서 소셜 로그인 용 회원가입 폼 신규로 생성합니다. E-mail 주소 필드는 필수 입니다.
2. 얼티밋 멤버 > 설정 > 익스텐션 > 코리아(소셜로그인) 보여줄 회원가입 폼 선택  에서 새로 생성한 회원 가입 폼을 선택합니다.
3. 소셜로그인에서 회원가입이 필요한 경우 선택한 소셜로그인 폼이 출력 됩니다.

사용자 역할별 소셜 로그인 만들기

회원 가입이 단일 페이지 인경우 소셜로그인 설정 에서 “회원가입 폼에 소셜로그인 보이기” 를 체크하시면 됩니다. 위 스크린 샷은 단비스토어의 회원가입 페이지가 입니다. 이렇게 가입자 별로 분리된 회원가입 페이지를 만들때는 소셜 로그인 숏코드를 이용하시면 됩니다. Ultimate Member > 소셜로그인  에서 각 유형별로 새로 생성합니다. 버튼을 활성화할 제공자 를 선택하고 회원가입시 등록될 열활을 지정할수 있습니다. 각 유형별로 역활을 선택합니다. 유형별 회원가입 페이지를 각각 생성후 [개인 회원가입 소셜로그인 숏코드] [개인 회원가입폼 숏코드] 아래 같이 숏코드를 배치 합니다. 이런 방식으로 각 페이지별 소셜로그인 숏코드를 활용해서 가입시 회원의 역활을 지정할수 있습니다. 단 소셜로그인을 회원가입 폼은 1개의 폼만 사용할수 있습니다. 위와 같이 얼티밋 멤버 설정 > 일반 > 회원가입 페이지  에서 지정된 페이지가 아닌 별도의 다른 페이지 에서는 소셜로그인 설정 에서 “회원가입 폼에 소셜로그인 보이기” 로 생성된 버튼의은 정상적으로 회원가입 진행이 되지 않으니 꼭 숏코드를 이용하시기 바랍니다.

3. 내 계정(Account)

내 계정에서 필드 추가하기

Account 의 내정보 탭에서 주소및 기타 필드를 추가하는 방법입니다. 아래 내용은 얼티밋 멤버 코리아 데모에서 적용된 내용입니다. 신규로 폼을 생성 하시고 폼유형은 꼭! 프로필 폼으로 선택하셔야 합니다. 내정보에서 추가하고자 하는 필드를 추가 합니다. 얼티밋 멤버 K 2.3.1 버전 이하에서는 텍스트 입력 형식의 모듈만 지원되며, 라디오, 체크박스 의 모듈은 지원되지 않습니다. 서드파티 에서 추가된 모듈은 지원되지 않을수 있습니다. 얼티밋 멤버 > 설정 > 익스텐션 > 코리아(일반) 위에 폼에서 생성한 필드를 노출하고자 하는 사용자 역활에서 생성한 폼을 선택후 저장합니다. 여기선 프로필 폼으로 생성한 폼만 선택할수 있습니다. 각 사용자 역활마다 폼을 생성하면, 해당 사용자마다 표시되는 정보를 달리 설정하실수 있습니다. 신규 생성한 “구독자 Account” 폼의 주소필드가 내정보 탭에 추가된것을 확인하실수 있습니다! 단 해당 주소 필드는 구독자 역활에서만 선택을 하였기 때문에 다른 역활의 사용자는 기본 필드만 노출됩니다.

기본 로그인을 얼티밋 멤버 로그인으로 변경하기

얼티밋 멤버 > 설정 > 코리아(일반)에서 로그인 리다이렉트 활성화를 체크한 후, 변경사항 저장을 클릭합니다. 설정을 마치면  ‘/wp-loign.php’ 접속 시, 지정된 로그인 페이지로 자동으로 이동됩니다. 주의사항! 얼티밋 멤버의 설정에서 로그인 페이지가 지정되어 있어야 합니다. 로그인 페이지가 지정되어 있지 않다면, 얼티밋 멤버 > 설정 > 일반에서 로그인 페이지를 지정해 주십시오,.

내정보 탭에서 성 필드 숨기기

얼티밋 멤버 > 설정 > 코리아(일반)에서 내정보 탭에서 성 필드 숨기기 체크 후, 변경사항 저장을 클릭합니다.

4. 소셜로그인

설정

소셜로그인을 사용하기 위해서는 설정에서 아래와 같은 설정이 필요합니다.

내 계정에서 소셜로그인 탭 : 얼티밋 멤버 계정 페이지 에서 소셜로그인 탭이 추가되며, 해당 탭에서 로그인한 사용자의 소셜로그인 탭을 연결 할수 있습니다. 기존 가입된 사용자는 해당 탭에서 소셜로그인을 연결할수 있습니다.

회원가입 폼에 소셜로그인 보이기 :
로그인 폼에 소셜커넥트 보이기 :
소셜로그인 버튼 그룹을 노출하는 방식중 하나 입니다. 해당 설정에서 사용하도록 체크박스를 체크 하거나, 원하는 위치에 소셜로그인 숏코드 를 추가해서 노출할수 있습니다.  해당 설정을 활성화 하면 기본적으로 얼티밋 로그인, 회원가입 폼에 소셜로그인 버튼 그룹이 추가됩니다.

보여줄 회원가입 폼 선택 :
Ultimate member > 문서 양식  중에 ‘등록 양식’ 으로 지정된 폼을 선택할수 있으며, 소셜로그인을 통한 회원가입시 노출되는 회원가입폼 입니다.

2단계 회원가입 사용 : 2단계 회원가입은 소셜로그인 제공사의 동의 화면 이후 위에 설정한 폼 양식을 통한 회원가입 절차를 진행하게 됩니다. 아니오를 선택할 경우 1단계 즉 동의 절차후 자동으로 회원가입이 진행되도록 합니다.

소셜로그인 스타일 : 소셜로그인 클릭시 소셜로그인 제공 업체의 동의 화면 창이 노출됩니다. 이때 해당 동의 화면을 새창으로 할지 해당 페이지로 페이지 이동 할지 여부를 선택할수 있습니다.

소셜로그인 동기화

소셜로그인 회원가입시 해당 소셜로그인 정보를 가져와 회원가입폼에 등록이 필요합니다.
소셜로그인 설정의 ‘보여줄 회원가입 폼 선택’ 에서 선택된 폼의 편집화면에서 
일부 필드 는 소셜 로그인 – 동기화 필드 에서 선택해 주셔야 합니다.

해당 설정은 동의 화면에서 정보 제공 동의한 정보를 가져와서 해당 필드에 저장합니다.
소셜 로그인 업체마다 정보 제공 데이터가 상이 하기에 이메일 주소, 이름 정도만 매핑 해 주시길 추천드립니다.
‘2단계 회원가입 사용’ 에서 1단계  사용을 하신경우 이메일 주소는 필수 적으로 동기화 해주셔야 회원가입시
해당 이메일 주소로 회원가입이 됩니다.

5. 소셜로그인 등록

Facebook

사이트에서 소셜로그인을 사용하기 위해서는 facebook 개발자 페이지 에서 소셜로그인을 위한 앱을 생성하셔야 합니다. facebook 개발자 에서 새 앱 을 추가 하시면 앱 ID  와 앱 시크릿 코드 가 생성됩니다. ※ 앱 ID  와 앱 시크릿 코드 는 외부 노출되지 않도록 하시기 바랍니다. 앱 ID  와 앱 시크릿 코드는 얼티밋 멤버 설정 > 익스텐션 > 코리아(소셜 로그인) 에서 facebook 앱 ID  와 앱 시크릿 코드 에 등록해주시기 바랍니다. 하단의 웹사이트에서도 사용하실 도메인을 등록합니다. 제품에서 Facebook 로그인 을 추가해야 소셜로그인 기능을 사용하실수 있습니다. 워드프레스 웹사이트에서 소셜로그인을 하기 위해선 웹을 선택하시면 됩니다.
유효한 OAuth 리디렉션 URI 에 소셜로그인이 필요한 페이지는 모두 등록이 되어야 합니다.

숏코드로 등록된 페이지는 예외

기본적으로 아래 3가지 주소는 등록되어야 합니다. https://로그인 페이지 주소/?provider=facebook https://회원가입 페이지 주소/?provider=facebook https://계정 페이지 주소/koreasocial/?provider=facebook 예 ) https://demo.danbistore.com/login/?provider=facebook https://demo.danbistore.com/register/?provider=facebook https://demo.danbistore.com/account/koreasocial/?provider=facebook ※ https://demo.danbistore.com/login/   같이 페이지 url 의 끝에 / 가 없는 경우는 ?앞의 / 없이 login?provider=facebook 로 등록하세요!   개발 모드에서는 역활에서 다른 계정을 테스터로 추가하시거나, 테스트 계정을 생성한 사용자만 테스트 가능하며, 이후 개발모드 해제를 위해서는 앱 검수가 진행된 이후 정상적으로 일반사용자도 로그인을 이용할수 있습니다.

Google

사이트에서 소셜로그인을 사용하기 위해서는 Google 개발자 페이지 에서 소셜로그인을 위한 프로젝트를 생성하셔야 합니다. 가장 하단 개발자 콘솔 > Google API Console 프로젝트 생성후 사용자 인증 정보 > Oauth 동의화면 에서내용을 등록하시기 바랍니다. Google Api 범위의 경우 아래와 같이 email, profile, openid 값이 필요합니다. 승인된 도메인 에서는 소셜로그인을 사용하고자 하는 도메인을 등록해 주세요.

사용자 인증정보 만들기 에서 Oauth 클라이언트 ID 를 생성합니다.

애플리케이션 유형 – 웹 애플리케이션 승인된 리디렉션 URI 에서 다음과 같이 등록해 주세요. 소셜로그인이 필요한 페이지는 모두 등록이 되어야 합니다.

숏코드로 등록된 페이지는 예외

기본적으로 아래 3가지 주소는 등록되어야 합니다.   https://로그인 페이지 주소/?provider=google https://회원가입 페이지 주소/?provider=google https://계정 페이지 주소/koreasocial/?provider=google 예 ) https://demo.danbistore.com/login/?provider=google https://demo.danbistore.com/register/?provider=google https://demo.danbistore.com/account/koreasocial/?provider=google   ※ https://demo.danbistore.com/login/   같이 페이지 url 의 끝에 / 가 없는 경우는 ?앞의 / 없이 사용할 도메인주소/login?provider=google 로 등록하세요!

Google 개발자 에서 웹 애플리케이션 을 추가 하시면 클라이언트 ID  와 클라이언트 보안 비밀 이 생성됩니다. ※ 클라이언트 ID  와 클라이언트 보안 비밀 은 외부 노출되지 않도록 하시기 바랍니다. 클라이언트 ID  와 클라이언트 보안 비밀 은 얼티밋 멤버 설정 > 익스텐션 > 코리아(소셜 로그인) 에서 Google 클라이언트 ID  와 클라이언트 보안 비밀 에 등록해주시기 바랍니다.

Kakao

사이트에서 소셜로그인을 사용하기 위해서는 Kakao 개발자 페이지 에서 소셜로그인을 위한 앱을 생성하셔야 합니다. Kakao 개발자 에서 앱 만들기 에서 앱을 생성합니다.

앱설정 > 플랫폼  에서 도메인을 등록해 주세요. 내 애플리케이션 > 제품설정 > 카카오 로그인 에서 Redirect URI 를 등록해 주세요.

로그인 Redirect URI 소셜로그인이 필요한 페이지는 모두 등록이 되어야 합니다.

기본적으로 아래 3가지 주소는 등록되어야 합니다.

• https://로그인 페이지 주소/?provider=kakao 예 ) https://demo.danbistore.com/login/?provider=kakao
• https://회원가입 페이지 주소/?provider=kakao 예) https://demo.danbistore.com/register/?provider=kakao
• https://계정 페이지 주소/koreasocial/?provider=kakao 예) https://demo.danbistore.com/account/koreasocial/?provider=kakao

https://로그인 페이지 주소?provider=kakao ※ https://demo.danbistore.com/login/   같이 페이지 url 의 끝에 / 가 없는 경우는 ?앞의 / 없이 login?provider=kakao 로 등록하세요!