01. 구글 웹마스터 센터(https://www.google.com/webmasters/verification/home?hl=ko) 사이트에 접속한다.
① 속성추가 버튼을 클릭한다.
② API를 적용할 사이트의 URL 주소를 입력한다.
02. 사이트 소유확인을 위해 '이 HTML 확인 파일'을 다운받는다.
03. 다운받을 파일을 등록한 웹사이트 주소로 연결된 웹서버에 올려둔다.
04. 위작업이 완료되었다면 다시 웹마스터 센터의 3번 링크에 접속하여. 정상적으로 접속되는지를 확인한다.
05. 접속이 정상적으로 되면 아래 순서대로 작업을 진행한다.
① 체크박스에 '로봇이 아닙니다.'항목에 체크한다.
② 위 작업이 완료되면. 확인 버튼을 클릭한다.
06. 등록한 URL의 확인 작업이 끝났다면 '확인된 사이트 목록' 보기를 클릭한다.
07. 그럼 웹마스터 센터에 등록한 URL이 나타나는 것을 확인 할 수 있다. 클릭하여 준다.
08. 클릭하면 아래와 같은 화면이 나타날텐데. '다른 방법으로 사이트를 확인하세요.'가 존재한다.
해당 영역을 클릭한다.
09. 확인방버에서 HTML 태그를 선택하면 메타태그를 확인할 수 있다.
해당 메타태그는 아래에서 사용하여야 하니 잘 복사하여 보관하여 두자.
10. Google APIs(https://console.developers.google.com/apis/library) 사이트에 접속한다.
① 프로젝트 선택을 클릭한다.
② 프로젝트 생성을 클릭하여 프로젝트를 생성해 본다.
11. 새프로젝트 생성창이 뜨면 프로젝트 이름을 설정하여 새로운 프로젝트를 생성한다.
12. 프로젝트를 생성하면 '프로젝트 선택'이 있던 부분이 위에 생성했던 프로젝트 이름으로 되어 있는것을 확인 할 수 있다.
13. 이제 Oauth 클라이언트 ID를 생성해야 한다.
① 좌측의 '사용자 인증 정보'탭을 클릭한다.
② '사용자 인증 정보' 탭을 선택한다.
③ '사용자 인증 정보 만들기' 버튼을 클릭한다.
④ 'Oauth 클라이언트 ID'를 선택한다.
15. Oauth 클라이언트 ID 만들기가 나오면 아래 순서대로 작업을 진행한다.
① '웹 애플리케이션'을 선택한다.
② 이름을 지정한다.
③ 승인된 자바스크립트 원본 텍스트 입력 필드 부분에 사용할 사이트 URL을 입력한다.
④ 승인된 리디렉션 URI 텍스트 입력 필드 부분에 입력 데이터를 전송받을 URL 경로를 입력한다.
(여기서는 17번에서 제작할 html 파일의 위치를 지정하였다.)
⑤ 위 작업이 완료되면 생성 버튼을 클릭한다.
16. 위 작업이 완료되면 Oauth 클라이언트 ID와 보안 비밀번호가 생성된것을 확인할 수 있다.
둘다 잘 기억하여 두자.
17. 이제 아래 소스의 내요을 html 파일로 제작하여. 등록한 사이트 URL에 접속할 수 있는 경로에 저장한다.
① 09번에서 확보한 메타태그의 값을 그대로 복사하여집어넣는다.
② 16번에서 확보한 Oauth 클라이언트 ID를 입력한다.
google_login.php |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="google-signin-scope" content="profile email"> <meta name="google-site-verification" content="① 사이트 소유확인 메타태그"/> <meta name="google-signin-client_id" content="② Oauth 클라이언트 ID"> <title>Google+ Login test</title> <script src="https://apis.google.com/js/platform.js" async defer></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> function onSignIn(googleUser) { var profile = googleUser.getBasicProfile(); jQuery("#id").html(profile.getId()); jQuery("#name").html(profile.getName()); jQuery("#email").html(profile.getEmail()); jQuery("#image_url").attr('src', profile.getImageUrl()); } </script> </head> <body> <div class="g-signin2" data-onsuccess="onSignIn"></div> <br/> id : <span id="id"></span><br/> name : <span id="name"></span><br/> email : <span id="email"></span><br/> image_url<br/> <img id="image_url" src="#"/> </body> </html> |
※ 위 내용은 https://developers.google.com/identity/sign-in/web/ 의 내용을 일부 수정한 것이다.
18. 이제 google_login.php로 접속하여 본다. 접속이 정상적으로 되었다면 아래 화면과 같은 내용이 출력될 것이다.
그럼 'Sing in'버튼을 클릭힌다.
19. 아래와 같은 팝업창이 뜨면 사용자 ID를 입력하거나 아래와 같이 버튼을 눌러 구글에 접속한다.
20. 다시 google_login.php로 들어와서 id, name, email, image_url이 정상적으로 출력되면 정상적으로 접속된 것이다.
