XE 독학하기 그 38번째 걸음 - 구글 아이디로 로그인하기 기능구현하기 part1

안녕하세요?

지난번 시간에 카카오톡 아이디를 이용해서 XE로 제작된 홈페이지에 회원가입 없이 로그인을 하는 기능을 구현하였다면, 이번 시간에는 구글 아이디를 이용해서 회원가입 없이 홈페이지에 로그인을 하는 기능을 구현하고자 합니다.

우선 XE 홈페이지에 설치한 소셜XE에서 구글을 지원하는 것을 먼저 확인해야 합니다. 이유는 두말할 것도 없이, 여기 소셜XE에서 지원하지 않는다면, 저로서는 어떻게 해결할 수 있는 레벨을 넘어간 문제가 되기 때문입니다.

먼저 구글 검색창에서 [구글 API]라고 검색을 하여서 위 스크린샷과 같은 구글 APIs라는 홈페이지로 들어가도록 합니다. 당연 구글 계정은 필요하며, 먼저 필요에 의해서 사용자 인증 정보를 저는 먼저 만들도록 하였습니다.

일단 저는 제 G 메일 주소를 이메일 주소에 입력을 하였고, 그 다음에는 제품이름은 [구글 아이디로 로그인]이라고 간단하게 지었습니다. 

그런데 제가 좀 실수를 한 것이, API키를 만들 필요도 없이, 그냥 OAuth 클라이언트 ID라는 항목으로 들어가기만 하면 되는데, 그걸 모르고 먼저 API 키를 먼저 만들었습니다. 일단 큰 지장은 없을 것으로 생각이 되므로 그냥 OAuth 클라이언트 ID를 생성하도록 합니다.

제일 처음 들어가게 되면 애플리케이션을 어디서 사용할 것인지 물어보게 됩니다. 저는 웹 브라우저에서 사용할 프로그램이 필요하게 때문에 제일 처음에 있는 웹 애플리케이션이라는 항목을 선택하고, 생성버튼을 눌러서 다음 항목으로 진행하도록 합니다.

다시 XE 관리자 페이지로 돌아와서, 소셜 XE 모듈에서 구글 API에서 Redirect URL을 확인한 다음, 이 URL을 복사해서 아래와 같은 항목에다가 붙여넣기를 하도록 합니다.

특이하게도 구글에서는 http://홈페이지 주소/xe라고 입력이 되지 않습니다. 그래서 하는 수 없이 그냥 xe를 뺀 홈페이지 주소만 입력을 해야만 했으며, 아래에 있는 승인된 리디렉션 URI는 방금전 XE 관리자 페이지의 소셜XE에서 가져온 주소를 붙여넣기 하였습니다.

마지막으로 클라이언트 ID와 클라이언트 보안 비밀키가 생성이 되었습니다. 이 둘을 복사한 다음, 소셜XE의 API환경설정에서 구글 API항목에다가 각각 붙여넣기를 하였습니다.

마지막으로 로그인 화면창에서 구글 아이디로 로그인을 하는 창이 생성된 것을 볼 수 있었습니다. 하지만 다음 소셜 로그인을 시도하는 과정에서 문제가 발생하였습니다.

어찌된 일인지 API통신 오류가 뜨면서 계속해서 로그인이 안되는 문제점이 발생하였습니다. 이 문제점을 다음 포스팅에서는 해결해야 하는 것이 이제 과제가 되었습니다.