基于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 & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
javascript网页关键字高亮代码
Jul 30 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
移动端js触摸事件详解
Sep 18 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
JS实现星星海特效
Dec 24 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
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
python进程管理工具supervisor使用实例
2014/09/17 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
Python pip使用超时问题解决方案
2020/08/03 Python
露营世界:Camping World
2017/02/02 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
客服部班长工作责任制
2014/02/25 职场文书
保证书范文大全
2014/04/28 职场文书
环卫工人节活动总结
2014/08/29 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
新教师教学工作总结
2015/08/12 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
python中取整数的几种方法
2021/11/07 Python