I am trying to implement the Google Oauth Feature. This is how my program runs. Firstly, the index.jsp file runs and opens a page like so:
My index.jsp code is:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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>Website</title>
</head>
<style>
h1 {
font-family: Bookman;
font-size: 150px;
font-style: normal;
font-variant: normal;
font-weight: 800;
line-height: 26.4px;
text-color: white;
text-align: center;
}
p {
font-family: Bookman;
font-size: 50px;
font-style: normal;
font-variant: normal;
font-weight: 800;
line-height: 26.4px;
text-color: white;
text-align: center;
}
.main_background{
background-image: url("img/main_page_background.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<body class=main_background>
<h1 style="color:white">Title</h1>
<p style="color:white">Subtitle</p>
<form action="google_oauth" method="post">
<input type="submit" value="Sign In With Google"/>
</form>
</body>
</html>What happens is the user clicks on a "Sign In With Google Button" that redirects to a servlet. Inside the servlet another html file is opened using the following code:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
File htmlFile = new File("C:\\Users\\neel-\\OneDrive\\Eclipse Workspace\\Website\\Website\\WebContent\\google_oauth.html");
Desktop.getDesktop().browse(htmlFile.toURI());
}
}I understand that i could just implement this into the .jsp file but further on I will be needing the redirect. What happens after the html file opens we get a window like this.
The html file that is opened is the google_ouath.html file and the code is:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var OAUTHURL = 'https://accounts.google.com/o/oauth2/auth?';
var VALIDURL = 'https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=';
var SCOPE = 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email';
var CLIENTID = '778647136201-d9trubpsuokohuj9a0c9bgufpo1qvqtf.apps.googleusercontent.com';
var REDIRECT = 'http://localhost:8080/Website/main_page'
var LOGOUT = 'http://accounts.google.com/Logout';
var TYPE = 'token';
var _url = OAUTHURL + 'scope=' + SCOPE + '&client_id=' + CLIENTID + '&redirect_uri=' + REDIRECT + '&response_type=' + TYPE;
var acToken;
var tokenType;
var expiresIn;
var user;
var loggedIn = false;
function login() {
var win = window.open(_url, "windowname1", 'width=800, height=600');
var pollTimer = window.setInterval(function() {
try {
console.log(win.document.URL);
if (win.document.URL.indexOf(REDIRECT) != -1) {
window.clearInterval(pollTimer);
var url = win.document.URL;
acToken = gup(url, 'access_token');
tokenType = gup(url, 'token_type');
expiresIn = gup(url, 'expires_in');
win.close();
validateToken(acToken);
}
} catch(e) {
}
}, 500);
}
function validateToken(token) {
$.ajax({
url: VALIDURL + token,
data: null,
success: function(responseText){
getUserInfo();
loggedIn = true;
$('#loginText').hide();
$('#logoutText').show();
},
dataType: "jsonp"
});
}
function getUserInfo() {
$.ajax({
url: 'https://www.googleapis.com/oauth2/v1/userinfo?access_token=' + acToken,
data: null,
success: function(resp) {
user = resp;
console.log(user);
$('#uName').text('Welcome ' + user.name);
$('#imgHolder').attr('src', user.picture);
},
dataType: "jsonp"
});
}
function gup(url, name) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\#&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( url );
if( results == null )
return "";
else
return results[1];
}
function startLogoutPolling() {
$('#loginText').show();
$('#logoutText').hide();
loggedIn = false;
$('#uName').text('Welcome ');
$('#imgHolder').attr('src', 'none.jpg');
}
</script>
</head>
<body>
<a href='#' onClick='login();' id="loginText"> Click here to login </a>
<a href="#" style="display:none" id="logoutText" target='myIFrame' onclick="myIFrame.location='https://www.google.com/accounts/Logout'; startLogoutPolling();return false;"> Click here to logout</a>
<iframe name='myIFrame' id="myIFrame" style='display:none'></iframe>
<div id='uName'></div>
<img src='' id='imgHolder'/>
</body>
</html>However the relevant pieces of code for this problem is:
function login() {
var win = window.open(_url, "windowname1", 'width=800, height=600');
var pollTimer = window.setInterval(function() {
try {
console.log(win.document.URL);
if (win.document.URL.indexOf(REDIRECT) != -1) {
window.clearInterval(pollTimer);
var url = win.document.URL;
acToken = gup(url, 'access_token');
tokenType = gup(url, 'token_type');
expiresIn = gup(url, 'expires_in');
win.close();
validateToken(acToken);
}
} catch(e) {
}
}, 500);
}Here, the popup opens the client logs in and the popup closes. Like so.
Above, we can see that the google login is done and the url has redirected. However going back to the login() function, the win.close() is not actually closing the popup. I was searching around on the web and I found a couple solutions that did not work. For example, here it states to use a workaround
open(location, '_self').close();
but that is not working either.
One more thing is that in Brock Adams Solution it states:
with one small exception, javascript must not be allowed to close a window that was not opened by that same javascript.
However, I do not think this is a problem.
Question: How to I get this popup to close when win.close() is not working.
UPDATE: After trying b4tch's anser. I get the following:
