许多网站在登陆时,都有第三方帐号登陆方式:如常见的QQ、微信、微博登陆服务器
那么当咱们点击三方帐号登陆时,发生了什么事情呢?涉及什么概念呢?接下来咱们就以QQ登陆为例一步步去查看整个过程。ide
以QQ登陆简书为例,来查看整个过程。学习
一、进入QQ登陆页面:网站
能够经过F12查看源码知道:点击简书登陆界面QQ图标是打开到了 /users/auth/qq_connect 页面,以下图1;但咱们点击后查看到的界面倒是QQ登陆界面,以下图2spa
值得注意的是,咱们已经跳转到了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%257D3d
经过发现里面有几个特别的参数:code
参数名 |
参数值 |
client_id(客户端id) | 100410602(这是来源哪里呢?) |
redirect_uri(重定向地址) | http%3A%2F%2Fwww.jianshu.com%2Fusers%2Fauth%2Fqq_connect%2Fcallback(是简书的一个回调地址) |
response_type(相应类型) | code(表明什么意思呢?) |
state(状态) | %257B%257D |
经过观察该页面主要包含两部分:server
a)帐号密码输入框blog
b)受权简书可访问该帐号的权限内容:获取昵称、头像、性别
二、输入帐号赞成受权登陆后,咱们就直接回到了简书的主页面中,此时已登陆用户。如图
对于用户来讲页面在登陆后就调整到了主页,但在程序过程当中却经历了好几个步骤:
a)登陆用户名、密码校验
b)获取受权码,返回设置的回调地址
c)根据受权码获取access_token
d)根据access_token获取OpenID
e)根据OpenId获取用户信息
f)返回跳转到简书主页
那么这整个过程在程序中是怎么完成的呢?接下来咱们用一张图来介绍完整过程。
根据上面流程绘制了以下认证流程图:
在QQ互联开发网站中,咱们能够了解到QQ是OAuth方式实现的,那么如今可能你们就有些疑问:
a)OAuth是什么?
OAuth(开放受权)是一个开放标准,容许用户受权第三方网站访问他们存储在另外的服务提供者上的信息,而不须要将用户名和密码提供给第三方网站或分享他们数据的全部内容。
b)该过程当中简书服务器、QQ认证服务器、QQApi服务器究竟是什么,有什么关系?
c)过程当中的受权码、Token、openId又是什么呢?
d)……
带着这些问题,咱们将一步步去学习,解决这些问题。已到达完整的了解整个过程
经过以上分析主要步骤包含:
一、在简书登陆界面点击QQ登陆图标
二、简书后台(users/auth/qq_connect)重定向到QQ用户登陆界面;须要携带参数(response_type+client_id+redirect_uri+state )
三、输入QQ点击登陆受权,校验QQ用户,生成受权码;返回简书回调地址
四、简书服务器根据获取的受权码获取获取Access Token
五、根据Access Token获取对应用户身份的OpenID
六、根据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