授权
与HTTP授权相关的UI和逻辑.
使用量
安装
npm install --save @advanced-rest-client/authorization
构成部分
授权选择器
使用 authorization-method 制作一个选取式的授权方法箱.
<authorization-selector
horizontal
multi
>
<!-- None option -->
<div type="none" aria-describedby="noneDesc">Authorization configuration is disabled</div>
<p id="noneDesc" slot="aria">Select authorization method required by the API.</p>
<!-- HTTP basic authorization -->
<authorization-method type="basic" aria-describedby="basicDesc"></authorization-method>
<p id="basicDesc" slot="aria">
Basic authorization allows to send a username and a password in a request header.
</p>
<!-- Bearer token authorization -->
<authorization-method type="bearer" aria-describedby="tokenDesc"></authorization-method>
<p id="tokenDesc" slot="aria">
Bearer authorization allows to send an authentication token in the authorization header using the "bearer" method.
</p>
<!-- ... -->
</authorization-selector>
授权方法
这个 authorization-method 元素生成一个表格,其中包含与该清单界定的核准计划有关的投入 type 属性.
<authorization-method
type="oauth 2"
redirectUri="https://..."
authorizationUri="https://..."
accessTokenUri="https://..."
clientId="test-client-id"
grantType="authorization_code"
pkce
></authorization-method>
双镜选择器
一个专门选择 OAuth 2 范围的输入 .
<oauth2-scope-selector
required
autoValidate
allowedScopes='["user", "user:email", "user:follow", "..."]'
></oauth2-scope-selector>
OAuth 授权
import { OAuth2Authorization } from '@advanced-rest-client/oauth-authorization';
const settings = {
grantType: 'implicit',
clientId: 'CLIENT ID',
redirectUri: 'https://example.com/auth-popup.html',
authorizationUri: 'https://auth.example.com/token',
scopes: ['email'],
state: 'Optional string',
};
const factory = new OAuth2Authorization(settings);
const tokenInfo = await factory.authorize(settings)
在授权流中弹出
此软件包包含 oauth-popup.html ,用于与主机页面交换令牌/代码数据。 其他页面也可以使用.
弹出页面必须使用 window.postMessage() 向库报告授权服务器返回的参数。 它期望返回包含授权结果的URL部分.
例如,对于有这样的值的弹出url: https://redirect.domain.com/popup.html#code=1234&state=5678 弹出窗口应该以 code=1234&state=5678。 。 。 .
状态参数和安全
此元素被打算用于已密闭已失密的调试应用程序,因为用户可能被要求提供客户端秘密参数(取决于流量). 不应用于客户端应用程序 这不服务调试目的。 客户端不应使用客户端的秘密.
为了至少得到最低限度的保护(在已经受到损害的环境中),这个库将产生一个 state 参数作为一系列的字母数字字符并将其附加到请求中.
它预计将在响应中返回相同的字符串(如rfc6749所定义). 虽然这个参数是可选的,但如果 state 参数与请求前生成的参数不同.
如果设置中不提供状态参数,则由元素自动生成。 使用此属性来检查事件响应( 无论是信使还是错误) 是否来自您对信使的请求, 是一个好主意 。 应用程序可以 支持不同的 OAuth 客户端, 这样您可以在稍后使用符号响应来检查是否是同一客户端的响应 .
非交互式授权
对于 implicit 财务报告和审定财务报表 authorization_code 您可以设置符号请求 interactive 配置属性为 false 在背景中请求符号,而不向用户提供与授权相关的任何UI.
它可用于在用户授权应用程序后请求访问令牌. 服务器应返回将返回应用程序的符号 .
预先定义的客户证书
为了在测试环境中方便用户(类似测试或文档工具),我们可以定义一个在OAuth 2编辑器中以下放选择器提供的客户资格(客户身份和客户秘密)列表. 这样用户可以选择使用其中一种证书,而手动提供.
const credentialsSource = [{
grantType: 'client_credentials',
credentials: [
{
name: 'My social Network',
clientId: '123',
clientSecret: 'xyz'
}, {
name: 'My social Network 2',
clientId: '9876',
clientSecret: 'abc'
}
]
}];
const editor = document.querySelector('authorization-method[oauth 2]');
editor.credentialsSource = credentialsSource;
发展
git clone https://github.com/advanced-rest-client/authorization
cd authorization
npm install
本地运行演示
npm start
运行测试
npm test
鸣谢
所需依赖关系
这个 CryptoJS 财务报告和审定财务报表 RSAKey 库不包含在元素源中.
如果您的工程没有使用此库, 已经将它包含在您的工程中 .
npm i cryptojslib jsrsasign
<script src="../../../cryptojslib/components/core.js"></script>
<script src="../../../cryptojslib/rollups/sha1.js"></script>
<script src="../../../cryptojslib/components/enc-base64-min.js"></script>
<script src="../../../cryptojslib/rollups/md5.js"></script>
<script src="../../../cryptojslib/rollups/hmac-sha1.js"></script>
<script src="../../../jsrsasign/lib/jsrsasign-rsa-min.js"></script>
还有OAuth1元素用途 URL 分类 searchParams 属性。 如果瞄准的旧浏览器中也包含此的多填充 .