bsy-sso-login
TypeScript icon, indicating that this package has built-in type declarations

5.0.3 • Public • Published

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);

其他资源

Readme

Keywords

Package Sidebar

Install

npm i bsy-sso-login

Weekly Downloads

0

Version

5.0.3

License

ISC

Unpacked Size

30.4 kB

Total Files

6

Last publish

Collaborators

  • yizhen.fan