4

前言

最近有一个简单的需求需要在一个微信公众号外部的H5页面中使用微信登录(接入),同时还要在内部使用第三方支付接口完成支付(不使用微信支付).

无奈队友不给力只好自己研究了一下具体的流程,不出意料的是这两个接入商提供的SDK不同另外微观操作不同,但是基本流程是相似的.

理解了其中的规则觉得很有意思,边萌生出了使用简单的几张图片来解释OAuth2.0协议的想法.

ps:素材是使用note8+autodesk画的,合成使用的是Photoshop,对于我这种手残真的累死了,下次能写字就不发图了( ҂˘ _˘ ).

注意:本文章不是介绍微信以及第三方支付接入具体的实现的文章.

什么是OAuth2.0协议(它能干什么)

OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用。

那什么是开放授权,最直接的例子就是在登录一些网站的时候使用第三方账户进行登录,相信这些场景相信大家都再熟悉不过了.

为什么使用OAuth2.0协议

举一个简单的例子.

我们正在维护一个网上商城,当用户点击购买的时候,我们想借用第三方支付来向我们账户里打钱,而不用花巨额的力气再去开发一套支付系统.

现在用户点击付钱了你会哪个选项来提供支付功能呢?

选项A:

<a href="www.xxx.com/pay/account/123456">点击支付</a>

这个方法不错,几乎0成本,可是它有如下的缺陷(使用这种你是认真的吗?):

  • 你不知道用户是否支付成功从而无法确定订单是否完成
  • 你不知道用户输入的金额
  • 你不知道是谁向你支付,买的什么东西
  • 没有这种可爱的用户(大概吧)

选项B:
直接和用户索要第三方支付的账户和密码,然后由后台进行代理购买.

提出这个方案的人简直是天才,他彻底的解决了无法确认是谁支付的问题,但是有如下的不足:

  • 传输用户的帐号密码不安全
  • 由上面引发的种种不安全
  • 你不安全(重要)

选项C:
使用AUTH2.0协议.

用户,第三方平台和我(服务商)的想法🤔

用户

使用第三方账户登录一个新的网站,对于用户来说无非就是有如下的需求:

  • 懒的注册
  • 想利用这种第三方登入的便利性(例如:使用QQ登入百度网盘的用户免费获取2T空间)

第三方平台

那么对于第三方就拿腾讯来说吧,假如我有一个博客,要使用QQ登入,对于腾讯来说如何做才能保证用户的安全呢?

  • 首先确认要求接入的服务商提供者的信息资历等(必要的时候可以查水表😂)
  • 然后给要求接入的服务商一个唯一凭证,标明服务商身份

服务商(我)

我们要做的就是将这两者进行连接起来,而具体的方式如下:

正文

接入前的准备工作

一般来说你会得到如下的两个参数:

  • appid 代表你的应用唯一ID
  • appsecret 对应的密钥

这个部分每家平台都不一样,具体如何获取你的APPID请参考对应平台的指南.

注意:第三方平台给你的不一定是APPID,我的意思不是连名字都完全一样,有的平台给的参数多有的给的少,总之都是用于验明身份的.

用户触发第三方登录

用户不一定第一次授权就是登录操作,这里我们以登录为例.

在这个流程中服务器(我)接受到了用户想要第三方登录的请求,我们使用之前获取的APPID(不同平台叫法和参数可能不同),然后拼接为成第三方平台指定的url然后直接重定向到这个url.

例如在这个例子中我们的地址可能长这个样子:

www.xxx.com/oauth2.0/authorize?appid=123456&redirect=www.sss.com/login

参数:

  • appid 我们的应用对于第三方平台的唯一id
  • redirect 用户同意授权后被重定向的地址,一般来说都是本应用的首页或者登录页面,在本例中就是www.sss.com/login这个地址.
  • 其他参数 根据第三方平会有不同的额外参数.

然后将用户重定向到这个url中,此时用户会跳转到www.xxx.com.

注意:重定向是一个很重要的参数,当用户同意授权后第三方服务器将会重定向到这个地址.

用户授权

这个时候用户被重定向到了www.xxx.com上,页面提示用户是否要向www.sss.com进行授权.

如果用户同意了授权,那么第三方服务器会重定向url到我们指定的url上,在本例中就是www.sss.com/login并且带上一个code参数.

在这个例子中这个url看起来是这个样子的:

www.sss.com/login?code=xxxxx

用户被重定向到服务商并且携带code

此时我们的www.sss.com/login接受到了一个含有code的请求,我们知道这个是一个第三方登录授权后的请求.

我们再次拼接一个url(不同平台地址规则不同),但是一般来说这个请求会有如下的参数:

  • code 用户授权后重定向带回来的code
  • appid 应用唯一id
  • appsecret 应用对应的密钥

在这个例子中我们请求服务器的url可能是这个样子的:

www.xxx.com/oauth2/access_token?appid=xxxx&secert=xxxx&code=xxxx

第三方校验code和appid以及secret

如果一切顺利在这个阶段我们就可以获取第三方平台响应的一个accesstoken,这个accesstoken代表着用户对于这个应用的授权.

除此以外你还会获取到用户的基本信息例如用户的唯一id之类的.

后续的请求用户的信息需要使用accesstoken进行请求.

现在我们来完成用户的登录这个流程.

获取用户的基本信息

利用accesstoken我们向服务器获取了用户的名字,显示在了我们的应用中.

后续的资源获取就是这个模式(不同平台资源获取地址以及方式有可能稍有不同).

获取用户的更多信息

在用户的资源请求中对于敏感的操作,都不会在前端中完成,都是代交由服务器进行资源获取.

注意

  1. 用户的会话持久依然是由你来做的,当用户首次授权登录后你就应该记住用户,而不是每次登录时候都进行授权.
  2. accesstoken一般都会有过期时间,使用一段时间后失效,所以在某个环节你还可以得到一个refreshtoken用于刷新accesstoken.

参考&引用

http://www.ruanyifeng.com/blo...
https://www.cnblogs.com/flash...
https://blog.csdn.net/hel_wor...
https://blog.csdn.net/wang839...

ASCll
527 声望13 粉丝

引用和评论

0 条评论