客户端(自己开发的C端,可以是浏览器、移动端)
服务端(自己开发的后端)
授权认证页面
授权认证系统
第一步:客户端请求后端auth接口,重定向到授权页。
- 用户进入项目首页,客户端向后端请求auth接口,并传参redirect_uri给后端(redirect_uri为前端页面的url,为之后授权页面跳转回来做准备,这里假设是http://www.baidu.com)
- 后端收到前端的auth请求,封装参数,拼接url,把url返回给客户端。
封装params:
https://b.com/oauth/authorize?
response_type=code // 表示要求返回授权码
&client_id=CLIENT_ID // 权限系统会分配一个固定的appkey,让授权系统知道谁在请求
&redirect_uri=http://www.baidu.com // 前端传的url地址
&scope=read //表示要求的授权范围 只读权限
- 前端requset拦截(比如后端若返回code为401,重定向到后端返回给前端的url,这里的url就是https://b.com/oauth/authorize?response_type=code&client_id=CLIENT_ID&redirect_uri=http://www.baidu.com&scope=read
第二步:用户登录,获取授权码。
用户跳转后,授权页面会要求用户登录,然后询问是否同意给予 www.baidu.com网站授权。用户表示同意,这时授权页面就会跳回redirect_uri
参数指定的网址(www.baidu.com)。跳转时,会传回一个授权码。
https://www.baidu.com/callback?code=1234567abcd
上面 URL 中,code
参数就是授权码。
第三步:前端页面向后端再次请求auth接口,后端判断前端已经获取到code,则向授权系统请求获取token。
https://b.com/oauth/token? client_id=CLIENT_ID& // 还是第一次的appkey client_secret=CLIENT_SECRET& // 授权系统分配的appsecret grant_type=authorization_code& //表示采用的授权方式是授权码 code=AUTHORIZATION_CODE& // code参数是上一步拿到的授权码 redirect_uri=CALLBACK_URL // redirect_uri参数是令牌颁发后的回调网址 www.baidu.com
第四步: 授权系统返回token
{
access_token: '1234-4567-abcd', // 获取令牌
token_type: 'bearer',
expires_in: 18407342, // 过期时间
scope: 'read',
user: '13445678990'
}
第五步: 后端获取到了用户的手机号,用手机号和token拼接url,请求授权系统,再一步换取该用户的详细信息。
参考阮一峰的文章~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~biu