[HTML] 구글 로그인 쉽게 구현하기

구글 로그인을 웹사이트에 연동하기 위해 'OAuth 2.0'을 이용하면 된다.
아래는 간단한 스텝으로 구글 로그인을 웹사이트에 연동하는 방법이다.
Google Developer Console에서 프로젝트 생성
Google Developer Console(https://console.developers.google.com/)을 방법한다.
새로운 프로젝트를 생성한다.
'OAuth 2.0 클라이언트 ID 만들기'를 선택한다.
'웹 애플리케이션'을 선택하고, 권한된 리디렉션 URI를 설정한다.
이 URI는 구글 로그인 후 사용자를 리디렉션할 웹 페이지의 주소이다.
클라이언트 ID 및 비밀번호 획득
위의 스텝을 완료하면 클라이언트 ID와 클라이언트 비밀번호를 받을 수 있다.
이 정보는 구글 로그인을 연동할 때 필요하다.
Google Sign-In 라이브러리를 웹사이트에 포함
HTML 코드에 아래의 스크립트를 추가한다.
html
<script src='https://apis.google.com/js/platform.js' async defer>script>
로그인 버튼 추가
웹 페이지에 구글 로그인 버튼을 추가하기 위해 아래 코드를 사용할 수 있다.
html
<div class='g-signin2' data-onsuccess='onSignIn'>div>
로그인 콜백 처리
사용자가 로그인하면 onSignIn 함수가 호출됩니다.
이 함수에서 사용자 정보를 가져와 웹사이트에 로그인 처리를 할 수 있다.
javascript
function onSignIn(googleUser) 
{
    var profile = googleUser.getBasicProfile();
    
    console.log('ID: ' + profile.getId());
    
    console.log('Name: ' + profile.getName());
    
    console.log('Image URL: ' + profile.getImageUrl());
    
    console.log('Email: ' + profile.getEmail());

    
    // TODO: 서버로 토큰을 전송하여 서버에서의 인증을 진행한다.
    
  var id_token = googleUser.getAuthResponse().id_token;
}
서버 측 인증 (옵션)
클라이언트 측에서 받은 id_token을 서버로 전송하여 추가적인 인증 및 사용자 세션 관리를 할 수 있다.
로그아웃 처리 (옵션)
사용자가 로그아웃하려 할 때 아래의 함수를 호출하여 구글 계정 로그아웃을 처리할 수 있다.
javascript
function signOut() 
{
    
   var auth2 = gapi.auth2.getAuthInstance();

      auth2.signOut().then(function () 
      {
      
        console.log('User signed out.');

      });

}
이제 웹사이트에 구글 로그인을 연동했다 . 사용자들이 구글 계정을 사용하여 웹사이트에 로그인 할 수 있게 되었다 .

다음글 • 2023-08-17

282 . 중국 부동산 디폴트 위기 (2023.8월) 및 한국경제에 미치는 영향

❶ 1998년 부터 중국에서 개인도 부동산을 소유할 수 있게 되었고, 이후 부동산 가격이 계속 상승하였으며, 아파트 매입하면 무조건 수익을 낼 수 있었음. ...