구글 로그인 API 적용

구글 로그인 적용시 유의할 점이 있다.

Callback URL 이나 접속 URL에 IP주소가 들어간 유동적 주소는 cb=gapi.loaded_0 이라는 오류와 함께 처리가 되지않아서

테스트시에는 http://localhost:8080 처럼 도메인 주소로 해야하더라.

---

 

 

적용 화면

 

구글 개발자센터에 나와있는 예제소스만으로는 적용이 안돼서,

구글링하다가 여기 페이지의 소스를 기본틀로 삼아 진행했다.

참고 : https://stackoverflow.com/questions/39203623/how-to-add-google-sign-in-oauth-to-my-website?noredirect=1&lq=1

 

 

---

loginView.jsp - 상단, 미리 선언해야 하는 소스

<script src="https://apis.google.com/js/client:platform.js?onload=renderButton" async defer></script>
<meta name="google-signin-client_id" content="{Client-APP-Id}.apps.googleusercontent.com"></meta>

 

 

loginView.jsp - javaScript, 핵심 소스

//구글 로그인
$(function(){
    function onSuccess(googleUser) {
        var profile = googleUser.getBasicProfile();
        //console.log(profile);
    }
        
    $(".g-signin2").on("click", function(){
        gapi.client.load('plus', 'v1', function () {
            gapi.client.plus.people.get({
                'userId': 'me'
            }).execute(function (res) {
                console.log(JSON.stringify(res));
                
                res.id += "@g";
                      
                $.ajax({
                    url : "/user/json/checkDuplication/"+res.id,
                    headers : {
                          "Accept" : "application/json",
                          "Content-Type" : "application/json"
                      },
                      success : function(idChk){
                            if(idChk==true){ //DB에 아이디가 없을 경우 => 회원가입
                                console.log("회원가입중...");
                                $.ajax({
                                    url : "/user/json/addUser",
                                    method : "POST",
                                    headers : {
                                      "Accept" : "application/json",
                                      "Content-Type" : "application/json"
                                    },
                                    data : JSON.stringify({
                                      userId : res.id,
                                      userName : res.displayName,
                                      password : "google123",
                                    }),
                                    success : function(JSONData){
                                       alert("회원가입이 정상적으로 되었습니다.");
                                       $("form").attr("method","POST").attr("action","/user/snsLogin/"+res.id).attr("target","_parent").submit();
                                    }
                                })
                            }
                            if(idChk==false){ //DB에 아이디가 존재할 경우 => 로그인
                                console.log("로그인중...");
                                $("form").attr("method","POST").attr("action","/user/snsLogin/"+res.id).attr("target","_parent").submit();
                            }
                        }
                  })
                })
           })
    })//e.o.google.loginLogic
    
    function onFailure(error) {
        console("error : "+error);
    }
    
    function signOut() {
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
            self.location="/user/logout";
        });
    }
    
})//e.o.google

 

loginView.jsp - HTML 부분

<!-- 구글 로그인 추가 -->
<div id="googleLogin" align="center">                                                    
    <div class="g-signin2" data-onsuccess="onSuccess" data-theme="dark"></div>
</div>