XE

디자인솔 레이아웃과 XE SNS 소셜 로그인_페이스북

by 디자인솔 posted May 01, 2017
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

이번엔 페이스북 로그인을 알아볼께요.

 

 

CMS XE에서 소셜 로그인(SNS) 로그인하려면 CONORY님의 소셜XE 모듈을 설치하고,

소셜 로그인과 일반 로그인을 함께 사용하려면 다이오니님의 통합 로그인 스킨을 설치하면 된다고 지난번 게시글에서(네이버 로그인) 말씀드렸어요.

 

 

다시 링크 걸어드립니다.

 

소셜XE (CONORY님, 무료 다운로드)

https://www.xetown.com/index.php?mid=xepoint&category=17119&document_srl=2930

 

 

소셜XE 스킨(기존 통합 로그인스킨, 다이오니님, 30P)

https://www.xetown.com/index.php?mid=xepoint&category=17124&document_srl=372070

 

 

XE타운 회원가입(10P), 출석게시판에 출석체크(10P), 게시글, 답글 작성 등으로 쌓이는 포인트로 XE포인트마켓에서 필요한 모듈 등을 구매하세요^^

 

 

SNS API ID와 Secret, 환경설정을 제대로 하셨으면

디자인솔 레이아웃 설정의 일반설정에서 로그인위젯을 OFF한후 로그인 하시면 되어요. 

 

 

 

페이스북 로그인

그럼 페이스북을 로그인한 후 페이스북 개발자 도구로 갑니다.

https://developers.facebook.com/?locale=ko_KR

 

 

 

 

sns14.jpg

 

기존 페이스북 계정 말고 잠자던 계정을 살릴꺼라 인증 과정이 필요하네요. 

 

 

 

 

sns15.jpg

인증과정을 거친후 앱 ID 만들기

 

 

 

 

sns16.jpg

앱 이름 입력(designsol), 연락처 이메일, 카테고리 선택후 앱ID 만들기 클릭

 

 

 

 

sns17.jpg

그럼 대시보드가 만들어졌어요 (designsol). 제품 설정에서 Facebook 로그인 시작하기

 

 

 

sns18.jpg

유효한 OAuth 리디렉션 url을 입력합니다. 쇼셜XE 모듈 / API 설정의 페이스북 API에 Redirect URL을 붙여넣기 하세요.

 

 

 

 

 

sns19.jpg

만들어진 대시보드의 이름을 클릭하면 (designsol) 앱ID와 시크릿 코드가 생성되었습니다. 플랫폼 선택

 

 

 

 

 

sns20.jpg

WWW 웹사이트를 선택합니다.

 

 

 

 

sns21.jpg

그럼 자바스크립트가 나오는데요. 당황하지 마시고 그 아래 website 주소를 적습니다.

여기서 Site URL이란 XE 기본 URL입니다. XE설정/일반의 고급에 기본 URL이 있어요.

Next를 클릭하면 완료입니다. 페이스북을 로그아웃합니다.

 

 

 

 

 

sns26.gif

소셜 XE / API 설정에서 페이스북 ID, Secret를 입력합니다.

 

 

 

 

sns24.jpg

환경설정에서 Facebook를 체크하고, 레이아웃 스킨 선택, 아래 SNS 로그인 항목을 체크합니다.

 

 

 

 

 

sns25.gif

SNS 로그인을 원하는 페이지를 선택합니다. 선택 제외된 페이지는 일반 로그인이 되어요. 일관성 있게 다 SNS 로그인을 하는것이 깔끔하겠죠.

 

 

 

 

 

sns8.gif

위에서 선택한 레이아웃(onecolumn)의 일반설정에서 로그인 위젯을 OFF한후 로그아웃합니다.

 

 

 

 

sns11.gif

이제 로그인하면 역시나 네이버 셋팅할때와 같은 관리자는 SNS 등록을 해야한다고 나와요.

 

 

 

 

sns22.jpg

다시 일반 로그인후 아이디 클릭하여 SNS 관리 탭에서 등록한후 로그아웃합니다.

 

 

 

 

 

sns23.jpg

이제 로그인하면 페이스북 앱(designsol)으로 연결되며 계정 클릭하면 로그인이 됩니다.

 

 

 

 

sns27.gif

로그 기록을 살펴봅니다. 성공이네요

 

 

 

 

 

sns28.gif

스킨을 다이오니님의 통합 로그인으로 설정합니다.

 

 

 

 

sns29.gif

페이스북, 네이버 소셜 로그인에 대해 알아보았습니다.