본문 바로가기
일상생활 이야기/XE 독학

XE 독학하기 그 40번째 걸음 - 페이스북 아이디로 로그인 하기 추가하기 part2

by 인터넷떠돌이 2017. 2. 14.
반응형

안녕하세요?


이번 포스팅에서는 페이스북 계정을 가지고서 XE로 제작된 홈페이지에 로그인을 하는 기능을 구현하고자 합니다. 우선 XE관리자 페이지로 가서, 소셜XE에서 페이스북을 지원하는 지 여부를 알아보고자 합니다.



우선 소셜XE 모듈에서 사용가능한 서비스 항목에 페이스북이 있는 것은 확인하였습니다. 그래서 다음 단계로는 페이스북 개발자 페이지로 가도록 합니다.



먼저 페이스북 개발자 페이지로 가서, 페이스북 계정으로 먼저 로그인을 하도록 합니다. 그리고 다음으로 새 앱 만들기로 가서 아래와 같은 화면을 띄우도록 합니다.



여기서 표시할 이름을 임의의로 지정을 하도록 하고, 연락처에는 전화번호가 나와있지만, 이메일 주소로 바꾸도록 합니다. 마지막으로 앱ID만들기를 눌러서 다음 단계로 넘어가도록 합니다.



제품 설정항목이 나오게 되는데, 여기서 Facebook 로그인의 시작하기를 눌러서 페이스북 아이디로 로그인을 하는 기능을 구현하도록 합니다.



다음으로 XE관리자 페이지에서 소셜XE를 모듈로 가서, Redirect URL을 선택해서 복사하기를 해 둡니다. 그리고 다음으로 페이스북 개발자 페이지로 가서, 아래와 같은 화면에 복사한 URL을 붙여넣기 합니다.



클라이언트 OAuth설정항목으로 가서, 유효한 OAuth 리디렉션 URI항목에서 방금전에 복사한 URL주소를 복사한 다음, 이를 붙여넣기 해 두도록 합니다.



다음으로는 설정의 기본설정 항목으로 가서, 가장 아래에 있는 플랫폼 추가에서 [웹사이트]를 추가한 다음에, XE로 제작한 홈페이지의 주소를 입력하도록 합니다.



우선 XE 홈페이지 상에서 페이스북 아이디로 로그인을 지원하는 기능이 나타나기는 나타났습니다. 그런데 문제가 다음 단계에서 발생하였습니다.



어디가 잘못된 것인지 모르겠지만, API통신 오류가 뜨면서, 로그인이 되지 않는 문제가 발생한 것이었습니다. 이 문제는 어디서 잘못된 것인지 아직까지 원인을 모르겠습니다만, 해결책이 발견되는 대로 다음 포스팅에서 해결한 내용을 포스팅하도록 하겠습니다.

반응형