一：创建和配置开发者应用

https://developers.facebook.com

登录开发者（可能要手机验证，身份证严重）-》创建应用（web ）->填写配置，网站网址和应用域名需要一致。

二：页面调用

<!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      : '{your-app-id}',

    cookie     : true,  // enable cookies to allow the server to access

                        // the session

    xfbml      : true,  // parse social plugins on this page

    version    : 'v2.8' // use graph api version 2.8

  });

  // 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 + '!';

    });

  }

</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>

修改以上代码。appId : '{your-app-id}', 填写，你的应用ID。

即可成功调用。

可以根据实际情况做适当调整。如样式，登录提示等

facebook第三方登录的更多相关文章

  1. java网站如何集成facebook第三方登录

    第一次接触Facebook第三方登录,可能有些地方做的并不全面,只是尝试着做了一个小demo,因为国内接入Facebook的项目并不多,并且多数都是Android或iOS的实现,所以资料也特别少,在此 ...

  2. android开发学习——facebook第三方登录，看了你不会后悔

    给APP用原生android进行facebook第三方登录. 我们做一件事情,首先得了解其原理,这样才不会迷茫,才知道自己做到什么程度了,心里才会有底. 所以,第一步,了解第三方登录的原理:下面贴一些 ...

  3. 用 Flask 来写个轻博客 (23) — 应用 OAuth 来实现 Facebook 第三方登录

    目录 目录 前文列表 扩展阅读 第三方登录流程 OAuth 应用 OAuth 实现 Facebook 第三方登录 实现效果 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask ...

  4. 关于Google+以及Facebook第三方登录实现的一点总结

    简述 最近项目中有关于第三方登陆的需求,第三方Facebook以及Google +登录. 正好这几天把这个需求做得差不多了,收个尾,作为一个这方面之前基本从未涉及的小白,总结下开发流程以及过程中遇到的 ...

  5. swift－sharesdk集成微信、Facebook第三方登录

    好久没有写博客了.最近忙得没有时间更新博客,很忙很忙. 今天就把自己做过的第三方集成和大家分享一下,请大家多多指教. 第一步: 一.获取AppKey(去官方平台注册) 二.下载SDK 三.快速集成 第 ...

  6. 使用ShareSDK完成Facebook第三方登录和Facebook分享时没办法跳转到Facebook应用

    楼主是通过cocoapod接入ShareSDK, 后来发现无论是使用fb分享还是登录, 都是跳出了网页认证(即使我的手机有安装了fb) 后来mob的技术客服小哥告诉我在构造分享参数的时候, 执行参数字 ...

  7. 分享前端Facebook及Twitter第三方登录

    最近公司要求做海外的第三方登录:目前只做了Facebook和Twitter;国内百度到的信息太少VPN FQ百度+Google了很久终于弄好了.但是做第三方登录基本上都有个特点就是引入必须的js,设置 ...

  8. 网站如何集成Facebook和Twitter第三方登录

    最近公司要求做海外的第三方登录:目前只做了Facebook和Twitter;国内百度到的信息太少VPN FQ百度+Google了很久终于弄好了.但是做第三方登录基本上都有个特点就是引入必须的js,设置 ...

  9. 第三方登录 (faceBook )

    1.iOS 第三方登录(Facebook,Twitter...)http://www.jianshu.com/p/f64d5ad2ef2a

随机推荐

  1. Android SDK 开发指南

    Android SDK 开发指南 视频详解 以下视频是对融云 Android SDK 开发使用的详细讲解,您可以在阅读文档时配合学习.   更多视频教程如下: CSDN 融云 Android SDK ...

  2. spring cloud深入学习(十三)-----使用Spring Cloud Sleuth和Zipkin进行分布式链路跟踪

    随着业务发展,系统拆分导致系统调用链路愈发复杂一个前端请求可能最终需要调用很多次后端服务才能完成,当整个请求变慢或不可用时,我们是无法得知该请求是由某个或某些后端服务引起的,这时就需要解决如何快读定位 ...

  3. SQLServer-Version：SQLServer版本对应内部数据库版本号配置表

    ylbtech-SQLServer-Version:SQLServer版本对应内部数据库版本号配置表 1.返回顶部 1. 1.1 查询SQLServer对应的内部数据库版本号select DATABA ...

  4. vim用户设置

    此配置目前使用户mac,linux,win,但是win系统需要提前配置mingw32相关的gcc系统路径等信息. " Setting some decent VIM settings for ...

  5. MyBatis-Spring(五)--MapperScannerConfigurer实现增删改查

    上一篇文章中已经介绍,MapperScannerConfigurer可以通过扫描的方式获取我们需要的mapper,而不需要我们自己去配置,它的基本配置如下: <bean class=" ...

  6. Java学习记录--ModelMapper的使用

    在项目中很多时候需要把Model和DTO两个模型类来回转换,保证Model对外是隐私的,同时类似密码之类的属性也能很好地避免暴露在外了. 那么ModelMapper就是为了方便转换而实现的一个类库,下 ...

  7. Dock镜像初探索

    一.安装CentOS版DockerCE 1.1 卸载旧的版本 yum remove docker \ docker-client \ docker-client-latest \ docker-com ...

  8. 使用truss、strace或ltrace诊断软件问题-转

    http://blog.itpub.net/35489/viewspace-84293 进程无法启动,软件运行速度突然变慢,程序的"Segment Fault"等等都是让每个Uni ...

  9. fidder下载及使用

    fidder 下载地址:https://www.telerik.com/download/fiddler 安装采用默认方式安装即可.

  10. git diff 笔记

    有一个 lab1 一个lab2 lab2 是比lab1 新的版本 但是Lab1 中有一些写的新代码,想要保留到lab2 中 直接使用patch 会把 lab2 回退到lab1 或lab1 更新到lab ...