구글 로그인을 웹사이트에 연동하기 위해 "OAuth 2.0"을 이용하면 됩니다. 아래는 간단한 스텝으로 구글 로그인을 웹사이트에 연동하는 방법입니다:

1. Google Developer Console에서 프로젝트 생성

   • Google Developer Console(https://console.developers.google.com/)을 방문하세요.
   • 새로운 프로젝트를 생성합니다.
   • 'OAuth 2.0 클라이언트 ID 만들기'를 선택하세요.
   • '웹 애플리케이션'을 선택하고, 권한된 리디렉션 URI를 설정하세요. 이 URI는 구글 로그인 후 사용자를 리디렉션할 웹 페이지의 주소입니다.

2. 클라이언트 ID 및 비밀번호 획득

   • 위의 스텝을 완료하면 클라이언트 ID와 클라이언트 비밀번호를 받을 수 있습니다. 이 정보는 구글 로그인을 연동할 때 필요합니다.

3. Google Sign-In 라이브러리를 웹사이트에 포함

   • HTML 코드에 아래의 스크립트를 추가하세요:

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

4. 로그인 버튼 추가

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

     htmlCopy code
     <div class="g-signin2" data-onsuccess="onSignIn">div>
     

5. 로그인 콜백 처리

   • 사용자가 로그인하면 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;
     }

6. 서버 측 인증 (옵션)

   • 클라이언트 측에서 받은 id_token을 서버로 전송하여 추가적인 인증 및 사용자 세션 관리를 할 수 있습니다.

7. 로그아웃 처리 (옵션)

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

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

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