在Vue中添加Facebook、Twitter、vkontakte三方登录

1、首先推荐一款插件——hello.js(http://adodson.com/hello.js/),很有用....

2、因为有了hello.js,实现三方登录就就会变得很简单,个人认为FaceBook、Twitter、vkontakte他们的主要区别是申请配置app,代码部分其实都一样,所以首先看看他们是怎样配置的。

3、Facebook的三方登录:首先在这个地方(https://developers.facebook.com/apps)添加一个应用,

FaceBook 图一


FaceBook 图二


FaceBook 图三


ps: FaceBook 图三的callback配置规则很重要,Twitter、vkontakte同样适用

4、Twitter的三方登录,首先在https://apps.twitter.com/   create  new APP,

Twitter 图一


Twitter 图二

创建成功后,如 Twitter 图二中,你会得到一个api key和api secret,接下来在https://auth-server.herokuapp.com还要做一些配置,

Twitter 图三

5、vkontakte三方登录,在https://vk.com/apps?act=manage这里选择 创建组件 ,创建成功后,配置重定向的uri,配置规则同FaceBook,需要注意的一点是,例:如果重定向uri为:http://www.test.com/redirect,那么需要在主域名中添加一个www.test.com

vkontakte 图一


6、接下来便是核心代码部分——



7、回调的url一定要完全匹配,如果hello.init中有配置redirect_uri, 那么回调地址后面一定要跟上/redirect

8、如果说你遇到了这种情况(这是vk的情况,其他的三方都一样):


仔细看它的地址,其中“redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fredirect”,那么你的回调地址就应该是:http://localhost:8080/redirect

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,786评论 2 45
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,188评论 19 139
  • 你怕什么呢阅读 2,444评论 0 0
  • 刚看了一篇文章,《坚持写日记16年》,作者从小学二年级开始一直到现在24岁,整整的16年,从未间断过,一直记录着生...
    F_熹光阅读 5,419评论 0 0
  • 想你 和胡渣子 你的厚肩膀 有你味道的白T 一整天随心所欲的时间 背后抱我的温度 只为我擦泪的手 梦你 是每晚眼角...
    ProbablyWrong阅读 1,639评论 0 1

友情链接更多精彩内容