基于vue实现微博三方登录流程解析
1.微博三方登录流程
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储存在第三方服务控制的本地储存.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue中node_modules中第三方模块的修改使用详解
最近用vue在做一个项目,github用上找了一个日历插件,intall到了本项目中,配好以后发现插件的样式风格和项目总体风格相差较大,所以就像这个改一下插件风格, 第一种方法:我直接在父组件中将style标签的scoped的属性去掉了,在父组件中直接写了想要的样式,重叠样式全部!important,结果确实生效了 第二种方法:本想这个要是样式这么改,还有路可走:要是插件的底层方法呢,如果有对外开发的修改入口还行,要是没有,可咋办,于是想着能不能直接去改下这个插件,这样直接一锤子到底, 在nod
-
mpvue项目中使用第三方UI组件库的方法
说明 整理了一份简单的源码,放在github,有需要参考的同学自取~ 简介 微信小程序上线已有一年多时间啦,自美团的mpvue(基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系)问世也过去了好几个月. 前端技术日新月异,小程序的UI框架也层出不穷. 例如: WeUI: 一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.(github) ZanUI: 有赞移动 Web UI 规范 ZanUI 的小
-
Vue 中如何正确引入第三方模块的方法步骤
方法一:配置 webpack ProvidePlugin 全局引入 假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入: https://webpack.js.org/plugins/provide-plugin/ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) 方法二:包装成插件在 Vue 中调用 use 方法安装 另外一种比较靠谱的方法是将第三方模块打包成插件
-
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
这几天接到一个需求,里面有需要做一个属性组件,找的第三方的,但是不能完全满足我的需求,有这时间,我就自己做个小轮子吧. 先看效果图(红点之前用的字体图标,是个对号,这里为了方便,用圆圈代替了选中状态,所以不是太好看,需要的自行修改就好) 我直接用的vue-cli搭建的项目,代码目录如下: 使用方式如下: treeData的格式如下: treeData: [ {open: false, name: '1', level: 0, checked: true}, { open: false, // o
-
vue中引入第三方字体文件的方法示例
在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 或者https://www.jb51.net/fonts/点击此链接,进行字体下载 2.将字体文件引入 自己定义一个文件夹,放入下载好的.ttf文件 先自己定义一个font.css文件,将下载好的字体文件的路径引入 @font-face { font-family: "华文行楷"; src:
-
Vue.js中Line第三方登录api的实现代码
国际化的项目就会用用到一些第三方的登录api,这次记录一下Line 的! 按步骤来: 注册Line账号就不说了,虽然麻烦,这就自己去想办法了! demo 请狠狠的戳这里 http://download.lllomh.com/cliect/#/product/J417081951162505 一:开发者平台配置 去Line 的开发者平台 新建一个App: https://developers.line.biz/en/ 顺便写好资料: 动态演示: 这要 用到的 就是2个: Chann
-
VUE引入第三方js包及调用方法讲解
VUE引入第三方js包及调用方法 1.首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到 2.网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用,较稳定的方式是在 index.html 中引入js包 <script src="static/xxxxx.js"></script> 3.mounted 是初始化加载的方法 可以理解为jquery 中的页面加载完的初始化方法 如果第三方包有初始化需要调用的一些函数等 需要写在mou
-
基于vue实现微博三方登录流程解析
1.微博三方登录流程 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 后
-
基于JWT实现SSO单点登录流程图解
一.基于JWT实现SSO单点登录原理 1.什么是单点登录 所谓单点登录就是有多个应用部署在不同的服务器上,只需登录一次就可以互相访问不同服务器上的资源. 2.单点登录流程 当一个访问请求发给应用A,如果这个请求需要登录以后才能访问,那么应用A就会向认证服务器请求授权,这时候就把用户引导到认证服务器上.用户在认证服务器上完成认证并授权.认证授权完成后,认证服务器返回给应用A一个授权码,应用A携带授权码到认证服务器请求令牌,认证服务器返回应用A一个JWT,应用A解析JWT里面的信息,完成登录.这是一
-
基于IDEA查看maven依赖结构流程解析
打开方式: 方法一:该工具有个Maven Projects窗口,一般在右侧能够找到,如果没有可以从菜单栏打开:View>Tool Windows>Maven Projects:选择要分析的maven module(idea的module相当于eclipse的project),右击[Show Dependencies...],会出来该module的全部依赖关系图 方法二:在Maven Projects窗口中,点击如下图标,或者使用快捷键 Ctrl + Alt + Shift +U 经过这一步就可
-
基于redis的小程序登录实现方法流程分析
这张图是小程序的登录流程解析: 小程序登陆授权流程: 在小程序端调用wx.login()获取code,由于我是做后端开发的这边不做赘述,直接贴上代码了.有兴趣的直接去官方文档看下,链接放这里: wx.login() wx.login({ success (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://test.com/onLogin', data: { code: res.code } }) } else { console
-
基于Security实现OIDC单点登录的详细流程
目录 一.说明 二.OIDC核心概念 三.什么是IDToken 3.1.与JWT的AccessToken区别 3.2.与UserInfo端点的区别 四.OIDC单点登录流程 五.SpringSecurity实现 六.完整的demo下载地址 一.说明 本文主要是给大家介绍 OIDC 的核心概念以及如何通过对 Spring Security 的授权码模式进行扩展来实现 OIDC 的单点登录. OIDC 是 OpenID Connect 的简称,OIDC=(Identity, Authenticati
-
基于Vue实例生命周期(全面解析)
前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即
-
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果.并且基于 Vue.js 2.0 全家桶.具体效果如下图所示: 最终效果可以翻到文章最后观看. 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示: 教程如下所示: 从图中以及我
-
基于Java实现ssh命令登录主机执行shell命令过程解析
这篇文章主要介绍了基于Java实现ssh命令登录主机执行shell命令过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.SSH命令 SSH 为 Secure Shell的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层基础上的安全协议.SSH 是较可靠,专为远程登录会话和其他网络服务提供安全性的协议.利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题.SSH最初是UNI
-
基于Vue实现Excel解析与导出功能详解
目录 前言 基本介绍 代码实现 基本结构 上传解析 Excel的导出 基本结构 导出Excel 总结 前言 最近在整理日常开发中长涉及到的业务需求,正好想到了excel的解析与上传方面的事情,在开发中还是比较常见的,趁着周末做一下整理学习吧 基本介绍 主要基于Vue+element实现文件的解析与导出,用的的插件是 xlsx,里面的具体方法,感兴趣的去研究一下,基本的样式,配置就不赘述了,也比较简单,我们直接上主食 代码实现 基本结构 用户点击文件上传,将excel的表格已json的格式显示在页
-
基于Vue的文字跑马灯组件(npm 组件包)
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HTML标准已经废弃了这个标签,现在工作上用的是Vue,所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包,这样别人可以通过npm install ...就可以用,想想还有点激动,于是开始我的第一个npm组件之旅! 二.用npm发布一个包 有点惭愧,之前通过npm install ...安装pac
随机推荐
- JavaScript更改class和id的方法
- VBScript 输出中的对齐实现方法
- Android裁剪图片为圆形图片的实现原理与代码
- C++求四个正整数最大公约数的方法
- js数组常见操作及数组与字符串相互转化实例详解
- asp.net FCKeditor自定义非空验证
- PHP处理CSV表格文件的常用操作方法总结
- MySql的存储过程学习小结 附pdf文档下载
- Sql Server 2000 行转列的实现(横排)
- js 弹出层 并可以拖拽
- BootStrap入门教程(二)之固定的内置样式
- 用SQL语句实现随机查询数据并不显示错误数据的方法
- 学习并汇集javascript匿名函数
- 中了桌面上的ie.exe的解决方法
- win2008 IIS7无后缀URL部署问题 MVC4 MVC URL映射
- C++链表倒序实现方法
- asp.net 动态创建TextBox控件及状态数据如何加载
- python @property的用法及含义全面解析
- 简单谈谈Python的pycurl模块
- jQuery插件实现的日历功能示例【附源码下载】