Back to Sa Token

Sa

sa-token-demo/sa-token-demo-oauth2/sa-token-demo-oauth2-client-h5/index.html

1.45.03.0 KB
Original Source

Sa-Token-OAuth2 Client 端 测试页

注:为方便测试,此处将应用秘钥等敏感信息采用前端填写式,真实项目应该改为后端配置。


配置信息

OAuth2 Server 主机地址:

OAuth2 Server 授权页地址:

OAuth2 Server 获取 token 地址:

OAuth2 Server 刷新 token 地址:

OAuth2 Server 获取 userinfo 地址:

根据主机 URL 一键拼接授权页等地址

Client Id:

Client Secret:

重定向授权地址:

请求 Scope (多个用逗号/空格隔开):

清空配置恢复默认配置一键填写 Gitee 参数样例一键填写 Sa-Sso-Max 参数样例回到首页


模式一:授权码(Authorization Code)

授权码:OAuth2.0标准授权流程,先 (重定向) 获取Code授权码,再 (Rest API) 获取 Access-Token 和 Openid 等信息

1、获取授权码

构建授权地址→ 访问上述授权地址
从 URL 上读取到的 code 为:

2、获取 Access-Token

构建 code 换 Access-Token 接口地址→ 请求上述地址,获取 Access-Token 数据 请求结果显示如下:

3、刷新 Access-Token

构建刷新 Access-Token 接口地址 请先填写 Refresh-Token 值:

我们可以拿着 Refresh-Token 去刷新我们的 Access-Token,每次刷新后旧Token将作废

→ 请求上述地址,刷新 Access-Token 请求结果显示如下:

4、获取 Userinfo

构建刷新 Userinfo 接口地址 请先填写 Access-Token 值:

使用 Access-Token 置换资源: 获取账号昵称、头像、性别等信息 (Access-Token具备userinfo权限时才可以获取成功)

→ 请求上述地址,获取 Userinfo 信息 ( 请求 Method: GETPOSTPUTDELETEHEADOPTIONS ) 请求结果显示如下:

5、回收 Access-Token

构建回收 Access-Token 接口地址

回收后,该 Access-Token 将无法再使用(点击上面的 Userinfo 接口试一试)

→ 请求上述地址,回收 Access-Token 请求结果显示如下:

模式二:隐藏式(Implicit)

越过授权码的步骤,直接返回token到前端页面( 格式:http://domain.com#token=xxxx-xxxx

构建授权地址→ 访问上述授权地址
从 URL 上读取到的 Access-Token 为:

模式三:密码式(Password)

注解在 OAuth2-Client 端,输入用户名和密码获取 Access-Token,此模式只适用于高度信任的客户端

构建授权地址  账号:  密码:→ 请求上述地址,获取 Access-Token 数据 请求结果显示如下:

模式四:凭证式(Client Credentials)

以上三种模式获取的都是用户的 Access-Token,代表用户对第三方应用的授权,在OAuth2.0中还有一种针对 Client级别的授权, 即:Client-Token,代表应用自身的资源授权

构建 Client-Token 授权地址→ 请求上述地址,获取 Access-Token 数据 请求结果显示如下:

更多资料请参考 Sa-Token 官方文档地址:https://sa-token.cc/