bsy-sso-login v5.0.6

bsy-sso-login 使用文档

（适用于 5.X 版本）

bsy-sso-login 是前端对接 SSO 登录的 sdk。

1. 安装

npm i -S bsy-sso-login

或者

yarn add bsy-sso-login

2. 在代码中使用

bsy-sso-login 提供两种对接 SSO 登录的姿势:

1. 无需登录按钮，加载应用时默认申请 IAM 授权
2. 有显式的登录页面，需要登录按钮来触发 IAM 授权

以下分别介绍两种模式的对接示例：

加载应用时默认申请 IAM 授权

你可以在 React 渲染前做好 IAM 授权登录的相关工作，所以你可以将对接逻辑放在 src/index.js 中：

首先，添加环境变量

// .env.development

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

// .env.production

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

在 src/index.js 中：

// 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")
  );
});

需要登录按钮来触发 IAM 授权

你可以在 React 渲染前做好 IAM 授权登录的相关工作（解析授权链接、使用 code 来请求 token 等），所以你可以将对接逻辑放在 src/index.js 中， 并将触发重定向到授权链接的动作放在登录页面：

首先，添加环境变量

// .env.development

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

// .env.production

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

在 src/index.js 中：

// 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")
  );
});

在 Login.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>;
};
export default Login;

在 IAM 退出登录

不管是哪种登录姿势，退出登录都是使用以下 API

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

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

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

其他资源

• 版本 1 的 SDK 的对接文档
• 版本 2 的 SDK 的对接文档
• 版本 3 的 SDK 的对接文档
• 更新日志