@blackbaud/auth-客户端
提供客户端库用于与 Blackbaud 认证交互.
安装
- 确保您拥有节点v6+和国家预防机制v3+。 要验证, 运行
node -v财务报告和审定财务报表npm -v在命令线. - 通过运行将库安装为您的项目的依赖性
npm install @blackbaud/auth-client --save在您的项目文件夹中 .
使用量
先决条件
认证客户端库广泛使用 ES6型承诺,所以为了支持还没有本地支持“承诺”的浏览器(如Internet Explorer 11),您需要包含“承诺”的多填充,例如 es6-promise 并使用 自动填充特性 用于图书馆的 Promise 被添加到全球环境中。 这将需要在认证客户端库前加载到您的页面 .
ES6/ 类型脚本
此套件中有两个类: BBAuth 财务报告和审定财务报表 BBOmnibar。 。 。 . BBAuth 允许您从 Blackbaud 认证服务中获取一个认证符,以及 BBOmnibar 允许您在页面的顶端制作 omnibar .
您可以组合使用这些来整合您的应用程序与 Blackbaud 认证 .
import { BBAuth, BBOmnibar } from '@blackbaud/auth-client';
// Make an initial attempt to get an auth token. If the user is not currently logged in,
// this code will redirect the browser to Blackbaud's sign-in page.
BBAuth.getToken()
.then(() => {
// The user is logged in; load the omnibar.
BBOmnibar.load({
serviceName: 'Some service name'
});
// Add additional logic to bootstrap the rest of the application.
});
要向您的网络服务端点发出授权请求, 您也会使用 BBAuth.getToken() 用于获取一个可以添加到您请求中作为信头的符号的方法。 由于获取一个符号是同步操作,此方法返回 a Promise,所以你应该等到"承诺"实现后,才发出你的网络请求.
import { BBAuth } from '@blackbaud/auth-client';
BBAuth.getToken()
.then((token: string) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.send();
});
香草爪哇脚本/ES5
Auth客户端也作为UMD捆绑分发. 如果你使用ES5 带节点或者像浏览器这样的工具 require() 内容:
var BBAuthClient = require('@blackbaud/auth-client');
BBAuthClient.BBOmnibar.load({
serviceName: 'Some service name'
});
如果您不使用模块加载器, 或者更愿意通过 CDN 引用文件, 您可以通过 CDN 将文件加载到您的页面 <script> 标签.
如果使用国家预防机制,请添加提及 dist/bundles/auth-client.umd.js 或将该文件与您页面的其余 JavaScript 合并.
如果使用SKY UX CDN,请添加引用 https://sky.blackbaudcdn.net/static/auth-client/[VERSION]/auth-client.global.min.js时 [VERSION] 您想要使用的版本 。 所有向国家预防机制发布的版本也可通过CDN查阅。 也可以参考最新的主要版本. 示例版本:
https://sky.blackbaudcdn.net/static/auth-client/2.24.0/auth-client.global.min.jshttps://sky.blackbaudcdn.net/static/auth-client/2/auth-client.global.min.js
你现在可以通过全球访问 BBAuthClient 变量 :
// BBAuthClient is global here.
BBAuthClient.BBOmnibar.load({
serviceName: 'Some service name'
});