基于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 08 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
javascript实现简易的计算器
Jan 17 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
2006/10/09 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
yii上传文件或图片实例
2014/04/01 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
浅谈php命令行用法
2015/02/04 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
python实现的多线程端口扫描功能示例
2017/01/21 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python常见数据类型转换操作示例
2019/05/08 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
英国景点门票网站:attractiontix
2019/08/27 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
项目施工员岗位职责
2014/03/09 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
python前后端自定义分页器
2022/04/13 Python