구글 로그인

회원이 구글 계정으로 로그인하도록 추가합니다. 테넌트별 자체 구글앱(BYO) 방식이라 동의 화면에 여러분의 앱 이름이 표시됩니다. 먼저 ① Google Cloud Console에서 OAuth 2.0 클라이언트(웹)를 만들고 승인된 리디렉션 URI에 콜백 페이지 주소(예: https://your-domain.com/user/oauth-callback)를 등록한 뒤, ② 관리 콘솔 System > Settings 의 'Google 로그인' 카드에 Client ID/Secret을 저장합니다. ③ 그다음 아래 폼을 사용합니다. 로그인 폼과 콜백 페이지 모두 동일한 데이터 식별자 SIGN_IN 으로 동작합니다.

데이타 식별자

{
  "dataID": "SIGN_IN"
}
KeyDescription
dataID데이터 식별자입니다. 구글 로그인은 일반 로그인과 동일한 SIGN_IN 흐름을 사용하며, 로그인 폼 페이지와 콜백 페이지 모두 이 식별자로 동작합니다.

HTML

<form id="frm_sign_in">
    <input type="hidden" id="return_url" name="return_url" value="/login/success.html">
    <input type="hidden" id="fail_url" name="fail_url" value="https://your-domain.com/user/sign-in">
    <input type="hidden" id="oauth_redirect_uri" name="oauth_redirect_uri" value="https://your-domain.com/user/oauth-callback">
    <button type="button" class="h-btn-sign-in-google">Continue with Google</button>
</form>

<!-- ================================================================= -->
<!-- 2) OAuth callback page  (the oauth_redirect_uri URL,               -->
<!--    e.g. https://your-domain.com/user/oauth-callback)               -->
<!--    Same dataID: SIGN_IN. user.js detects ?code&state and           -->
<!--    auto-submits AUTH_USER, then redirects to return_url.           -->
<!-- ================================================================= -->
<form id="frm_sign_in">
    <input type="hidden" id="return_url" name="return_url" value="/login/success.html">
    <input type="hidden" id="fail_url" name="fail_url" value="https://your-domain.com/user/sign-in">
    <input type="hidden" id="oauth_redirect_uri" name="oauth_redirect_uri" value="https://your-domain.com/user/oauth-callback">
</form>

<!-- Load the H:Dev+ connector + user.js on BOTH pages (adjust api host as needed). -->
<script src="https://api.hdevplus.com/_js/core/common.js"></script>
<script src="https://api.hdevplus.com/_js/core/user.js"></script>
  • form
    <form id="frm_sign_in"></form>

    로그인 폼입니다. id 는 반드시 frm_sign_in 이어야 합니다(user.js 가 이 id로 폼을 찾습니다).

  • return_url
    <input type="hidden" id="return_url" name="return_url" value="/login/success.html">

    로그인 성공 후 이동할 주소입니다.

  • fail_url
    <input type="hidden" id="fail_url" name="fail_url" value="https://your-domain.com/user/sign-in">

    로그인 실패 시 돌아갈 주소입니다(보통 로그인 페이지).

  • oauth_redirect_uri
    <input type="hidden" id="oauth_redirect_uri" name="oauth_redirect_uri" value="https://your-domain.com/user/oauth-callback">

    구글이 인증 후 되돌려보낼 콜백 페이지 주소입니다. Google Cloud의 승인된 리디렉션 URI 와 문자 하나까지 정확히 일치해야 합니다(다르면 redirect_uri_mismatch 오류).

  • button
    <button type="button" class="h-btn-sign-in-google"></button>

    구글 로그인 버튼입니다. h-btn-sign-in-google 클래스가 있으면 user.js 가 클릭 시 SIGN_IN(구글) 흐름을 시작해 구글 인증 페이지로 이동시킵니다.

  • form
    <form id="frm_sign_in"></form>

    콜백 페이지의 폼입니다. oauth_redirect_uri 에 등록한 주소에 배치하며, 버튼 없이 로그인 폼과 동일한 id="frm_sign_in" 과 hidden 필드만 두면 됩니다. 구글이 ?code·?state 를 붙여 보내면 user.js 가 자동으로 AUTH_USER 를 호출해 로그인을 완료합니다.

Response Result

  • 성공 시 구글 이메일로 회원을 찾거나, 없으면 새로 만들어 로그인 처리합니다.
  • 로그인 세션이 발급되고 <code>return_url</code> 로 이동합니다. 자격증명 미설정 테넌트는 <code>GOOGLE_NOT_CONFIGURED</code> 오류를 반환합니다.

Example

<form id="frm_sign_in" class="col-md-7 col-xs-12 my-4 mx-2 mx-sm-4 mx-md-auto" method="post">
    <input type="hidden" id="return_url" name="return_url" value="https://domain.com">
    <input type="hidden" id="fail_url" name="fail_url" value="https://domain.com/user/sign-in">
    <input type="hidden" id="oauth_redirect_uri" name="oauth_redirect_uri" value="https://domain.com/user/oauth-callback">
    <div class="form-group mt-4">
        <button class="h-btn-sign-in-google btn btn-outline-dark border-hbnc-primary bg-hanbnc-primary-3 w-100 border border-3" type="button">Continue with Google</button>
    </div>
</form>

관련 링크