SDK开发（根据集成成熟度提供不同开发模式）

门户Portal

React

• 引入SDK

npm install ciam-spa-sdk

• SDK实例化 SpaClient初始化至少需要传入clientId、userDomain、redirectUri。

import {SpaClient} from 'ciam-spa-sdk';

const authService= new SpaClient({
	clientId: "xxx",
	userDomain: "https://sample/xxx",
	logoutRedirectUrl: "https://sample/xxx",
	redirectUri: "https://sample/xxx",
	scopes: ['openid'],
});

完整的SpaClient可选参数如下表所示： | 参数 | 是否必填 | 说明 | 默认值| | :---: | :---: | :---: | :---: | | clientId | 是 | 应用Id | - | | userDomain | 是 | 用户域名 | - | | redirectUri | 是 | 登录成功后的跳转地址 | - | | logoutRedirectUrl | 否 | 登出成功后的跳转地址 | - | | scopes | 否 | ['openid'] | - | | clientSecret | 否 | 应用密钥| - | | timeout| 否 | 请求超时时间 | - | | protocol | 否 | 协议方式 | oidc | | refreshSlack | 否 | 更新时间 | - | SDK初始化的应用相关参数可以在管理端查看获取。更详细的参数说明请参考开发文档。

• 发起登录 通过调用login()方法发起登录，跳转至门户登录页。以下为发起登录的代码示例。

import { SpaClient, AuthProvider } from "ciam-spa-sdk";

function LoginButton({text}) {
  const [authService, setAuthService] = useState(null);

  useEffect(() => {
    //SDK实例化
    const authService= new SpaClient({
      clientId: "xxx",
      logoutRedirectUrl: "https://sample/xxx",
      userDomain: "https://sample/xxx",
      redirectUri: "https://sample/xxx",
      scopes: ['openid'],
    });
    setAuthService(authService);
  }, []); 

  return (
    <>
      { authService && <Button type="primary" onClick={()=>authService.login()}>{text}</Button> }
    </>
  )
}

• 获取用户信息 用户登录授权后，可通过getUser()方法获取用户相关信息字段。获取的信息字段可在CIAM管理端登录流程的claim字段中配置。

const getUser= () => {
  // 通过getUser方法获取解析后的用户信息
  const u = authService?.getUser();
  setUser(u);
};

• 登出 通过调用logout()方法登出。以下为登出的代码示例。

const logout = () => {
  authService.logout();
}