如何在春季项目中集成facebook登录

Question

hi我是spring框架的初学者。我正在尝试在我的春季项目中添加社交登录我已经遵循了脸书API的指导方针，但它不起作用我甚至不知道是什么问题请告诉我这个问题的解决方案下面是我的代码

提前感谢

<div class="modal-body login-modal">
<p>Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required</p>
<br/>
<div class="clearfix"></div>
<div id='social-icons-conatainer'>
<div class='modal-body-left'>
<div class="form-group">
<input type="text" id="username" placeholder="Enter your name" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input type="password" id="login-pass" placeholder="Password" value="" class="form-control login-field">
<i class="fa fa-lock login-field-icon"></i>
</div>
<a href="#" class="btn btn-success modal-login-btn">Login</a>
<!-- <a href="#" class="login-link text-center">Lost your password?</a> -->
</div>
<div class='modal-body-right'>
<div class="modal-social-icons">
<a href="" class="btn facebook btn-default" id="facebook"> <i class="fa fa-facebook modal-icons"></i> Sign In with Facebook </a>
<a href='#' class="btn twitter btn-default" id="twitter"> <i class="fa fa-twitter modal-icons"></i> Sign In with Twitter </a>
<a href='#' class="btn google btn-default " id="google"> <i class="fa fa-google-plus modal-icons"></i> Sign In with Google </a>
<a href='#' class="btn linkedin btn-default" id="linkedin"> <i class="fa fa-linkedin modal-icons"></i> Sign In with Linkedin </a>
</div>
</div>  
<div id='center-line'> OR </div>
</div>                                                                                                              
<div class="clearfix"></div>
<div class="form-group modal-register-btn">
<button class="btn btn-default"> New User Please Register</button>
</div>
</div>

$('#datepicker'(.datepicker({iconsLibrary:'font真棒'，图标：{rightIcon:"}})；

$(document).ready(function(){
//페이스북 로그인 버튼 이벤트 -> 로그인 대화 상자 호출
$('#facebook').on('click',function(){
function statusChangeCallback(response){ // Called with the results from FB.getLoginStatus().
console.log('statusChangeCallback');
console.log('response : ' + response);
if(response.status === 'connected'){ // Logged into your webpage and Facebook.
testAPI();
} else {
document.getElementById('status').innerHTML = '어서오세요';
}
}
});

// sdk load, initialize it
window.fbAsyncInit = function() {
FB.init({
appId      : '{918527135234800}',
cookie     : true,
xfbml      : true,
version    : '{v6.0}'
});
//
FB.getLoginStatus(function(response) {
if(response.status === 'connected'){
// Logged into webpage & facebook
getUserData();
}else{
//user is not authorized
}
});
};
//javascript sdk
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

function testAPI(){
console.log('testAPI worked, welcome!');
FB.api('/me', function(response){
console.log(response.name + '으로 페이스북 로그인');
document.getElementById('login-status').innerHTML = response.name +'님, 안녕하세요.'
//window.location.replace("http://" + window.location.hostname 
//+ ( (location.port==""||location.port==undefined)?"":":" + location.port) 
//+ "/users/index?facebookname="+facebookname);
});
}
}); 
</script>

Answer 1

这里有一个例子，不需要从站点复制它就可以丢失结构。https://www.baeldung.com/facebook-authentication-with-spring-security-and-social