0
私はまったく新しいですが、Google認証（Google認証自体が動作します）を持つJSF Webアプリケーション（動作します）を持っています。GoogleログインからJSFログインへの値の受け渡し
Google認証からの応答をJSFログイン（電子メールアドレス& google ID）に渡して、JdbcRealmを介して認証しようとしています。
JdbcRealmを介したJSF認証は単独で動作し、Googleログイン自体は機能します。私はちょうどgoogle（電子メールアドレス& google id）の応答を渡したいと思っています。 JSF認証&は、JSF認証フォームのクリック操作を自動化します。
私の問題は、私がグーグルにログインした後、私はエラーを取得
TypeError: document.getElementById(...) is null
ここではすべてのJavascriptと私のJSFのログインページだということ、です。
<?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>