基于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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
javascript引用对象的方法
Jan 11 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 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
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
js省市区级联查询(插件版&无插件版)
2017/03/21 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
pandas 时间格式转换的实现
2019/07/06 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
经济贸易系求职信
2014/08/04 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2014年导购员工作总结
2014/11/18 职场文书
2015年资料员工作总结
2015/04/25 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis