README
Ace authorisation SDK
Install
npm install @ace-auth/sdk-browser
or yarn add @ace-auth/sdk-browser
Use cases
SDK uses umd module declaration. So you can use it such as node module system (commonjs), amd or globally in browser.
Parameters
Name | Default value | Description | |
---|---|---|---|
aceEndpoint |
Required | Ace-ui endpoint. | |
autorefresh |
Optional | false |
Refresh tokens automatically. (onAceEndpoint should be set) |
clientId |
Required | Ace client ID. | |
debug |
Optional | false |
Verbose output |
defaultRedirectUri |
Optional | Default url for signIn, signUp, signOut methods | |
flags |
Optional | {} |
Available flags: { nosso: boolean } |
locale |
Optional | "en-US" |
Locale. Available locales 'en-US' or 'zh-CN' |
onTokens |
Optional | Callback on new tokens received | |
ownAceEndpoint |
Optional | Client ace backend endpoint. | |
signInRedirectUri |
Optional | Url for signIn method. | |
signOutRedirectUri |
Optional | Url for signOut method. | |
signUpRedirectUri |
Optional | Url for signUp method. | |
storage |
Optional | window.localStorage |
Storage implementing window.localStorage interface. |
storageKey |
Optional | "ace-sdk-tokens" |
Token's storage key |
Methods
Name | Return value | Description |
---|---|---|
clearStorage() | Promise<void> |
Clears storage data |
getTokens() | Promise<ITokens> |
Returns client tokens |
getOriginUrl() | string |
Returns origin url before signIn or signUp |
getSignInUrl() | string |
Returns ace sign in url |
getSignUpUrl(params?: { referrer?: string }) | string |
Returns ace sign up url |
on(event: string, cb: (tokens:ITokens)) => void) | void |
Subscribes to event |
off(event: string, cb: (tokens:ITokens)) => void) | void |
Unsubscribes from event |
setLocale(locale: 'en-US'|'zh-CN') | 'en-US' |'zh-CN' |
Sets locale for ACE class |
signIn() | Promise<ITokens |void> |
Starts sign in flow if anonymous user, returns tokens if logged in |
signOut() | Promise<void> |
Starts sign out flow |
signUp(params?: { referrer?: string }) | void |
Starts sign in flow |
Interfaces
interface ITokens {
access_token: string;
id_token: string;
}
Examples
es modules (typescript)
class App extends React.Component {
signIn() {
ace.signIn().then(data => {
if (data && data.access_token && data.id_token) {
alert('already logged');
}
});
}
signUp() {
ace.signUp();
}
logout() {
ace.signOut();
}
getTokens() {
ace
.getTokens()
.then(tokens => {
alert(JSON.stringify(tokens, null, 2));
})
.catch(() => {
alert('unathorized');
});
}
render(): React.ReactNode {
return (
<div className="App">
<header className="App-header">
<div className="App-buttons">
<button onClick={this.signIn.bind(this)}>Sign In</button>
<button onClick={this.signUp.bind(this)}>Sign Up</button>
<button onClick={this.logout.bind(this)}>Logout</button>
<button onClick={this.getTokens.bind(this)}>getTokens</button>
</div>
</header>
</div>
);
}
}
export default App;
CommonJs
const React = require('react');
const AceSdk = require('@ace-auth/sdk-browser');
// Example storage below.
const Storage = require('./storage');
const ace = new AceSdk.CreateClient({
aceEndpoint: 'http://example.com',
ownAceEndpoint: 'http://example.com',
clientId: '<clientId>',
signInRedirectUri: 'http://example.com/',
signUpRedirectUri: 'http://example.com/',
storage: new Storage(),
locale: 'en-US',
});
class App extends React.Component {
signIn() {
ace.signIn().then(data => {
if (data && data.access_token && data.id_token) {
alert('already logged');
}
});
}
signUp() {
ace.signUp();
}
logout() {
ace.signOut();
}
getTokens() {
ace
.getTokens()
.then(tokens => {
alert(JSON.stringify(tokens, null, 2));
})
.catch(() => {
alert('unathorized');
});
}
render() {
return (
<div className="App">
<header className="App-header">
<div className="App-buttons">
<button onClick={this.signIn.bind(this)}>Sign In</button>
<button onClick={this.signUp.bind(this)}>Sign Up</button>
<button onClick={this.logout.bind(this)}>Logout</button>
<button onClick={this.getTokens.bind(this)}>getTokens</button>
</div>
</header>
</div>
);
}
}
export default App;
global
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script defer src="https://unpkg.com/@ace-auth/sdk-browser"></script>
<script defer>
window.ace = new window.AceSdk.CreateClient({
aceEndpoint: '<%=aceUrl %>',
ownAceEndpoint: location.origin,
clientId: '<%=clientId %>',
signInRedirectUri: location.origin,
signUpRedirectUri: location.origin,
});
document.getElementById('login-button').onclick = function () {
ace.signIn();
};
document.getElementById('signin-button').onclick = function () {
ace.signUp({ referrer: '<userValidEmail>' });
};
document.getElementById('signout-button').onclick = function () {
ace.signOut();
};
</script>
<title>Simple App</title>
</head>
<body>
<button id="login-button">Login</button> <button id="signin-button">Sign Up</button>
<button id="signout-button">Sign Out</button>
</body>
</html>
storage
export default class Storage {
constructor() {
this._store = {};
}
getItem(key) {
return this._store[key] || null;
}
setItem(key, value) {
this._store[key] = value.toString();
}
removeItem(key: string) {
this._store[key] = null;
}
clear() {
this._store = {};
}
}