반응형 홈페이지 디자인솔 - 디자인솔 레이아웃과 XE SNS 소셜 로그인

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

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

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

다시 링크 걸어드립니다.

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

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

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

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

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

페이스북 로그인

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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