基于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 相关文章推荐
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
js播放wav文件(源码)
Apr 22 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
angularjs性能优化的方法
Sep 05 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
js异步接口并发数量控制的方法示例
Nov 22 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性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php牛逼的面试题分享
2013/01/18 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
javascript如何实现create方法
2019/11/04 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
TensorFlow的权值更新方法
2018/06/14 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Django框架 querySet功能解析
2019/09/04 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
什么是Python中的匿名函数
2020/06/02 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
英文感谢信格式
2015/01/21 职场文书
团员个人总结
2015/02/26 职场文书
车辆挂靠协议书
2016/03/23 职场文书
python中数组和列表的简单实例
2022/03/25 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers