### Install bsy-sso-login package

Source: https://www.npmjs.com/package/bsy-sso-login?activeTab=dependencies

Commands to install the SDK using popular package managers.

```bash
npm i -S bsy-sso-login
```

```bash
yarn add bsy-sso-login
```

--------------------------------

### Trigger SSO authorization via a login button (React)

Source: https://www.npmjs.com/package/bsy-sso-login

This example demonstrates how to trigger SSO authorization using a login button in a React component. The `redirect2AuthPage` function from `bsy-sso-login` is used to initiate the redirect to the IAM authorization page. This approach is suitable when explicit user interaction is required to start the login process.

```javascript
import React from "react";
import { Button } from "antd";
import { redirect2AuthPage } from "bsy-sso-login";

const Login = () => {
  const handleClick = () => {
    redirect2AuthPage();
  };

  return <Button onClick={handleClick}>登录</Button>;
};
export default Login;

```

--------------------------------

### Configure SSO Environment Variables

Source: https://www.npmjs.com/package/bsy-sso-login?activeTab=code

Required environment configuration for development and production environments, including client ID and redirect URLs.

```text
# .env.development
REACT_APP_SSO_CLIENT_ID='purchase-workbench'
REACT_APP_SSO_ENVIRONMENT="development"
REACT_APP_SSO_REDIRECT_URL="http://localhost:8000"
```

```text
# .env.production
REACT_APP_SSO_CLIENT_ID='purchase-workbench'
REACT_APP_SSO_ENVIRONMENT="production"
REACT_APP_SSO_REDIRECT_URL="http://xxx"
```

--------------------------------

### Initialize SSO Authentication

Source: https://www.npmjs.com/package/bsy-sso-login?activeTab=dependencies

Integration of the ssoLogin function in the application entry point (src/index.js) to ensure authentication occurs before rendering the React application.

```javascript
import ssoLogin from "bsy-sso-sdk";

ssoLogin(clientId).then((accessToken) => {
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById("root")
  );
});
```

--------------------------------

### Configure SSO environment variables for development and production

Source: https://www.npmjs.com/package/bsy-sso-login

These code snippets demonstrate how to set up environment variables for SSO integration. REACT_APP_SSO_CLIENT_ID, REACT_APP_SSO_ENVIRONMENT, and REACT_APP_SSO_REDIRECT_URL are crucial for configuring the SSO client, environment, and redirect behavior.

```dotenv
// .env.development

# OSSO微服务地址
REACT_APP_SSO_CLIENT_ID='purchase-workbench'
REACT_APP_SSO_ENVIRONMENT="development"
REACT_APP_SSO_REDIRECT_URL="http://localhost:8000"

```

```dotenv
// .env.production

# OSSO微服务地址
REACT_APP_SSO_CLIENT_ID='purchase-workbench'
REACT_APP_SSO_ENVIRONMENT="production"
REACT_APP_SSO_REDIRECT_URL="http://xxx"

```

--------------------------------

### Initialize SSO authorization on application load (React)

Source: https://www.npmjs.com/package/bsy-sso-login

This JavaScript code snippet shows how to integrate the bsy-sso-sdk to automatically initiate IAM authorization when the application loads. It's intended to be placed in `src/index.js` before rendering the main application component. The `ssoLogin` function handles the authorization flow and returns an access token upon successful authentication.

```javascript
// src/index.js
import ssoLogin from "bsy-sso-sdk";

ssoLogin(
  clientId // 后端对接 IAM 后，会生成一个对接 ID，需要找后端同学要
).then((accessToken) => {
  // 对接函数返回一个用户信息的对象数据
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById("root")
  );
});

```

--------------------------------

### Configure SSO Environment Variables

Source: https://www.npmjs.com/package/bsy-sso-login?activeTab=dependencies

Environment configuration required for SSO integration, including client ID, environment type, and redirect URLs for development and production.

```env
REACT_APP_SSO_CLIENT_ID='purchase-workbench'
REACT_APP_SSO_ENVIRONMENT="development"
REACT_APP_SSO_REDIRECT_URL="http://localhost:8000"
```

```env
REACT_APP_SSO_CLIENT_ID='purchase-workbench'
REACT_APP_SSO_ENVIRONMENT="production"
REACT_APP_SSO_REDIRECT_URL="http://xxx"
```

--------------------------------

### Implement Manual Login Trigger

Source: https://www.npmjs.com/package/bsy-sso-login?activeTab=dependencies

Using the redirect2AuthPage function within a React component to trigger the IAM authorization flow via a button click.

```jsx
import React from "react";
import { Button } from "antd";
import { redirect2AuthPage } from "bsy-sso-login";

const Login = () => {
  const handleClick = () => {
    redirect2AuthPage();
  };

  return <Button onClick={handleClick}>登录</Button>;
};
```

--------------------------------

### Perform IAM logout

Source: https://www.npmjs.com/package/bsy-sso-login

This snippet shows how to log out from IAM using the `logoutIAM` function provided by the bsy-sso-login package. It can optionally accept a `frontend_redirect_url` to redirect the user to a specific client-side page after logout.

```javascript
import { logoutIAM } from "bsy-sso-login";

// 在需要退出登录的地方
logoutIAM();

// 若需要退出登录后回调到指定到客户端页面，则：
logoutIAM(frontend_redirect_url);

```

--------------------------------

### Execute IAM Logout

Source: https://www.npmjs.com/package/bsy-sso-login?activeTab=dependencies

Functionality to log out the user from the IAM system, with an optional parameter to specify a redirect URL after logout.

```javascript
import { logoutIAM } from "bsy-sso-login";

// Basic logout
logoutIAM();

// Logout with redirect
logoutIAM(frontend_redirect_url);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.