成功登录后删除Facebook登录按钮
Remove Facebook Log-in Button after a successful log in
我试图使用Facebook创建一个登录/注销机制。到目前为止,我已经设法编辑了默认的Javascript SDK(具有基本的JS知识),以便仅在用户登录时显示注销链接。但是,无论用户是否登录,登录按钮都会持续存在。下面是代码:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// 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 if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// 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);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '1467517133547158',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.2' // use version 2.2
});
// 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);
});
};
// 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.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
document.getElementById('logout-button').innerHTML =
'<span id="fbLogout" onclick="fbLogout()"><a href="#"><span class="fb_button_text">Logout</span></a></span>';
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
<div id="logout-button"></div>
<script>
function fbLogout() {
FB.logout(function (response) {
//Do what ever you want here when logged out like reloading the page
window.location.reload();
});
}
</script>
</body>
</html>
我找到了另一个解决方案。我将autologoutlink="true"添加到登录按钮(也删除了login的div):
<fb:login-button autologoutlink="true" scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
好了,伙计们,使用上面的答案,我创建了一个解决方案:
我在testAPI()函数中添加了以下行:
document.getElementById('login-button').style.display = 'none';
我还将登录按钮嵌入到div:
<div id="login-button">
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
</div>
相关文章:
- Facebook登录按钮没有'不能在Firefox上工作
- Facebook登录按钮悬停框
- 等待,直到使用Java在selenium网络驱动程序中手动单击登录按钮
- 谷歌登录按钮
- 注销后删除 Facebook 登录按钮 SDK
- 如何通过谷歌身份工具包修改登录按钮?(节点.js)
- 谷歌登录按钮的宽度和高度问题
- 如何让登录按钮在用户登录时更改为图标
- 如何获取facebook登录按钮的范围信息
- Facebook登录按钮onligin=“;函数“;给出ReferenceError
- 自定义 meteor 中的登录按钮
- 如何在用户登录后从布局页面中删除登录按钮
- Facebook Javascript sdk,需要按两次登录按钮
- 如何在没有登录按钮的情况下初始化谷歌登录
- 尝试获取 if 语句以在人员未登录时显示登录按钮,在登录时显示注销按钮
- 脸书登录按钮回调函数
- 谷歌加登录按钮已呈现,但不起作用
- 如何在 React 组件中使用 Facebook 开发者站点的 Facebook 登录按钮
- 点击安卓中的登录按钮
- 谷歌和他的API或登录按钮有一个难题