@ace-auth/sdk-browser 中文文档教程

Question

Ace authorisation SDK

Install

npm install @ace-auth/sdk-browser 或 yarn add @ace-auth/sdk-browser

Use cases

SDK 使用 umd 模块声明。 所以你可以使用它，比如节点模块系统（commonjs），amd 或 在浏览器中全局。

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 = {};
  }
}