소셜로그인 설정하기 | ALLBRAND

올브랜드에서는  Facebook, Twitter, Google+ 및 LinkedIn 를 이용한 소셜로그인을 제공합니다. 소셜로그인을 사용하기 위해서는 [관리자모드 > 확장기능 > 회원관리 – 소셜로그인] 확장기능을 활성화해야 해당 기능을 이용하실 수 있습니다. (소셜로그인은 [올브랜드 프리미엄] 등급 부터 제공됩니다. 

소셜로그인 설정 안내
[관리자모드 > 회원관리 > 상세설정 > 소셜로그인] 에서 소셜로그인 관련한 설정을 할 수 있습니다. 하단 소셜 로그인 필수 설정 이후에 소셜 로그인 설정창에서 각 소셜로그인의 사용여부를 선택하실 수 있습니다.

  • 마이페이지에서 소셜탭 켜고 끄기
  • 소셜로그인 버튼을 로그인 창에 표시
  • 소셜로그인 버튼의 표시 위치 변경 
소셜로그인을 사용하기 위한 필수 설정

소셜로그인을 사용하기위해서는 반드시 각 소셜서비스의 앱설정을 마쳐야합니다. 이 과정은 각 소셜 서비스에 로그인 후, 해당 소셜 서비스의 개발자페이지를 통해 진행가능합니다. 아래 링크를통해 각 서비스 앱 설정과정을 미리보실 수 있습니다.

개인정보 유출 및 악용 피해가 일어나지 않도록 각별한 주의가 필요한 부분이기 때문에 소유자 본인의 계정으로 직접 진행하셔야 합니다.
* 피치못할 사정으로 타인에게 SNS계정의 소셜로그인의 작업의뢰 시 유출 및 악용 피해가 일어나지 않도록 각별한 주의가 필요합니다.
* 기타 관련 설정에 대한 설정관련 개별 의뢰는 [유지보수/추가작업의뢰] 에서 해당 분야의 전문가와 진행 하실 수 있습니다.

페이스북 앱설정

페이스북 앱 생성

사용자가 Facebook 계정으로 사이트에 로그인 할 수있게하려면 Facebook 앱을 만들어야합니다. 새로운 페이스북 앱은 Facebook 개발자 사이트 ( https://developers.facebook.com/)에서 생성가능 하며 페이스북 가입이 필요합니다. Create App버튼을 눌러 표시 이름, 연락처 이메일을 작성하고 앱 카테고리를 선택하면 기본적인 앱 생성이 완료됩니다.

기본 앱 설정 (중요)

앱을 만든 후, 새 앱의 대시보드로 이동합니다. 설정 > 기본 탭에서 App ID와 App Secret을 확인할 수 있습니다. 이 두 정보를  [관리자모드 > 회원관리 > 상세설정 > 소셜로그인> 페이스북]에 기입해야합니다.

제품(Products) 탭

제품(Products)탭을 선택하여 제품 추가 버튼을 클릭 후, Facebook 로그인 항목을 선택합니다. 선택 후, 제품(Products)탭의 [Facebook 로그인 > 설정] 페이지에서 아래와 같이 유효한 OAuth 리디렉션 URI를 입력하면 필수 앱설정이 종료됩니다.

예) 실제 운영하시는 웹사이트의 주소에 관련 URL 을 조합하여 기입하시면 됩니다.
운영중인 웹사이트주소/login?provider=facebook
운영중인 웹사이트주소/account/social?provider=facebook
운영중인 웹사이트주소/register?provider=facebook

 

위 단계를 마치면 소셜로그인에 필요한 준비가 완료되어 등록한 페이스북 앱(테스트)을 공개 상태로 전환하면 소셜 로그인 기능을 이용하실 수 있습니다.

Google+ 앱 설정

구글 API 사용 설정

사용자가 Google+ 계정으로 사이트에 로그인 할 수있게하려면 Google+ 프로젝트를 만들고 Google+ API를 사용하도록 설정해야합니다. API를 사용하고 새로운 Google+ 프로젝트를 만들려면 다음과 같이 진행해주세요.

소셜 API – Google+ API로 이동

소셜 API 서비스를 사용하기 위해  소셜 API – Google+ API 페이지로 이동합니다.

    Google + API 사용 설정

    비활성화 되어있는 Google + API 사용 설정을 사용할 수 있도록 활성화 합니다.

    새 프로젝트 생성

    보유하고 있는 기존 프로젝가 없다면 프로젝트를 생성합니다.

    사용자인증정보(Credentials) 추가

    사용자 인증정보 메뉴로 이동하여 OAuth 클라이언트 ID를 생성(웹애플리케이션)합니다.
    진행중 API관련 설정 화면이 나온다면 다음을 입력해주세요.

    • 사용하는 API : Google+ API
    • 웹브라우저에서 API를 호출 할 위치
        
    제품(Products) 탭

    사이트 URL 세부 정보를 팝업에 입력하고 (응용 프로그램 유형을 웹 응용 프로그램으로 설정 한 상태에서) “클라이언트 ID 만들기”버튼을 클릭하십시오.
    중요 : 또한 [승인 된 리디렉션 URI] 필드에 다음 URI를 추가해야합니다.

    예) 실제 운영하시는 웹사이트의 주소에 관련 URL 을 조합하여 기입하시면 됩니다.
    – 운영중인 웹사이트주소/login?provider=google 
    – 운영중인 웹사이트주소/account/social?provider=google     – 운영중인웹사이트주소/register?provider=google

     위 단계를 마치면  Google+ API의 클라이언트ID와 Scret Password를 확인할 수 있습니다. 이 두 정보를 [관리자모드 > 회원관리 > 상세설정 > 소셜로그인> Google+]에 기입하면, 구글 소셜로그인의 사용이 가능합니다.