基于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动画效果类封装代码
Aug 28 Javascript
javascript引导程序
Oct 26 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
JavaScript实现修改伪类样式
Nov 27 Javascript
如何更好的编写js async函数
May 13 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
小学生自我鉴定
2013/10/12 职场文书
静心口服夜广告词
2014/03/20 职场文书
机关搬迁方案
2014/05/18 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
国博复兴之路观后感
2015/06/02 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers