README
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 登录的姿势:
- 无需登录按钮,加载应用时默认申请 IAM 授权
- 有显式的登录页面,需要登录按钮来触发 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);