Facebook登录-前端网页以及在angular中的使用方法
leung_blog | ngFacebook | facebook JavaScript SDK | 官网登录流程 |
timelessmemoryli
总体思想
先通过FB.getLoginStatus()
判断用户facebook的登录状态和授权情况,如果已经登录授权,则显示退出按钮,调用facebook退出方法FB.logout()
,如果没有登录授权,则显示登录按钮(可以自定义,也可以使用facebook官方按钮,文中有链接),自定义的按钮,直接调用FB.login()
方法,facebook官方按钮可在官网制作好后,直接添加代码,启动时会出发onlogin事件
,可在事件中获得用户信息,状态。
坑:获取不到用户email,代码里有解决方法。
准备工作
在Facebook开发者平台注册自己的application;然后得到appid和应用密钥;如图:
接下来就异步引用Facebook的sdk.js并调用初始化方法;
<script>window.fbAsyncInit = function() {// 初始化sdkFB.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>
加载网页时应采取的第一步是检查用户是否已使用 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.emailconsole.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插件
.config( function( $facebookProvider ) {$facebookProvider.setAppId('<your-facebook-app-id>');
})
.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'));});
}])
// 监测 response 对象状态 (查看登录状态,调用getLoginStatus方法,可获取accessToken)$scope.$on('fb.auth.authResponseChange', function() {$scope.allValue.fbStatus = $facebook.isConnected();if($scope.allValue.fbStatus) {// *获取facebook中我的信息,metadata为查看所有的属性$facebook.api('/me?metadata=1&fields=email,name').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中的使用方法相关推荐
- Angular 中后台前端解决方案 - Ng Alain 介绍
Angular 中后台前端解决方案 - Ng Alain 介绍 参考文章: (1)Angular 中后台前端解决方案 - Ng Alain 介绍 (2)https://www.cnblogs.com/ ...
- 前端学习——第三方登录(Google登录、Facebook登录)
文章目录 前言 一.前端对接第三方登录有什么用? 二.使用环境 三.FB第三方登录 引入且封装成组件 四.G第三方登录 引入且封装成组件 五.页面上使用 总结 前言 本文介绍了作者本人学习前端Java ...
- facebook登录功能xml文件中application Id的配置问题
Resources referenced from the manifest cannot vary by configuration(except for version qualifiers, e ...
- wget下载需登录的网页中的文件
wget下载需登录的网页中的文件(使用cookie) wget简介 以网络下载 maven 包为例 wget -c http://mirrors.shu.edu.cn/apache/maven/mav ...
- idea中项目前端网页图标不显示的原因
idea项目中前端网页图标不显示的原因 在做一个前段项目时,出现了页面中所有图标都不显示的问题: 查看控制台中有如下报错: fa-solid-900.woff2:1 Failed to load re ...
- 【华为云技术分享】三大前端技术(React,Vue,Angular)探密(上)
[引言] 前段时间写过一篇关于前端技术的概括性文章<前端技术的选择]>(http://3ms.huawei.com/km/blogs/details/7971337),本文就对于当下顶级的 ...
- 获取Angular中的AngularJS功能
介绍 ( Introduction ) If you have solid experience with AngularJS 1.x, you're well aware of the framew ...
- 前端网页技术HTML
前端技术: 学习方法 前端要怎么学? 前端位于整个项目首要要开发的内容,直接和用户打交道,实现页面的展现和交互功能,所以在分类上俗称为前端.随着软件技术的日趋成熟,前端内容也呈现爆炸式的增长,和革命性 ...
- CGB2105第二阶段-day06前端网页技术HTML
一.前端技术 1.概念 前端位于整个项目首要要开发的内容,直接和用户打交道,实现页面的展现和交互功能,所以在分类上俗称为前端. 但从整体来看(前端占软件开发总量的百分之十左右,地位可见一斑):从技术的 ...
最新文章
- tcp_tw_recycle和tcp_timestamps导致connect失败问题
- Linux 中模拟延时和丢包的实现
- centos7 安装配置openstack-dashboard (官网openstack-juno版)
- moia调度mysql到hive_创立打车软件Moia后,“不安分”的大众又收购一家移动支付公司PayByPhone...
- [BUUCTF-pwn]——jarvisoj_level3_x64
- declare sql语句_SQL语句大全【第二部分】技巧+经典案例
- RAC环境下管理OGG-HA
- C++ GUID和string转化函数【转载】
- C#使用Newtonsoft.Json读写json、读写Base64图像
- 如何用axure绘制图表_用Python绘制手绘风格的图表
- android 免root自动滑动,无需root自动点击屏幕软件
- 中兴f477v2超级管理员_[求助] 联通光猫 ZXHN F477V2 桥接问题
- 药品质量检测的方法之一:质谱分析法
- 英雄联盟服务器维护2019.4.5,lol维护公告最新时间 英雄联盟11.9版本4月29日更新内容...
- STRAIGHT_JOIN
- 【MacBook】激活有个步骤要输面的问题:Enter the passcode you use to unlock the MacBook ***.
- Executor框架的使用
- 【业务分析】如何设计A/B test,以及如何对实验结果检验、结果分析?
- 虚拟的超级计算机和云计算,概念PK:云计算与高性能计算(HPC)
- QQ内网页提示“已停止访问”的原因及解决方案
热门文章
- Android怎么自定义充电铃声,安卓手机怎么自定义充电提示音_自定义安卓充电提示音教程_3DM手游...
- 分享几个CDN加速服务
- java软件工程师面试宝典之简历准备(一本辟邪剑谱交给你)
- 水果贵到吃不起,“水果自由”要电商平台来实现?
- matplotlib常用绘图操作
- Android基站定位——通过手机信号获取基站信息(一)
- 带error的函数:iferror、iserror、error.type
- 林家翘先生提醒青年学者:千万不要Garbage in,garbage out
- python gevent安装_gevent
- gevent是什么?