javascript - 自定义谷歌登录按钮并使用服务器数据库进行身份验证

标签 javascript jquery jsp redirect google-signin

我已经关注了 https://developers.google.com/identity/sign-in/web/sign-inhttps://developers.google.com/identity/sign-in/web/build-button

但是一旦登录它就会自动登录。 我想要按钮点击后在javascript函数中获取Gmail信息==>从javascript函数重定向到另一个db_validation页面以验证数据库是否存在用户==>如果成功则转到欢迎页面或返回主登录页面。

请帮助我,我无法找到合适的资源。 我正在使用 JSP、Javascript。

 <script src="https://apis.google.com/js/client:platform.js?onload=renderButton" async defer> </script>
 
function onSuccess(googleUser) {
	
    var profileinfo = googleUser.getBasicProfile();
    console.log('---------------------------------------');
    console.log('ID: ' + profileinfo.getId());  
    console.log('Name: ' + profileinfo.getName());
    console.log('Image URL: ' + profileinfo.getImageUrl());
    console.log('Email: ' + profileinfo.getEmail()); // 
    
    window.location.href = 'login.jsp?name =profile.getName()';
   
   
}
function onFailure(error) {
    alert(error);
}
function renderButton() {
	
	    gapi.signin2.render('gSignIn', {
        'scope': 'profile email',
        'width': 580,
        'height': 75,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
    });
	  
}
function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
        $('.userContent').html('');
        $('#gSignIn').slideDown('slow');
        $('#normalSignIn').slideDown('slow');
        
    });
}
 <div class = "connect" id="gSignIn"></div>

最佳答案

我得到了答案,在这里发布可能对其他人有帮助。

登录.jsp:-

 <div class = "connect" id="gSignIn"></div>

LoginBackend.jsp:-

**<%@ page langu**age="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
  <%@ page import="java.sql.*" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Login</title>

</head>

<body>

<%! String userdbName;

String userdbPsw;

String dbUserEmail;

%>

<%

Connection con= null;

PreparedStatement ps = null;

ResultSet rs = null;



String driverName = "com.mysql.jdbc.Driver";

String url = "jdbc:mysql://localhost:3306/logindb";

String user = "root";

String dbpsw = "root";



String sql = "select * from userdetail where email=? and password=?";


String entered_name,entered_email, entered_password ;




     //from form values

    entered_email = request.getParameter("email");

    entered_password = request.getParameter("password");






if(((entered_email!= (null) ||entered_email !=("")) && (entered_password !=(null) || entered_password !=(""))))

{

try{

Class.forName(driverName);

con = DriverManager.getConnection(url, user, dbpsw);

ps = con.prepareStatement(sql);


ps.setString(1, entered_email);

ps.setString(2, entered_password);


rs = ps.executeQuery();

if(rs.next())

{ 
userdbName = rs.getString("name");
dbUserEmail = rs.getString("email");

userdbPsw = rs.getString("password");



    if(entered_email.equals(dbUserEmail) && entered_password.equals(userdbPsw) )

    {
    session.setAttribute("name",userdbName);
    session.setAttribute("email",dbUserEmail);
    session.setAttribute("login_type","normal");
    response.sendRedirect("welcome.jsp"); 

    } 

}

else
    {
    response.sendRedirect("error.jsp");
    }
rs.close();

ps.close(); 

}

catch(SQLException sqe)

{

out.println(sqe);

} 

}

else

{

%>

<center><p style="color:red">Error In Login</p></center>

<% 

getServletContext().getRequestDispatcher("/home.jsp").include(request, 
response);

}

%>

</body>

欢迎.JSP:-

 !-- this google client id id for localhost -->
<meta name="google-signin-client_id" content="1015753179876-pphemvpb1o83nakb94s6na33pcjl33l8.apps.googleusercontent.com">


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Welcome</title>
<script>
    function signOut() {

      var auth2 = gapi.auth2.getAuthInstance();
      auth2.signOut().then(function () {
          console.log(gapi.auth2.getAuthInstance().isSignedIn);
          console.log('User signed out.');
          alert("Sign out..");
          auth2.disconnect();

         window.location.href = "logout.jsp"; 
      });
   }


    function onLoad() {

      gapi.load('auth2', function() {
        gapi.auth2.init();

      });
    }

    function facebook_logout() 
     {  

      FB.logout(function(response) 
        {
        /* alert("log out 1 " + response);
        */      FB.getLoginStatus(function(response) 
            {
                if (response && response.status === 'connected') 
                {
                    alert("log out " + response);
                    FB.logout(function(response) {
                        alert("log out ");
                        document.location.reload();
                     window.location.href = "logout.jsp"; 

                    });
                }
            });
            window.location.href = "logout.jsp"; 
         });
     }


  </script>




