基于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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
传智播客学习之java 反射
Nov 22 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
Angular4开发解决跨域问题详解
Aug 28 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
json的前台操作和后台操作实现代码
2012/01/20 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
皇城相府导游词
2015/02/06 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis