You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

65 lines
4.8 KiB

7 years ago
  1. <div class="col-xs-12">
  2. <div class="page-header">
  3. <h2 class="page-title"><i class="far fa-question-circle" style="display:inline"></i> 구글 로그인 등록방법</h2>
  4. </div>
  5. <div class="admin-help-wrap">
  6. <ul>
  7. <li>
  8. <p class="MT20 MB20">1. 구글 API 페이지로 이동합니다. <a href="https://console.developers.google.com/apis/library" target="_blank" class="point-color">구글 API 페이지 바로가기</a><br>
  9. 이동후 <span class="point-color">소셜 API에 Google+ API </span> 클릭합니다.
  10. </p>
  11. <img src="/assets/images/admin/help/google_login01.png" alt="">
  12. </li>
  13. <li>
  14. <p class="MT20 MB20">2. 서비스 약관 업데이트 사항에 동의하고, <span class="point-color">프로젝트 만들기</span> 버튼을 클릭합니다. </p>
  15. <img src="/assets/images/admin/help/google_login02.png" alt="">
  16. </li>
  17. <li>
  18. <p class="MT20 MB20">3. <span class="point-color"> 프로젝트</span> 생성합니다. 프로젝트 이름을 입력하고 <span class="point-color">만들기</span> 버튼을 클릭합니다. </p>
  19. <img src="/assets/images/admin/help/google_login03.png" alt="">
  20. </li>
  21. <li>
  22. <p class="MT20 MB20">4. 왼쪽 메뉴에서 <span class="point-color">사용자 인증 정보</span> 메뉴로 이동하여 사용자 인증 정보 만들기를 클릭 <br>두번째 <span class="point-color">OAuth 클라이언트 ID</span> 클릭합니다.</p>
  23. <img src="/assets/images/admin/help/google_login04.png" alt="">
  24. </li>
  25. <li>
  26. <p class="MT20 MB20">5. <span class="point-color">동의 화면 구성</span> 버튼을 클릭 사용자 인증 정보에서 사용자에게 표시되는 제품 이름, <br> 홈페이지 URL 입력후 저장합니다.</p>
  27. <img src="/assets/images/admin/help/google_login05.png" alt="">
  28. </li>
  29. <li>
  30. <p class="MT20 MB20">
  31. 6. 다시 <span class="point-color">사용자 인증 정보</span> 페이지로 돌아와 <span class="point-color">사용자 인증 정보 만들기 클릭 OAuth 클라이언트 ID</span> 선택합니다.
  32. </p>
  33. <img src="/assets/images/admin/help/google_login04.png" alt="">
  34. </li>
  35. <li>
  36. <p class="MT20 MB20">
  37. 7. 클라이언트 ID 만들기 페이지로 이동 <span class="point-color">애플리케이션 유형</span> <span class="point-color"> 애플리케이션</span> 선택하고, <br>
  38. 이름에 <span class="point-color">사이트 이름</span> 입력합니다.<br>
  39. 승인된 자바스크립트 원본에는 <span class="point-color">도메인 주소</span> 입력합니다. ex)https://www.wheeparam.com<br>
  40. 승인된 리디렉션 URI에는 <span class="point-color">휘파람 보드의 리디렉션 주소</span> 입력합니다.<br>
  41. <span class="point-color">도메인/members/social-login/google</span> -> ex)https://www.wheeparam.com/members/social-login/google<br>
  42. 정보 입력이 끝났으면 <span class="point-color">생성</span>버튼을 눌러 이동합니다.
  43. </p>
  44. <img src="/assets/images/admin/help/google_login06.png" alt="">
  45. </li>
  46. <li>
  47. <p class="MT20 MB20">7. OAuth 클라이언트 정보가 팝업에 나타납니다. <span class="point-color">클라이언트 ID</span> <span class="point-color">클라이언트 보안 비밀</span> 코드를 복사합니다.</p>
  48. <img src="/assets/images/admin/help/google_login07.png" alt="">
  49. </li>
  50. <li>
  51. <p class="MT20 MB20">
  52. 9. 구글 로그인 등록이 완료되었습니다.<br>
  53. 휘파람 관리자 페이지로 돌아와 구글 로그인 사용을 사용으로 선택합니다.<br>
  54. 복사한 <span class="point-color">[클라이언트 ID]</span>코드를 휘파람 보드 관리자 -> <span class="point-color">클라이언트 ID</span> 붙여 넣습니다.<br>
  55. 그리고 <span class="point-color">[클라이언트 보안 비밀]</span>코드를 휘파람 보드 관리자 -> <span class="point-color">클라이언트 보안 비밀</span> 붙여 넣기합니다.
  56. </p>
  57. <img src="/assets/images/admin/help/google_login08.png" alt="">
  58. </li>
  59. <li>
  60. <p class="MT20 MB20">9. 구글 로그인 설정이 완료되었습니다.</p>
  61. </li>
  62. </ul>
  63. </div>
  64. </div>