基于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 相关文章推荐
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
jstree的简单实例
Dec 01 Javascript
php 修改密码实现代码
May 24 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 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
下载文件的点击数回填
2006/10/09 PHP
phpmyadmin的#1251问题
2006/11/25 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
原生JavaScript实现轮播图
2021/01/10 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python能做哪方面的工作
2020/06/15 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
大学生职业规划书的范本
2014/02/18 职场文书
贷款承诺书
2015/01/20 职场文书
国庆节慰问信
2015/02/15 职场文书
摩登时代观后感
2015/06/03 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers