基于vue实现微博三方登录流程解析


Posted in Javascript onNovember 04, 2020

1.微博三方登录流程

基于vue实现微博三方登录流程解析

1.1 前端获取认证code

1.在Vue页面加载时 动态发送请求获取微博授权url

2.django收到请求的url后,通过微博 应用ID(client_id)和回调地址(redirect_uri) 动态 生成授权url返回给Vue

3.当用户点击上面的url进行扫码,授权成功会 跳转我们的回调界面并附加code参数

4.Vue获取到微博返回的code后,会 将code发送给django后端 (上面的redirect_uri)

1.2 获取微博access_token

后端获取code后,结合client_id、client_secret、redirect_uri参数进行传递,获取微博access_token

1.3 获取微博用户基本信息并保存到数据库

使用获得的access_token调用获取用户基本信息的接口, 获取用户第三方平台的基本信息

用户基本信息 保存到数据库,然后关联本地用户 ,然后将用户信息返回给前端

1.4 生成token给Vue

django后端借助微博认证成功后,可以 使用JWT生成token ,返回给Vue

Vue将token存储到localStorage中 ,以便用户访问其他页面进行身份验证

2.第三方登录与本地登录的关联(三种情况)

2.1 情况1: 本地未登录,第一次登录第三方

此时相当于注册,直接把第三方信息拉取来并注册成本地用户就可以了,并建立本地用户与第三方用户
(openid)的绑定关系

2.2 情况2:本地未登录,再次登录第三方

此时用户已注册,获取到openid后直接找出对应的本地用户即可

2.3 情况3:本地登录,并绑定第三方

这个只要将获取到的openid绑定到本地用户就可以了

3.oauth认证原理

OAuth是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源,而无需将用户名和密码提供给第三方应用。

OAuth允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据。这个code如果能出三方换取到数据就证明这个用户是三方真实的用户

4.为什么使用三方登录

服务方希望用户注册, 而用户懒得填注册时的各种信息(主要是为了保证用户的唯一性,各种用户名已占用,密码格式限制).

而像微信, QQ, 微博等几乎每个人都会安装的应用中用户肯定会在其中某一个应用中已经注册过,证明该用户在已经注册的应用中的唯一性.

第三方登录的实质就是在授权时获得第三方应用提供的代表了用户在第三方应用中的唯一性的openid.并将openid储存在第三方服务控制的本地储存.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 程序编码规范
Nov 23 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 #Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 #Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 #Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 #Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 #Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 #Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 #Javascript
You might like
PHP中常用的转义函数
2014/02/28 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
JavaScript中Object值合并方法详解
2017/12/22 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
浅析python中while循环和for循环
2019/11/19 Python
python实现经典排序算法的示例代码
2021/02/07 Python
同事吵架检讨书
2014/02/05 职场文书
美容院经理岗位职责
2014/04/03 职场文书
电子信息工程自荐信
2014/05/26 职场文书
学校春季防火方案
2014/06/08 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
硕士学位申请报告
2015/05/15 职场文书
警示教育观后感
2015/06/17 职场文书
小学副班长竞选稿
2015/11/21 职场文书