[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 코드에 아래의 스크립트를 추가하세요.

<script src='https://apis.google.com/js/platform.js' async defer>script>

 로그인 버튼 추가

웹 페이지에 구글 로그인 버튼을 추가하기 위해 아래 코드를 사용할 수 있습니다.

<div class='g-signin2' data-onsuccess='onSignIn'>div>

 로그인 콜백 처리

사용자가 로그인하면 onSignIn 함수가 호출됩니다. 이 함수에서 사용자 정보를 가져와 웹사이트에 로그인 처리를 할 수 있습니다:

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을 서버로 전송하여 추가적인 인증 및 사용자 세션 관리를 할 수 있습니다.

 로그아웃 처리 (옵션)

사용자가 로그아웃하려 할 때 아래의 함수를 호출하여 구글 계정 로그아웃을 처리할 수 있다.

function signOut()
{
   var auth2 = gapi.auth2.getAuthInstance();
      auth2.signOut().then(function ()
      {
        console.log('User signed out.');
      });
}

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

구글 로그인을 웹사이트에 연동하기 위해 '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 코드에 아래의 스크립트를 추가한다.
htmlCopy code
<script src='https://apis.google.com/js/platform.js' async defer>script>
로그인 버튼 추가
웹 페이지에 구글 로그인 버튼을 추가하기 위해 아래 코드를 사용할 수 있다. 
htmlCopy code
<div class='g-signin2' data-onsuccess='onSignIn'>div>
로그인 콜백 처리
사용자가 로그인하면 onSignIn 함수가 호출됩니다. 이 함수에서 사용자 정보를 가져와 웹사이트에 로그인 처리를 할 수 있다. 
javascriptCopy code
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을 서버로 전송하여 추가적인 인증 및 사용자 세션 관리를 할 수 있다. 
로그아웃 처리 (옵션)
사용자가 로그아웃하려 할 때 아래의 함수를 호출하여 구글 계정 로그아웃을 처리할 수 있다. 
javascriptCopy code
function signOut() 
{
    
   var auth2 = gapi.auth2.getAuthInstance();

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

      });

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