Facebook登录-前端网页以及在angular中的使用方法
来源:互联网 发布:python编辑脚本 编辑:程序博客网 时间:2024/06/05 15:49
leung_blog | ngFacebook | facebook JavaScript SDK | 官网登录流程
总体思想
先通过FB.getLoginStatus()
判断用户facebook的登录状态和授权情况,如果已经登录授权,则显示退出按钮,调用facebook退出方法FB.logout()
,如果没有登录授权,则显示登录按钮(可以自定义,也可以使用facebook官方按钮,文中有链接),自定义的按钮,直接调用FB.login()
方法,facebook官方按钮可在官网制作好后,直接添加代码,启动时会出发onlogin事件
,可在事件中获得用户信息,状态。
准备工作
在Facebook开发者平台注册自己的application;然后得到appid和应用密钥;如图:
接下来就异步引用Facebook的sdk.js并调用初始化方法;
<script> window.fbAsyncInit = function() { // 初始化sdk FB.init({ appId : '1441590959284852', cookie : true, xfbml : true, version : 'v2.11' }); // 类似统计访问量 (https://www.facebook.com/analytics) FB.AppEvents.logPageView(); }; (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'));</script>
3.
加载网页时应采取的第一步是检查用户是否已使用 Facebook 登录功能登录您的应用。调用 FB.getLoginStatus 即可开始此流程。此函数会触发 Facebook 调用,获取登录状态,并调用包含结果的回调函数。
下面是取自上述示例代码的部分代码,在页面加载期间运行以检查用户登录状态:
FB.getLoginStatus(function(response) { statusChangeCallback(response);});
提供给回调的 response 对象包括许多字段:
{ status: 'connected', authResponse: { accessToken: '...', expiresIn:'...', signedRequest:'...', userID:'...' }}
方法函数
var fbToken;function checkLoginState(){ FB.getLoginStatus(function(response) { statusChangeCallback(response); });}function statusChangeCallback(response) { if (response.status === 'connected') { //登陆状态已连接 fbToken = response.authResponse.accessToken; getUserInfo(); } else if (response.status === 'not_authorized') { //未经授权 console.log('facebook未经授权'); } else { console.log('不是登陆到Facebook;不知道是否授权'); }}//获取用户信息function getUserInfo() { FB.api('/me', function(response) { //response.id / response.name / response.email console.log('Successful login for: ' + response.name); //把用户token信息交给后台 self.location= '/home/login.fbLogin.do?accessToken='+fbToken; });}
第一种登录方法
直接调用弹出登录框
FB.login(function(response) { statusChangeCallback(response); //登录回调函数 },{scope: 'user_friends,public_profile, email'}); //需要获取的信息scope,其他信息需要申请权限 }
第二种登录方法
使用使用facebook登录按钮(可在官网自定义,查看属性意思)
<div class="fb-login-button login_facebook" data-scope="public_profile,email,user_friends" onlogin="checkLoginState();" data-width="364px" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="true"></div>
checkLoginState = function () { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }
angular中使用facebook登录
facebook官网对angular的描述
需要使用服务,才能支持,
问题:因为facebook的sdk是异步请求,可能造成还没有生成FB对象,就在控制器中使用,报错。
需要依赖注入。
使用ngFacebook插件
github有详细用法,下载下来有test。
主要步骤:
1. 引入ngFacebook.js
2.angular.module('your-app', ['ngFacebook'])
3.
.config( function( $facebookProvider ) { $facebookProvider.setAppId('<your-facebook-app-id>');})
- 4.
.run(['$rootScope', '$window', function ($rootScope, $window) { (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')); $rootScope.$on('fb.load', function() { $window.dispatchEvent(new Event('fb.load')); });}])
- 5.
// 监测 response 对象状态 (查看登录状态,调用getLoginStatus方法,可获取accessToken) $scope.$on('fb.auth.authResponseChange', function() { $scope.allValue.fbStatus = $facebook.isConnected(); if($scope.allValue.fbStatus) { // 获取facebook中我的信息 $facebook.api('/me').then(function(user) { console.log(user); }); } }); // 登录和退出facebook $scope.allValue.loginToggle = function() { if($scope.allValue.fbStatus) { $facebook.logout(); } else { $facebook.login(); } }; // 获取facebook朋友信息 $scope.allValue.getFriends = function() { if(!$scope.allValue.fbStatus) return; $facebook.cachedApi('/me/friends').then(function(friends) { $scope.friends = friends.data; console.log(friends); }); }
- Facebook登录-前端网页以及在angular中的使用方法
- promise对象,以及其在Angular中的使用
- 【Angular】理解Angular中的$apply()以及$digest()
- 开关控件在主流前端框架中的使用方法
- Angular中的$apply()以及$digest()
- Visual Leak Detector 下载 以及在 VC6.0 中的使用方法!
- Visual Leak Detector 下载 以及在 VC6.0 中的使用方法!
- Visual Leak Detector 下载 以及在 VC6.0 中的使用方法!
- SVN服务器搭建以及在MyEclipse中的使用方法
- zTree在Angular中的使用
- facebook 登录
- Facebook登录
- FaceBook登录
- FaceBook登录
- angular登录
- 理解Angular中的$apply()以及$digest()
- 深入理解ANGULAR中的$APPLY()以及$DIGEST()
- 理解Angular中的$apply()以及$digest()
- BZOJ1001 [BeiJing2006]狼抓兔子
- 关于代码实现一个数求平方根
- python读取文本中的内容
- 大道至简,职场上做人做事做管理
- Python机器学习实践指南-中文-PDF
- Facebook登录-前端网页以及在angular中的使用方法
- Coursera deeplearning.ai 深度学习习题3-1-Structuring Machine Learning Projects(1)
- 如何使用java程序操作ActiveMQ
- Python Day2 字符串
- 数据结构实验之排序四:寻找大富翁
- unity详细解说Mecanim使用 动作 Animator
- spring中关于不能 new ClassPathXmlApplicationContext("");的问题
- ansible安装遇到"AttributeError: 'module' object has no attribute 'PROTOCOL_SSLv3'"的问题
- git基本使用