@cashier/web

SDK of webinfra service for User & License management

Introduction

You can use the SDK to quickly integrate authentication & license & payment capabilities for new or existing web applications

Demo

import React, { useCallback, useEffect, useMemo, useState } from "react";
import Cashier from '@cashier/web';
import {
  TUserInfo,
} from "@cashier/web";
function App() {
  const sdk = useMemo(() => {
    return new Cashier({
      // 应用 ID
      appId: process.env.REACT_APP_SDK_APPID as string,
      appToken: process.env.REACT_APP_SDK_TOKEN as string,
      //   domain: 'https://test-sdk-api.my.webinfra.cloud'
      privacyLink: 'https://your-docs-link.com/privacy.html',
      version: 4,
    });
  }, []);

  const [loginState, setLoginState] = useState<TUserInfo | null>();
  const [resource, setResource] = useState<object | null>();
  const [canResp, setCanResp] = useState<object | null>()
  const [products, setProducts] = useState([]);

  useEffect(() => {
    sdk.init();
  }, [])
  /**
   * 以弹窗方式打开 Cashier 托管的登录页
   */
  const loginWithPopup = async () => {
    const res = await sdk.login({
      forced: true
    });
    setLoginState(res);
  };

  const loginWithPopupWithCache = async () => {
    const res = await sdk.login({
      forced: false
    });
    setLoginState(res);
  };

  /**
   * 获取用户的登录状态
   */
  const getLoginState = useCallback(async () => {
    const state = await sdk.getUserInfo();
    console.debug('loginState: ', state)
    setLoginState(state);
  }, [sdk]);

  
  const cleanLoginState = useCallback(async () => {
    const state = await sdk.logout();
    console.debug('loginState: ', state)
    setLoginState(null);
  }, [sdk]);

  const can = (plan: number) => {
    return async (e: any) => {
      console.debug('go to verify Product Level');
      const resp = await sdk.can({
        plan,
        auto: true
      });
      console.debug('can resp: ', resp);
      setCanResp(resp)
      return;
    }
  }

  const productsList = async (e: any) => {
    e.preventDefault();
    const p = await sdk.getProducts()
    setProducts(p);
  }

  return (
    <div>
      <h2>快速集成 Cashier SDK Demo</h2>
      <p>
        <button onClick={loginWithPopup}>login with popup</button>
        <button onClick={loginWithPopupWithCache}>login with popup with cache</button>
        <button onClick={getLoginState}>getLoginState</button>
        <button onClick={cleanLoginState}>cleanLoginState</button>
        {/* <button onClick={purchase}>purchase</button> */}
        <button onClick={can(1)}>can - plan(1)</button>
        <button onClick={can(2)}>can - plan(2)</button>
      </p>
      <p>
        <button onClick={productsList}> products </button>
      </p>
      <p>
        {loginState && (
          <textarea
            cols={100}
            rows={20}
            readOnly
            value={JSON.stringify(loginState, null, 2)}
          ></textarea>
        )}
      </p>
      <p>
        {resource && (
          <textarea
            cols={100}
            rows={5}
            value={JSON.stringify(resource, null, 2)}
          ></textarea>
        )}
      </p>
      <p>
        {canResp && (
          <textarea
            cols={100}
            rows={5}
            value={JSON.stringify(canResp, null, 2)}
          ></textarea>
        )}
      </p>
      <p>
        {products && (
          <textarea
            cols={100}
            rows={5}
            value={JSON.stringify(products, null, 2)}
          ></textarea>
        )}
      </p>
    </div>
  );
}

export default App;

SDK Init Props

export interface CashierOptions {
  /**
   * 认证域名
   *
   * 如果应用未开启单点登录，使用应用域名；如果应用开启了单点登录，使用用户池域名
   */
  domain?: string // TODO: 认证模型调整后统一使用用户池域名
  storageType?: string // 支持插件chrome.storage.sync - 'chrome'

  pageDomain?: string // 登录页面域名
  mobile?: boolean // 是否是移动端页面，适配
  mobileSessId?: string // 移动端跳转的回调ID
  redirect?: boolean // 跳转模式还是弹窗模式，Default: false
  inPage?: boolean // 页面交互方式 弹窗（默认）或者iframe, Default: false
  root?: string // root container for in page popup
  hidePurchase?: boolean // hide purchsae button in the page
  version?: number // SDK 版本号，例如：4，Default: undefined
  privacyLink?: string // 用户隐私协议url
  authTypes?: string // 支持的登录方式，默认ab - a: Email b: Wechat, 例如 authTypes=ab
  /**
   * 应用 ID
   */
  appId: string

   /**
   * 应用 Token
   */
   appToken: string

  debug?: boolean

  /**
   *
   * 对应用户信息的子集
   */
  scope?: string

  /**
   * 弹出窗口的宽度
   */
  popupWidth?: number

  /**
   * 弹出窗口的高度
   */
  popupHeight?: number
}