从微信网页授权到OAuth 2.0

相信你使用某些APP需要做登录操作,那么,有可能会出现“微信登录”的按钮。点击该按钮,会跳转到如下页面: w-login.jpeg 当然,我们的前提是通过H5页面登录。那么,此时只需要“确认登录”,那么,返回应用后该应用会获得你的部分微信账户信息,比如头像,用户名等。然后,在应用APP中,你可以看到自己的微信头像。 整个流程,就是一个OAuth 2.0登录。下面,我们从微信文档开始,开启OAuth 2.0之路。 1. 微信网页授权 文档链接:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 关于网页授权回调域名的说明 ... 2、授权回调域名配置规范为全域名,比如需要网页授权的域名为:www.qq.com,配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com 无法进行OAuth2.0鉴权 可以肯定,微信网页授权采用的就是OAuth 2.0标准。 第一步:三方应用的H5页面向微信发起授权申请 https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect wechat.jpg appid就是三方应用在微信开发平台/公众号 注册的应用ID。只有是授权提供方的注册用户,三方应用才有可能使用授权能力。 redirect_uri指定了微信授权成功后,需要重定向到哪里 第二步:授权成功,微信重定向到 redirect_uri,并在URL上携带code。 H5通过接口将code传给服务端,最后,服务端通过code换取网页授权access_token,完成登录操作。 大多数三方应用,都有自己的用户系统。那么,微信授权之后,最终映射到应用的用户系统,完成session和token的生成。 上面两个步骤的代码如下: componentDidMount() { const query = parseUrlSearch(); const { code } = query; this.code = code; if (!query) { return; } if (isWechat()) { this.componentDidMountForWechat(code); } } componentDidMountForWechat(code) { if (code) { // 向服务端发起请求:先登陆,更新cookie,再拉取列表信息 wechatLogin(code, 'login,register,login').then(response => { const { errorCode, data } = response.data; if (errorCode === 0) { setCookies('token', data.token); setCookies('sessionId', data.session); } ... }) } else { const appid = 'xxxxxxxxx', redirect_uri = encodeURIComponent(window.location.href), scope = 'snsapi_userinfo', state = Math.round(Math.random() * 1000000000) window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`; } } 2. 理解OAuth 2.0 有了微信网页授权的经验,那么,就不难理解OAuth 2.0了。 OAuth是一个关于授权(authorization)的开放网络标准 OAuth在"客户端"与"服务提供商"之间,设置了一个授权层(authorization layer)。 "客户端"不能直接登录"服务提供商",只能登录授权层,以此将用户与客户端区分开来。 "客户端"登录授权层所用的令牌(token),与用户的密码不同。用户可以在登录的时候,指定授权层令牌的权限范围和有效期。 "客户端"登录授权层以后,"服务提供商"根据令牌的权限范围和有效期,向"客户端"开放用户储存的资料。 我们来看看OAuth 2.0运行流程: oauth.jpg 资源拥有者(Resource Owner) - 用户 客户端(Client) - 三方应用 资源服务器(Resource Server) - 存放用户资源和信息 授权服务器(Authorization Server) - 给三方颁发授权令牌(access token) 一般,资源服务器和授权服务器是同一个服务 在上面讲到的微信网页授权登录的例子里,"客户端"是三方应用,"服务提供商"就是微信。 再看看它的授权流程: oauth2.jpg 用户打开应用程序,应用程序要求用户给予授权。 用户同意给予应用程序授权。 应用程序使用上一步获得的授权,向授权服务器申请令牌。 授权服务器对应用程序进行认证以后,确认无误,同意发放令牌。 应用程序使用令牌,向资源服务器申请获取资源。 资源服务器确认令牌无误,同意向应用程序开放资源。 是不是和微信网页授权流程一样呢? 3. OAuth 2.0授权方式 OAuth 2.0定义了四种授权方式。 授权码模式(authorization code) 简化模式(implicit) 密码模式(resource owner password credentials) 客户端模式(client credentials) 最常用的是授权码模式(微信授权登录采用这种模式),这里不再展开,可以参考老阮的文章:《OAuth 2.0 的四种方式》 4. OAuth 2.0和JWT(Json web token) 两者完全没有关系!这两个是两个完全不同的东西,根本没有可比性! JWT是一种认证协议 JWT提供了一种用于发布接入令牌(Access Token),并对发布的签名接入令牌进行验证的方法。 令牌(Token)本身包含了一系列声明,应用程序可以根据这些声明限制用户对资源的访问。 在用户鉴权时,可以用JWT做Token认证,仅此而已。 小结 现在越来越多的应用都支持了三方登录,免除用户注册。只不过,授权登录成功后,大多应用强行用户填写手机号,这是为了补充用户信息。因为,授权服务一般不会提供用户手机号这种个人隐私信息。 那么,OAuth 2.0和单独登录(SSO)又有什么关系呢?卖个关子,后续聊。 微信公众号:

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):