基于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 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 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设计模式 Proxy (代理模式)
2011/06/26 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
js比较日期大小的方法
2015/05/12 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
js实现多张图片延迟加载效果
2017/07/17 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
Angular(5.2->6.1)升级小结
2018/12/27 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python发腾讯微博代码分享
2014/01/10 Python
使用Python对SQLite数据库操作
2017/04/06 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
工作自我评价分享
2013/12/01 职场文书
保密工作承诺书
2014/08/29 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
2014年电教工作总结
2014/12/19 职场文书
就业推荐表导师评语
2014/12/31 职场文书
家长意见书
2015/06/04 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
Golang gRPC HTTP协议转换示例
2022/06/16 Golang
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers