前言
独立站要出海，在注册和登录环节如果需要填写很多繁琐的资料，会损失掉很多潜在客户。因为国外人非常注重隐私，个人资料比如邮箱账号、姓名都是很敏感的信息，初次使用一个陌生网站便被要求提供隐私资料肯定是非常不愿意和抗拒的。一种很好的解决办法便是通过国外一些主流社交平台授权来完成客户注册登录过程。
前期准备
你需要准备以下工作：
一个 Facebook 开发者帐户一个已注册的 Facebook 应用，且需配置好基本设置引用Java 版 Facebook SDK在应用面板中选择您的应用，然后滚动到添加产品，在 Facebook 登录彩笺中点击设置。在左侧导航窗口中选择设置，然后在客户端 OAuth 设置下方，在有效的 OAuth 跳转网址栏中输入跳转网址，以实现成功授权。
检查用户登录状态
网页加载时，首先应检查用户是否已使用 Facebook 登录登录您的网页。调用 FB.getLoginStatus 可以触发 Facebook 调用，获取登录状态。然后 Facebook 会调用包含结果的回调函数。
FB.getLoginStatus(function(response) {statusChangeCallback(response);});
JSON 响应示例：
{status: 'connected',authResponse: {accessToken: '{access-token}',expiresIn:'{unix-timestamp}',reauthorize_required_in:'{seconds-until-token-expires}',signedRequest:'{signed-parameter}',userID:'{user-id}'}}
status 表示网页用户的登录状态。status 可以是下列之一：
如果状态为 connected，响应中会包含下列 authResponse 参数：
Java SDK 会自动检测登录状态，您无需执行任何操作即可启用此行为。
用户登录
如果用户打开网页后并没有登录网页，或是没有登录 Facebook，您可以使用登录对话框来提示他们登录两者。如果用户未登录 Facebook，系统首先会提示他们登录 Facebook，然后提示登录您的网页。调用 FB.login()，即可调用登录对话框。
FB.login(function(response){// handle the response });
当用户点击 HTML 按钮时，系统会显示带有登录对话框的弹出窗口。您可以通过此对话框请求权限，以访问用户的数据。scope 参数可随 FB.login() 函数调用一同传递。可选参数为由逗号分隔的权限列表，只有经用户确认后，您的网页才可获得用户数据访问权限。
此示例可以询问登录用户，您的网页是否有权限访问他们的公开资料和邮件。
FB.login(function(response) {// handle the response }, {scope: 'public_profile,email'});
响应（连接或取消）会向调用 FB.login() 时指定的回调返回 authResponse 对象。此响应可在 FB.login() 内检测和处理。
FB.login(function(response) {if (response.status === 'connected') {// Logged into your webpage and Facebook.} else {// The person is not logged into your webpage or we are unable to tell. }});
用户退出
在按钮或链接中附加 Java SDK 函数 FB.logout()，让用户可以退出网页。
FB.logout(function(response) {// Person is now logged out });
要考虑下列情形：
用户先登录 Facebook，然后再登录您的网页。当用户退出您的应用时，其 Facebook 帐户仍为登录状态。用户登录您的网页，并在应用登录流程中登录 Facebook。当用户退出您的应用时，同时也将退出 Facebook。用户登录了另一网页，并在该网页的登录流程中登录 Facebook，然后再登录您的网页。当该用户退出任一网页时，同时也退出 Facebook。{!-- PGC_COLUMN --} 此外，用户退出您的网页并不会撤消其在登录期间授予网页的权限。必须单独执行撤销权限操作。构建您的网页时，应让已退出的用户在重新登录时不会看到登录对话框。
完整代码示例
下面的代码将在 HTML 页面中加载和初始化 Java SDK。用您的应用ID替换 {app-id}，再用要使用的图谱 API 版本替换 {api-version}。除非有特殊原因必须使用较旧版本，否则请指定最新版本： v6.0。
<!DOCTYPE html><html><head><title>Facebook Login Java Example</title><meta charset="UTF-8"></head><body><>function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().console.log('statusChangeCallback');console.log(response); // The current login status of the person.if (response.status === 'connected') { // Logged into your webpage and Facebook.testAPI(); } else { // Not logged into your webpage or we are unable to tell.document.getElementById('status').innerHTML = 'Please log ' +'into this webpage.';}}function checkLoginState() { // Called when a person is finished with the Login Button.FB.getLoginStatus(function(response) { // See the onlogin handlerstatusChangeCallback(response);});}window.fbAsyncInit = function() {FB.init({appId : '{app-id}',cookie : true, // Enable cookies to allow the server to access the session.xfbml : true, // Parse social plugins on this webpage.version : '{api-version}' // Use this Graph API version for this call.});FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.statusChangeCallback(response); // Returns the login status.});};(function(d, s, id) { // Load the SDK asynchronouslyvar js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.(s); js.id = id;js.src = "https://connect.facebook.net/en_US/sdk.js";fjs.parentNode.insertBefore(js, fjs);}(document, '', 'facebook-jssdk'));function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.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 + '!';});}</>// The JS SDK Login Button <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button><div id="status"></div></body></html>
给你代码专栏｜往期回顾：
专栏：将Linkedin登录集成到你的独立站｜给你代码
专栏：EDM中如何实现检测发送的邮件被对方打开过？｜给你代码
专栏:使用PayPal REST API方式集成外贸独立站支付功能｜给你代码返回搜狐，查看更多
责任编辑：