基于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处理table表格的代码
Dec 06 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
微信小程序实现上传图片功能
May 28 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
vue 自定义的组件绑定点击事件
Apr 21 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
php计算2个日期的差值函数分享
2015/02/02 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
用JS实现选项卡
2020/03/23 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python构造函数及解构函数介绍
2015/02/26 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Python tkinter和exe打包的方法
2020/02/05 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
WiFi云数码相框:Nixplay
2018/07/05 全球购物
Java中实现多态的机制
2015/08/09 面试题
绿色城市实施方案
2014/03/19 职场文书
公证委托书
2014/08/01 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
Redis 常见使用场景
2021/08/30 Redis
Golang并发操作中常见的读写锁详析
2021/08/30 Golang