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

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. Ceisum官方教程3 -- 空间数据可视化

    原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/ 这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点, ...

  2. leetcode 850. Rectangle Area II

    给定一些矩形2 求覆盖面积 矩形不超过200个 1 算法1 朴素思想 虽然朴素但是代码却有意思 利用容斥原理 复杂度高达 N*2^N class Solution: def intersect(rec ...

  3. 【Streaming】Storm内部通信机制分析

    一.任务执行及通信的单元 Storm中关于任务执行及通信的三个概念:Worker(进程).Executor(线程)和Task(Spout.Bolt) 1.  一个worker进程执行的是一个Topol ...

  4. ionic4环境搭建

    1.下载安装node 下载地址:https://nodejs.org/en/ 安装后,win+R输入cmd,回车运行cmd命令窗口,输入下面的命令验证node是否安装成功: 如果出现上图所示,则证明n ...

  5. jdbc原始连接

    public class JdbcInstrt { public static void main(String[] args) { Connection conn = null; PreparedS ...

  6. fore end common url

    1.Fore end course 1)less http://www.bootcss.com/p/lesscss/2.Fore end official website 1)W3C(HTML/CSS ...

  7. 安装node/npm，通过express搭建node项目

    nodejs软件的下载地址:https://nodejs.org/en/ (推荐下载稳定版) 1.只要安装好了nodejs,就自动安装好了npm包. 2.在cmd中通过命令node -version查 ...

  8. LintCode 合并两个排序

    将两个排序链表合并为一个新的排序链表 样例 给出 1->3->8->11->15->null,2->null, 返回1->2->3->8-> ...

  9. flask的基本操作

    常用的SQLAlchemy字段类型 # coding:utf-8 from flask import Flask from flask_sqlalchemy import SQLAlchemy app ...

  10. 洛谷P2347 砝码称重 [2017年4月计划 动态规划01]

    P2347 砝码称重 题目描述 设有1g.2g.3g.5g.10g.20g的砝码各若干枚(其总重<=1000), 输入输出格式 输入格式: 输入方式:a1 a2 a3 a4 a5 a6 (表示1 ...