Vue.js中Facebook第三方登录api实现

上一篇说了 Line 的第三方登录的实现,这篇记录下Facebook 的实现

大致相同,又有不同!

demo 地址请狠狠的戳这里 ¥ http://download.lllomh.com/cliect/#/product/J417096994417412

一:开发者平台配置

进入开发者https://developers.facebook.com/ 

创建应用(我这里已经有了)

​

动态操作演示:

​

这里我们只需要里面那个appid 就可以了,也就是应用编号

​

facebook 的比较方便一点,不用设置回调地址,窗口登录成功就直接关掉了.返回结果.

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

!--appId 写上开发者--
script async defer crossorigin="anonymous" src="https://img.php1.cn/3cd4a/1eebe/cd5/70be2ca197098d98.webp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xsbG9taA==,size_16,color_FFFFFF,t_70" alt="" data-cke-saved-src="https://img8.php1.cn/3cdc5/1e804/9f3/9f202c1b4154db77.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xsbG9taA==,size_16,color_FFFFFF,t_70" data-cke-widget-data="{ quot;hasCaption quot;:false, quot;src quot;: quot;https://img8.php1.cn/3cdc5/1e804/9f3/9f202c1b4154db77.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xsbG9taA==,size_16,color_FFFFFF,t_70 quot;, quot;alt quot;: quot; quot;, quot;width quot;: quot;800 quot;, quot;height quot;: quot;502 quot;, quot;lock quot;:true, quot;align quot;: quot;none quot;, quot;classes quot;:{ quot;has quot;:1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image">​

实际使用:

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

文章来源于https://www.cnblogs.com/lllomh/p/14508303.html