基于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中的其他对象
Jan 16 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
JS实现轮播图效果
Jan 11 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
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制作静态网站的模板框架(一)
2006/10/09 PHP
php绘制一个矩形的方法
2015/01/24 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
Python 字符串定义
2009/09/25 Python
Python的另外几种语言实现
2015/01/29 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
大学生毕业的自我评价分享
2014/01/02 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
老干部工作先进事迹
2014/08/17 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL