认证授权:一键登录的背后过程

摘要:
接下来,我们将以QQ登录为例,一步步检查整个过程。OAuth是一种开放标准,允许用户授权第三方网站访问其存储在其他服务提供商上的信息,而无需向第三方站点提供用户名和密码或共享其数据的所有内容。

前言

  许多网站在登录时,都有第三方账号登录方式:如常见的QQ、微信、微博登录

  如下图:博客园简书登录界面

  认证授权:一键登录的背后过程第1张     认证授权:一键登录的背后过程第2张

    那么当我们点击三方账号登录时,发生了什么事情呢?涉及什么概念呢?接下来我们就以QQ登录为例一步步去查看整个过程。

三方登录过程

 以QQ登录简书为例,来查看整个过程。

 1、进入QQ登录页面:

  可以通过F12查看源码知道:点击简书登录界面QQ图标是打开到了 /users/auth/qq_connect 页面,如下图1;但我们点击后查看到的界面却是QQ登录界面,如下图2

  图1

认证授权:一键登录的背后过程第4张

  值得注意的是,我们已经跳转到了QQ的服务器地址了:https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=100410602&redirect_uri=http%3A%2F%2Fwww.jianshu.com%2Fusers%2Fauth%2Fqq_connect%2Fcallback&response_type=code&state=%257B%257D

  通过发现里面有几个特别的参数:

参数名
参数值
client_id(客户端id)100410602(这是来源哪里呢?)
redirect_uri(重定向地址)http%3A%2F%2Fwww.jianshu.com%2Fusers%2Fauth%2Fqq_connect%2Fcallback(是简书的一个回调地址)
response_type(响应类型)code(代表什么意思呢?)
state(状态)%257B%257D

  通过观察该页面主要包含两部分:

   a)账号密码输入框

   b)授权简书可访问该账号的权限内容:获取昵称、头像、性别 

 2、输入账号同意授权登录后,我们就直接回到了简书的主页面中,此时已登录用户。如图

   对于用户来说页面在登录后就调整到了主页,但在程序过程中却经历了好几个步骤:

   a)登录用户名、密码校验

   b)获取授权码,返回设置的回调地址

   c)根据授权码获取access_token

   d)根据access_token获取OpenID

   e)根据OpenId获取用户信息

   f)返回跳转到简书主页

   认证授权:一键登录的背后过程第5张

 那么这整个过程在程序中是怎么完成的呢?接下来我们用一张图来介绍完整过程。

流程回顾

  根据上面流程绘制了如下认证流程图:

 认证授权:一键登录的背后过程第6张 

   在QQ互联开发网站中,我们可以了解到QQ是OAuth方式实现的,那么现在可能大家就有些疑问:

  a)OAuth是什么?

     OAuth(开放授权)是一个开放标准,允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要将用户名和密码提供给第三方网站或分享他们数据的所有内容。

  b)该过程中简书服务器、QQ认证服务器、QQApi服务器到底是什么,有什么关系?

  c)过程中的授权码、Token、openId又是什么呢?

  d)……

  带着这些问题,我们将一步步去学习,解决这些问题。已到达完整的了解整个过程  

总结

  通过以上分析主要步骤包含:

  1、在简书登录界面点击QQ登录图标

  2、简书后台(users/auth/qq_connect)重定向到QQ用户登录界面;需要携带参数(response_type+client_id+redirect_uri+state )

  3、输入QQ点击登录授权,校验QQ用户,生成授权码;返回简书回调地址

  4、简书服务器根据获取的授权码获取获取Access Token

  5、根据Access Token获取对应用户身份的OpenID

  6、根据OpenID,调用OpenApi接口

后续

  逐步解答上面提出得到问题,对相关知识深入了解。最终实现自己的认证授权服务

  下一篇就介绍OAuth标准

参考:

  QQ互联开发: https://wiki.connect.qq.com/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_server-side

  OAuth2.0简介:https://wiki.connect.qq.com/oauth2-0%E7%AE%80%E4%BB%8B

  

免责声明:文章转载自《认证授权:一键登录的背后过程》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇[Android]Android的常用adb命令CVE-2020-1472 NetLogon特权提升漏洞下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

等了整整12年!Linux QQ 终于更新了!

来自:快科技 作者:上方文Q链接:http://news.mydrivers.com/1/681/681039.htm 2019年10月24日,也就是“1024程序员节”的时候,腾讯突然发布了Linux系统版本的QQ,官方也宣称“全新回归”。 这是因为在2008年的时候,腾讯曾经发布过一次Linux QQ,但如同浪花一般随即消失得无影无踪,如今随着Linu...

怎样在 Firefox 中打开 QQ 链接和邮箱

转贴自  猫言猫语 虽然现在很喜欢用小巧、简洁的 Gtalk,但是 QQ 的群众基础还是太深厚了,几乎所有的同学朋友都是人手至少一个,而且 QQ 还有一些 Gtalk 没有的功能(发图、传文件等),所以 QQ 目前还是我用的最多的即时通讯软件。 如果你也在用 QQ ,而且也是 Firefox 的忠实用户的话,你有没有遇到过这样的问题:朋友通过 QQ 发来的...

【原创+亲测可用】JS如何区分微信浏览器、QQ浏览器和QQ内置浏览器

1、原理: 通过不同移动端的ua弹窗 获取user-agent 参数包含的信息,进行判断浏览器类型 在Android上 QQ内置环境的ua中有关键字 MQQBrowser, 并且后面包含一个【空白符+QQ】字符;QQ浏览器仅有【MQQBrowser】因此在Android上区分,需要用正则判断ua中包含MQQBrowser,并且剔除【MQQBrowser...

判断QQ,微信,QQ浏览器

最近做一个h5的落地页,用户输完信息后,去下载app,这里切记几个知识点 1.在微信和QQ中是不能下载app的,需要跳到浏览器中去下载。 2.window.location.href和window.open链接到app的链接是行不通的,在webview中会毙掉(h5嵌在第三方的贷超app中就会挂掉)。需要使用a标签 href链接url 3.判断微信,qq,...

HBuilder html5plus分享功能

1》使用系统分享功能,这个分享经测试(202006月)只能分享文字,不能分享图片。毕竟这不需要任何appid,还可以接受。 if(window.plus){ plusReady(); }else{ document.addEventListener("plusready", plusReady, false);...

BlackBerry 9900刷机

1、安装BlackBerry Desktop Software; 2、安装ROM,双击9900Asia_PBr7.1.0_rel2807_PL5.1.0.692_A7.1.0.1033_China_Mobile_Hong_Kong_Co._Ltd.exe; 3、删除vendor.xml; 4、连接BB 9900与电脑,打开Berry Box: 5、关闭B...