Facebook登录-前端网页以及在angular中的使用方法

程序员文章站 2024-01-07 20:44:46

...

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() {
        // 初始化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:'...'
    }
}

Facebook登录-前端网页以及在angular中的使用方法

方法函数

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>');
})

.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);
        });
    }