Facebook登录怎么接入

Facebook第三方登录

注意事项

Facebook直接在国内无法访问需要科学上网搭梯子。

前期准备

markdown

markdown

markdown

markdown

  • 获取Facebook应用编号,配置授权域名应用图标

markdown

markdown

使用方法

在login页面 script 中引入JS

import facebookWebLogin from '@/plugin/facebookWebLogin.js';

API

  • 初始化Facebook授权登录相关配置信息
facebookWebLogin.init(appId,(status)=>{})
变量名 类型 说明
appId string
Facebook开发者中心 我的应用 应用编号
status function
status 为 true 表示Facebook授权登录环境配置成功
status 为 false 表示Facebook授权登录环境配置失败
  • 检查用户登录状态
facebookWebLogin.getLoginStatus((response)=>{})
变量名 类型 说明
response function
response.status 为 connected 表示用户已登录 Facebook 和您的网页
response.status 为 not_authorized 用户已登录 Facebook,但未登录您的网页
response.status 为 unknown 表示用户未登录 Facebook,所以无法知道他们是否登录了您的网页。或者之前已调用 FB.logout(),因此无法连接至 Facebook
  • 通过 Javascript SDK 调用对话框登录
facebookWebLogin.login((response)=>{},Permission)
变量名 类型 说明
response function
如果 response.status 为 connected 响应中会包含 authResponse 参数
Permission object
此参数为登录权限详细信息请前往官方文档查看 Parameters
  • 通过 Javascript SDK 退出登录
facebookWebLogin.logout((response)=>{})
变量名 类型 说明
response function
方法回调
  • 通过 图谱 API 彻底取消授权应用或撤销登录
facebookWebLogin.revocationAuthorization((response)=>{})
变量名 类型 说明
response function
方法回调
  • 通过 图谱 API 查询用户信息
facebookWebLogin.api(fields,(response)=>{})
变量名 类型 说明
fields string
此参数为查询已授权相关权限用户信息详细信息请前往官方文档查看 fields
response function
方法回调

代码实例

import facebookWebLogin from '@/plugin/facebookWebLogin.js';
export default {
    onLoad(e) {
         const FACEBOOK_APPID = 'xxxxxxxxxxxxx';
         facebookWebLogin.init(FACEBOOK_APPID, status => {
            if (status) {
                console.log('Facebook授权登录环境配置成功');
            }
         });
    },
    methods:{
        fbLogin() {
                let that = this;
                facebookWebLogin.login(
                    response => {
                        facebookWebLogin.getLoginStatus(response => {
                            if (response['status'] == 'connected') {
                                uni.showLoading({
                                    title: '正在登录中'
                                });
                                facebookWebLogin.api('permissions', res => {
                                    let fields = 'id,name,picture,';
                                    fields += res.permissions.data
                                        .filter(item => {
                                            return item['status'] == 'granted' && item[
                                                'permission'] != 'public_profile';
                                        })
                                        .map(item => {
                                            return item['permission'];
                                        })
                                        .join(',');
                                    facebookWebLogin.api(fields, facebookInfo => {
                                        let dataInfo = JSON.parse(JSON.stringify(facebookInfo));
                                        let fbData = {
                                            email:dataInfo.email,
                                            id:dataInfo.id,
                                            name:dataInfo.name,
                                            picture:`https://graph.facebook.com/${dataInfo.id}/picture?type=large`
                                        };
                                        uni.showLoading({
                                            title: '获取中'
                                        });
                                        loginFacebook(fbData).then(res=>{
                                            this.$store.commit("LOGIN", {
                                                'token': res.data.token
                                            });
                                            that.getUserInfo(res.data);
                                        })
                                    });
                                });
                            } else {
                                uni.showToast({
                                    title: '当前用户未登录Facebook或者您的网页',
                                    icon: 'none'
                                });
                            }
                        });
                    }, {
                        scope: 'email', 
                        return_scopes: true,
                    }
                );

            },
    }
}
本页目录