로그인

로그인 기능을 구현하기 위해 필요한 요청 데이터, HTML 폼 구조, 응답 처리 방식 등을 설명합니다.
입력 항목과 식별자 구조를 기반으로 인증 절차를 연동할 수 있습니다.

데이타 식별자

{
  "dataID": "SIGN_IN"
}
KeyDescription
dataID로그인 여부 확인

HTML

<form id="frm_sign_in">
    <input id="return_url" name="return_url" type="hidden" value="/login/success.html">
    <input type="hidden" id="fail_url" name="fail_url" value="http://domain.com/user/sign-in">
    <input name="email" type="text" value="" placeholder="Email">
    <input name="password" type="password" value="" placeholder="Password">
    <input name="remember_me" type="checkbox" id="remember_me" value="Y">
    <label for="remember_me">Remember me</label>
    <button type="submit">Sign in</button>

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

    로그인을 처리하기위한 폼으로 id frm_sign_in는 필수입니다.

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

    로그인 후 Redirect URL(미 입력시 사이트 인덱스)

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

    로그인 실패시 Redirect URL(선택)

  • email
    <input name="email" type="text" value="" placeholder="Email">

    로그인 아이디로 사용되는 이메일 주소입니다.

  • password
    <input name="password" type="password" value="" placeholder="Password">

    로그인 비밀번호입니다.

  • remember_me
    <input name="remember_me" type="checkbox" id="remember_me" value="Y">

    로그인 상태 유지 여부 : 'Y' 또는 'N'

  • button
    <button type="submit"></button>

    로그인 폼 전송 버튼

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

    구글 로그인 후 인가 코드를 돌려받을 콜백 페이지 URL. 이 주소를 Google Cloud 콘솔의 Authorized redirect URI에 동일하게 등록해야 합니다.

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

    구글 로그인 버튼. class에 h-btn-sign-in-google 를 지정하면 user.js가 클릭 시 구글 인증 페이지로 이동시킵니다. (콘솔 시스템 설정에서 구글 Client ID/Secret 등록 필요)

Response Result

  • 로그인 후 return_url로 이동합니다.
  • oauth callback 페이지의 dataID는 SIGN_IN이며 id="frm_sign_in" 인 폼과 return_url으로 구성됩니다.

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" action="/index">
	<input type="hidden" id="return_url" name="return_url" value="http://domain.com">
    <input type="hidden" id="fail_url" name="fail_url" value="http://domain.com/user/sign-in">
	<div class="my-1"><label class="sr-only">Email</label>
		<input id="email" name="email" class="form-control" data-validation="email" data-validation-type="replace" type="text" placeholder="Email" value="">
	</div>
	<div class="my-1"><label class="sr-only">Password</label><input class="form-control" type="password" id="password" name="password" placeholder="Password" value=""></div>
	<div class="form-check lh-base mt-3">
		<input class="form-check-input" type="checkbox" id="remember_me" name="remember_me" value="Y"><label class="form-check-label" for="remember_me">Keep me signed in</label>
	</div>
	<div class="form-group mt-4">
		<button class="btn btn-outline-dark border-hbnc-primary bg-hanbnc-primary-3 w-100 border border-3" type="submit">Sign in</button>
	</div>
</form>

관련 링크