스프링 - 구글 로그인 구현 (구글 아이디로 로그인)

Back-End/Spring 2019. 7. 26. 15:29


1. 구글 개발자 홈페이지에 들어가서 클라이언트 ID, 클라이언트 보안 비밀 코드를 메모장에 적어 놓는다. (이따 사용),

   그리고 구글 애플리케이션 원본 URI (나같은 경우는 http://localhost:8090), 

   구글 승인된 리디렉션 URI (나같은 경우는 http://localhost:8090/hansub_project/login_result)로 적음





2. sts4를 켜서 구글 로그인 버튼을 만들 페이지에 (나같은 경우는 login.jsp) 다음의 코드를 추가함

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!-- 구글 로그인 관련 API -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
  <center>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
    </center>
    <center>
    <script>
 
//구글 로그아웃
        function signOut() {
            var auth2 = gapi.auth2.getAuthInstance();
            auth2.signOut().then(function(){
          console.log('User signed out.'); 
                });
            auth2.disconnect();
          }

     //구글 로그인
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        console.log('Full Name: ' + profile.getName());
        console.log('Given Name: ' + profile.getGivenName());
        console.log('Family Name: ' + profile.getFamilyName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());
        
        var name = profile.getEmail();
        
        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
    if (name !== null){
        window.location.replace("http://" + window.location.hostname + ( (location.port==""||location.port==undefined)?"":":" + location.port) + "/hansub_project/home?name="+name);
    } else if (name == null){
        
        window.location.replace("http://" + window.location.hostname + ( (location.port==""||location.port==undefined)?"":":" + location.port) + "/hansub_project/home);
    }
    
      }
     
    </script>
cs


3. 로그인완료상태를 표시할 페이지에 다음의 코드를 추가 (나같은 경우는 home.jsp)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <%
        String name = request.getParameter("name");
        
        
        if (name == null) {
    %>
        guest님 방문을 환영합니다.
    
    <%@ include file="member/login.jsp"%>
    <%
        } else {
    %>
    <%=name%>님 방문을 환영합니다.
    
    <form action ="logout.do" method = "post">
    <button type = "submit" name = "submit" >로그아웃</button>
    </form>
    
    <%
        };
        
    %>
cs


저작자표시

'Back-End > Spring' 카테고리의 다른 글

스프링 - 페이스북 로그인 구현 (페이스북 아이디로 로그인)  (0) 2019.07.30
스프링 - 카카오톡 로그인 구현 (카카오톡 아이디로 로그인)  (0) 2019.07.29
스프링 - 네이버 로그인 구현 (네이버 아이디로 로그인)  (0) 2019.07.25
자바스크립트 연동해서 서버로부터 메시지 받아서 팝업 띄우기  (0) 2019.07.24
스프링 시큐리티  (0) 2019.07.13
:

티스토리툴바