欢迎大家进群，一起探讨学习

微信公众号，每天给大家提供技术干货

1,在index.html中加入这个 sdk, appid换成你的应用编号:

 <!--appId 写上开发者--><script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3&appId=3356227040432352&autoLogAppEvents=1"></script>

2,在main.js中注册该组件,同时安装 `npm install vue-facebook-signin-button`

import FBSignInButton from 'vue-facebook-signin-button'
Vue.use(FBSignInButton)

3,.然后就是在组件中使用了,可以集合到登录组件里面去:

  <fb-signin-button:params="fbSignInParams"@success="onSignInSuccess"@error="onSignInError">Sign in with Facebook</fb-signin-button>

完整代码

<template><fb-signin-button:params="fbSignInParams"@success="onSignInSuccess"@error="onSignInError">Sign in with Facebook</fb-signin-button>
</template><script>export default {name:'facebook',data () {return {fbSignInParams: {scope: 'email,user_likes',return_scopes: true}}},methods: {onSignInSuccess (response) {// https://developers.facebook.com/docs/graph-api/reference/userFB.api('/me?fields=id,name,gender,first_name,last_name,email,phone,posts,birthday,hometown', dude => {console.log('dude', dude)})console.log(response) //返回第三方的登录信息 tolen等},onSignInError (error) {}}}
</script><style>.fb-signin-button {/* This is where you control how the button looks. Be creative! */display: inline-block;padding: 4px 8px;border-radius: 3px;background-color: #4267b2;color: #fff;}
</style>

vue获取facebook用户邮箱、头像并登录相关推荐

记一次vue获取微信用户信息
使用vue静态页获取微信的用户信息,通过调取微信的接口进行实现. 注意:我写的代码判断了只有在微信浏览器打开才可以获取用户信息,别的还没有进行测试!!!!!!!!!! 第一步:获取code getCo ...
Vue项目中用户的头像展示
效果展示: element中已经有对应的组件了,直接封装成公用的组件使用即可在@/components/UploadImage/index.vue(注意我们要自定义上传,并上传到第三方服务器中,所以 ...
uniapp微信小程序新版本获取用户的头像和昵称，手机号
新版本微信小程序通过getUserInfo获取到用户的头像是灰色,昵称显示为微信用户,这是微信版本更新了,现在需要用getUserProfile来获取用户的头像和昵称,并且只能页面产生点击事件(例如 ...
虚拟机游戏获取服务器地址,vue获取服务器地址
vue获取服务器地址内容精选换一换 Atlas 500 Pro 智能边缘服务器(型号 3000)安装上架.服务器基础参数配置.安装操作系统等操作请参见<Atlas 500 Pro 智能边缘服 ...
微信小程序获取微信用户步数
小程序开发代码 -js // index.js // 获取应用实例 const app = getApp()Page({data: {motto: 'Hello World',userInfo: {} ...
php 只需qq 获取用户信息,免登录只需要一个QQ号就能获取QQ头像和QQ昵称获取QQ用户信息API...
//里客云资源站,likeyunba.com //BY TANKING // header header("Content-Type:application/json"); err ...
android qq登录获取用户信息吗,免登录只需要一个QQ号就能获取QQ头像和QQ昵称获取QQ用户信息API...
[PHP] 纯文本查看复制代码<?php // header header("Content-Type:application/json"); error_reportin ...
免登录只需要一个QQ号就能获取QQ头像和QQ昵称获取QQ用户信息API
<?php //里客云资源站,likeyunba.com //BY TANKING // header header("Content-Type:application/json&qu ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
(详解)钉钉接口，PC端微应用，免登录及获取当前用户信息
1.用了两天的时间,一直在研究微应用的,免登录及获取用户信息这一块. 但是钉钉官网写的太繁杂了,看了一天,硬是没看明白,最后,硬着头皮,一点点查资料,借鉴别人的代码,终于研究出来了,为了防止年轻 ...

vue获取facebook用户邮箱、头像并登录

欢迎大家进群，一起探讨学习

微信公众号，每天给大家提供技术干货

博主技术笔记

博主网站地址1

博主网站地址2

博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star

1,在index.html中加入这个 sdk, appid换成你的应用编号:

2,在main.js中注册该组件,同时安装 `npm install vue-facebook-signin-button`

3,.然后就是在组件中使用了,可以集合到登录组件里面去:

vue获取facebook用户邮箱、头像并登录相关推荐

最新文章

热门文章

vue获取facebook用户邮箱、头像并登录

欢迎大家进群，一起探讨学习

微信公众号，每天给大家提供技术干货

博主技术笔记

博主网站地址1

博主网站地址2

博主开源微服架构前后端分离技术博客项目源码地址，欢迎各位star

1,在index.html中加入这个 sdk, appid换成 你的应用编号:

2,在main.js中注册该组件,同时安装 npm install vue-facebook-signin-button

3,.然后就是在组件中使用了,可以集合到登录组件里面去:

vue获取facebook用户邮箱、头像并登录相关推荐

最新文章

热门文章

1,在index.html中加入这个 sdk, appid换成你的应用编号:

2,在main.js中注册该组件,同时安装 `npm install vue-facebook-signin-button`