Je suis un peu nouveau dans tout cela, mais j'ai une application Web JSF (qui fonctionne) qui a aussi une authentification Google (l'authentification google fonctionne par elle-même); J'essaie de passer la réponse de l'authentification google à la connexion JSF (l'adresse e-mail & google Id) qui va ensuite s'authentifier via un JdbcRealm; Donc, pour clarifier, l'authentification JSF via un JdbcRealm fonctionne par lui-même, et la connexion google fonctionne par elle-même - je veux juste passer la réponse de google (de l'adresse e-mail & google id) pour être utilisé comme L'authentification JSF, & automatise l'action de clic du formulaire d'autorisation JSF.Passer la valeur de la connexion Google à la connexion JSF
Mon problème est que, après je me connecte à Google, je reçois l'erreur
TypeError: document.getElementById(...) is null
Voici mon JSF page de connexion avec tout le Javascript;
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="NDIS Management System"/>
<meta name="author" content="Danielle Walker"/>
<meta name="google-signin-client_id" content="270287108664-3g7l6e6ah3gr5am9onokua84t3bvdbvf.apps.googleusercontent.com" />
<title>NDIS Home</title>
<!-- Bootstrap core CSS -->
<h:outputStylesheet name="bootstrap/css/bootstrap.min.css"/>
<h:outputStylesheet name="bootstrap/css/the-big-picture.css" />
<h:outputStylesheet name="css/google-button.css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<f:verbatim>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</f:verbatim>
<!-- Google API Javascript needs to be loaded in the page before the actual Javascript -->
<script src="https://apis.google.com/js/api:client.js" />
<ui:insert name="head"/>
</h:head>
<h:body class="full">
<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<ul class="navbar-right">
<li>
<div id="gSignInWrapper" style="padding-top:5px;">
<div id="customBtn" class="customGPlusSignIn" style="float: right;">
<span class="icon"></span><span class="buttonText">Sign In</span>
</div>
</div>
<span style="color:#f9f9f9"><div id="name"></div></span>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<h:form id="login" onsubmit="document.getElementById('login').action = 'j_security_check';" prependId="false">
<!--<h:panelGrid columns="2">-->
<h:outputLabel for="j_username" value="Username" />
<h:inputText id="j_username" />
<h:outputLabel for="j_password" value="Password" />
<h:inputText id="j_password" size="8"/>
<h:commandButton id="submit" value="Login" />
<!--</h:panelGrid>-->
</h:form>
<f:verbatim>
<script>
var googleUser = {};
var startApp = function() {
gapi.load('auth2', function() {
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: '270287108664-3g7l6e6ah3gr5am9onokua84t3bvdbvf.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin'
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('customBtn'));
});
};
</script>
</f:verbatim>
<script>startApp();</script>
<f:verbatim>
<script>
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function (googleUser) {
//document.getElementById('name').text = "Signed in: " +
// googleUser.getBasicProfile().getId();
document.getElementById("login.j_username").value = googleUser.getBasicProfile().getEmail();
document.getElementById("login.j_password").value = googleUser.getBasicProfile().getId();
}, function (error) {
alert(JSON.stringify(error, undefined, 2));
//alert("Opps... an error Occured");
});
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function() {
console.log('User signed out.');
});
}
</script>
</f:verbatim>
<ui:insert name="body"/>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h:outputScript name="bootstrap/js/bootstrap.min.js"/>
<script src="https://apis.google.com/js/api:client.js" />
</h:body>
</html>