Facebook登录
1.输入跳转网址
在应用面板中选择您的应用，然后前往产品 > Facebook 登录 > 设置。在 OAuth 客户端授权设置下的有效 OAuth 跳转网址字段中输入您的跳转网址以获得成功授权。
2.检查登录状态
加载网页时应采取的第一步是检查用户是否已使用 Facebook 登录功能登录您的应用。调用 FB.getLoginStatus 即可开始此流程。此函数会触发 Facebook 调用，获取登录状态，并调用包含结果的回调函数。
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
提供给回调的 response 对象包括许多字段：
{
status: 'connected',
authResponse: {
accessToken: '...',
expiresIn:'...',
reauthorize_required_in:'...'
signedRequest:'...',
userID:'...'
}
}
status 表示应用用户的登录状态。status 可以是下列之一：
connected— 用户登录了 Facebook 和您的应用。not_authorized— 用户登录了 Facebook，但未登录您的应用。unknown— 用户未登录 Facebook，所以无法知道他们是否登录了您的应用。或者已经调用 FB.logout()，因此无法连接至 Facebook
如果状态为 connected，则响应对象将包括 authResponse，分为以下部分：
accessToken — 包括应用用户的访问口令。
expiresIn — 表示口令到期且需要更新的 UNIX 时间。
reauthorize_required_in - 登录过期和请求重新授权之前的时长（以秒为单位）。
signedRequest — 经签名的参数，其中包括应用用户的信息。
userID — 应用用户的编号。
知道用户的登录状态后，应用就可以执行以下操作之一：
如果用户登录了 Facebook 和您的应用，可将他们重定向至应用的登录后体验。
如果用户未登录您的应用，或未登录 Facebook，则可以通过
FB.login()呈现登录对话框，以此提示他们登录，或显示“登录”按钮。
下面是提示用户登录的两种方式：
使用“登录”按钮。
-
使用 JavaScript SDK 中的
FB.login()。
image.png
A. 让用户通过“登录”按钮登录
您可以轻松地在自己的页面中添加登录按钮。有关自定义“登录”按钮的信息，请参阅“登录”按钮。要获取基础按钮的代码，在以下配置器中输入所需的值，并点击获取代码。
插件配置器
注意，在本主题末尾的示例中，我们使用按钮的 onlogin 属性设置了一个 JavaScript 回调，用于检查登录状态，了解用户是否成功登录：
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
回调如下所示。它会调用 FB.getLoginStatus()，获取最新的登录状态。（statusChangeCallback() 是本示例所包含的函数，用于处理响应。）
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
B. 让用户通过从 JavaScript SDK 调用的登录对话框登录
对于想要使用专属按钮的应用，您只需调用 FB.login()，即可调用登录对话框：
FB.login(function(response){
// Handle the response object, like in statusChangeCallback() in our demo
// code.
});
正如参考文档所述，此函数会生成一个展示登录对话框的弹窗，所以应只在用户点击 HTML 按钮后调用此函数（这样可以防止弹窗被浏览器阻止）。
还可以选择随此函数调用传递的可选 scope 参数，此参数是要向应用用户请求的一系列以逗号分隔的权限。以下是调用包含 scope （与“登录”按钮中使用的相同）的 FB.login()的方法。在本示例中，请求的是用户的邮箱和也在使用应用的好友列表：
FB.login(function(response) {
// handle the response
}, {scope: 'public_profile,email'});
处理登录对话框响应
在登录流程的这一阶段，您的应用会展示“登录”对话框，用户可以选择是取消登录还是允许应用访问他们的数据。
无论用户的选择是什么，浏览器都会返回给应用，表明用户是连接还是取消状态的响应数据会发送到应用。当为应用使用 JavaScript SDK 时，会向调用 FB.login() 时指定的回调返回 authResponse 对象：
此响应可在 FB.login 调用内检测和处理，如下所示：
FB.login(function(response) {
if (response.status === 'connected') {
// Logged into your app and Facebook.
} else {
// The person is not logged into this app or we are unable to tell.
}
});
4.让用户退出
您可以向按钮或链接添加 JavaScript SDK 函数 FB.logout，让用户可以退出应用，如下所示：
FB.logout(function(response) {
// Person is now logged out
});
完整代码示例
下面的代码会在 HTML 页面中加载和初始化 JavaScript SDK。在指示的地方添加您的应用编号。对于 API 版本，请指定要使用的图谱 API 版本。若无要使用较旧版本的特殊原因，请指定最新版本：v3.3.
<!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 {
// The person is not logged into your app or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}
}
// 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 : '{your-app-id}',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : '{api-version}' // The Graph API version to use for the call
});
// 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 = "https://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 + '!';
});
}
</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>
</body>
</html>
自己
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="status"></div>
<button class="btn">登录</button>
<script>
// Load Facebook sdk 加载 Facebook 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 statusChangeCallback(response) {
console.log(response);
if (response.status === 'connected') { // connected 用户登录了 Facebook 和您的应用
testAPI(); //如果登录获取用户信息
} else {
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}
}
window.fbAsyncInit = function() {
FB.init({
appId : '2111462379158647',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.3'
});
// 页面初始化 判断是否登录
// getLoginStatus 检查登录状态 加载网页时应采取的第一步是检查用户是否已使用 Facebook 登录功能登录您的应用
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
function testAPI() {
FB.api('/me', function(response) {
console.log(response)
});
}
//点击登录
document.querySelector('.btn').addEventListener('click',function() {
FB.login(function(response) { // 弹出让用户登录
if (response.status === 'connected') { //如果登录了
FB.api('/me', function(response) { // 获取用户信息
console.log(response)
FB.getLoginStatus(function(response) { // 这里可以看到状态
console.log('status')
console.log(response)
console.log('status')
});
});
}
})
})
</script>
</body>
</html>