</head>

<body>
<script>
    window.fbAsyncInit = function() {
  FB.init({
    appId      : '323155731439231',
    apiKey     : '323155731439231',
    cookie     : true,  // enable cookies to allow the server to access 
    status     : true,                    // the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.9' // use graph api version 2.8
  });

  // Now that we've initialized the JavaScript SDK, we call 
  // FB.getLoginStatus().  This function gets the state of the
  // person visiting this page and can return one of three states to
  // the callback you provide.  They can be:
  //
  // 1. Logged into your app ('connected')
  // 2. Logged into Facebook, but not your app ('not_authorized')
  // 3. Not logged into Facebook and can't tell if they are logged into
  //    your app or not.
  //
  // These three cases are handled in the callback function.

  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });

  };
   // This is called with the results from from FB.getLoginStatus().
      function statusChangeCallback(response) {
        console.log('statusChangeCallback');
        console.log(response);
        // The response object is returned with a status field that lets the
        // app know the current login status of the person.
        // Full docs on the response object can be found in the documentation
        // for FB.getLoginStatus().
        if (response.status === 'connected') {
          // Logged into your app and Facebook.
          testAPI();
        } else {
          // The person is not logged into your app or we are unable to tell.
          document.getElementById('status').innerHTML = 'Please log ' +
            'into this app.';
        }
      }

      // This function is called when someone finishes with the Login
      // Button.  See the onlogin handler attached to it in the sample
      // code below.
      function checkLoginState() {
        FB.getLoginStatus(function(response) {
          statusChangeCallback(response);
        });
      }

      // Load the SDK asynchronously
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

      // Here we run a very simple test of the Graph API after login is
      // successful.  See statusChangeCallback() for when this call is made.
      function testAPI() {
        console.log('Welcome!  Fetching your information.... ');
       /*  alert("testapi"); */
        FB.api('/me?fields=id,name,email,permissions', function(response) {
          console.log('Successful login for: ' + response.name);
          console.log(response.email);


        });
      }

  </script>
<%--  <p>Welcome, <%=session.getAttribute("name")%></p> --%>
 <%
 if(session.getAttribute("login_type")=="google")
 {
     System.out.println("welcome  by google");
    out.println("Welcome,  " + session.getAttribute("name"));
 %>

    <a href="#" onclick="signOut();">Sign out by google</a>
 <% 
 }
 else if(session.getAttribute("login_type")=="normal")
 {
     out.println("Welcome,  " + session.getAttribute("name"));
%>

<a href="logout.jsp">Logout_Normal</a>
<%
 }
 else if(session.getAttribute("login_type")=="facebook")
 {
     System.out.println("welcome  by facebook");
        out.println("Welcome,  " + session.getAttribute("name"));
         %>

            <a href="#" onclick="facebook_logout();">Sign out by facebook</a>
         <% 
 }

 else 
 {
     response.sendRedirect("home.jsp");
 }
 %>

 <script src="https://apis.google.com/js/client:platform.js?onload=onLoad" async defer> </script>
<script src="js/jquery.min.js"></script>

</body>

</html>

关于javascript - 自定义谷歌登录按钮并使用服务器数据库进行身份验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44696997/

相关文章:

javascript - 延迟内联 jQuery Ready/Bind 函数

c# - 在 ServerControl (ASP.NET) 的 <Head .../> 标记内添加 <Script .../> 标记?

javascript - jQuery 跨域错误

javascript - 我是否正确使用了回调函数?

javascript - 使用日期 javascript 转换时间戳数组

javascript 从事件监听器访问父级

javascript - $(*).click 事件单击它及其所有父级。

javascript - 谷歌地图集成错误

jsp - Tomcat中有没有目录权限设置来防止jsp运行?

java - &lt;input type ="hidden"name.../> 如何与 JSP Servlet 一起使用