# 合能创越统一管理平台:
http://192.168.2.21:22565/user/login
账号：admin
密码：1234567 
若需要访问admin，有IP限制，联系徐海加ip白名单
新都账号，不需白名单ip：xhm_admin   123456
# 使用文档

登陆有三种界面模式 'default' | 'iframe'|'urlVerify'， default 模式即为统一界面样式版本，iframe 为界面高度定制化使用版本因为它只会展示登陆核心主体。<br/> 这两种方式的参数都是相同的，只是展示方式不同，在完成登陆后我们会在回调地址中赋予 access_token，这个 token 是用来获取用户信息的，具体使用方式可以参考用户信息获取文档。

#### tips：

一般 iframe 模式都是在需要登陆样式定制化的情况下使用，你可以在你当前的项目下创建你的登陆页面，然后在登陆页面中使用 iframe 标签进行登陆主体的访问。

#### 参数说明：

- **样式模式**：viewType: 'default' | 'iframe';

  - **default**:默认样式
  - **iframe**:框架样式
  - **urlVerify**:链接验证 需要传入账号和密码,样式自定义，登录验证后成功或失败都返回 redirect_uri

- **项目回调地址**：redirect_uri: string;(需要 base64 加密)
- **客户端 ID**：client_id: string;(需要 base64 加密)
- **客户端密钥**：client_secret: string;(需要 base64 加密)
- **欢迎标题文字关闭**：close_title: 'yes' | 'no';（非必传）
<!-- urlVerify模式使用： -->
- **账号** username: string;（必传）
- **密码** password: string;（必传）

#### 一、default 模式调用方式示例代码：

js-base64 安装

```bash
$ yarn add js-base64 // 或 npm 或 pnpm
```

```ts
import { Base64 } from 'js-base64';

let redirect_uri = Base64.encode(window.location.origin + '/home');
let client_id = Base64.encode('xxxx'); //户端 ID
let client_secret = Base64.encode('xxxx'); //客户端密钥
//登录服务环境
location.href = `${'http://ip:port'}?redirect_uri=${redirect_uri}&client_id=${client_id}&client_secret=${client_secret}&viewType=default&close_title=no`;
```

#### 二、iframe 模式调用方式示例代码：

```tsx
let redirect_uri = Base64.encode(window.location.origin + '/home');
let client_id = Base64.encode('xxxx'); //户端 ID
let client_secret = Base64.encode('xxxx'); //客户端密钥

<iframe
  src={
    'http://ip:port/?viewType=iframe&redirect_uri=' +
    redirect_uri +
    '&client_id=' +
    client_id +
    '&client_secret=' +
    client_secret +
    '+&close_title=no'
  }
/>;
```

#### 三、urlVerify 模式调用方式示例代码：

```tsx
1、在Login组件中，点击登录后，拼装所需参数链接，
// 以下参数必传，缺一不可   viewType=urlVerify(必须设置此参数)
let redirect_uri = Base64.encode(window.location.origin); //验证后定向地址
let client_id = Base64.encode('xxxx'); //客户端 ID
let client_secret = Base64.encode('xxxx'); //客户端密钥
let username = Base64.encode('xxxx'); //账号
let password = Base64.encode('xxxx'); //密码
链接示范：
let authUrl = `http://ip:port?viewType=urlVerify&redirect_uri=${redirect_uri}&client_id=${client_id}
      &client_secret=${client_secret}&username=${username}&password=${password}`;

代码示范：
  // 表单校验通过，点击登录按钮
  const onFinish = (values: { username: string; password: string }) => {
    let redirect_uri = Base64.encode(window.location.origin);
    let client_id = Base64.encode('xindumange'); //客户端 ID
    let client_secret = Base64.encode('xindu@2024'); //客户端密钥
    let username = Base64.encode(values.username); //账号
    let password = Base64.encode(values.password); //密码
    let authUrl = `http://172.23.0.106:8002?viewType=urlVerify&redirect_uri=${redirect_uri}&client_id=${client_id}&client_secret=${client_secret}&username=${username}&password=${password}`;
    window.location.replace(authUrl);
  };

2、在Layouts组件中
  useEffect(() => {
    if (getSession('access_token')) {
      history.push('/home');
    } else {
      history.push('/login');
    }
  }, []);

3、在app.ts中
  let Request: any = new Object();
  Request = getUrlParams();
  if (Request['access_token']) {
    setSession('access_token', base64ToStr(Request['access_token']));
  }


  // base64转字符串
  1、安装：pnpm i crypto-js
          pnpm i --save-dev @types/crypto-js
  2、将链接的取出的access_token通过base64ToStr转下
  export function base64ToStr(str: string) {
    return CryptoJS.enc.Utf8.stringify(CryptoJS.enc.Base64.parse(str))
  }

```
