内部系统或者外采系统集成到中台，前端应用接入中台单点登录流程

中台登录

前端应用场景

登录集成

• 钉钉APP内打开，使用钉钉免密登录

• PC端web系统，使用中台单点登录

  统一登录 JSSDK

  npm包名

• gj-sso-sdk@2.1.5

  适配项目

• jssdk使用typescript编写，且与前端框架解耦，支持js或ts项目的编写环境，也支持各种语言框架(React/Vue/Angular/JQuery)的集成

  问题反馈

• 钉钉联系 李洋

  接入流程

  1. PC端web系统

  安装依赖

  yarn add gj-sso-sdk -D
  // or
  npm i gj-sso-sdk -D

原始模板html文件head标签中中引入钉钉jsapi文件

<script src="http://static.gaojin.com.cn/libs/dingtalk-jsapi/2.10.3/index.js"></script>

入口调用

Vue项目**

// 写在App.vue中
<script>
  import SsoSDK from 'gj-sso-sdk'
  export default {
      async mounted(){
      await SsoSDK.config({
          env: 'dev'    //    环境变量值
      })
    }
  }
</script>

// 或直接写在main.js文件
import SsoSDK from 'gj-sso-sdk'
//    通过包装一个async函数，来保证调用sdk时序
async function main(){
    await SsoSDK.config({
    env: 'env'    //    环境变量值
    })
  //    挂载全局，方便调用
    window.SsoSDK = SsoSDK
    let app = new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount("#app");
}
main()

React项目

//    写在root component中
import React from 'react'
import SsoSDK from 'gj-sso-sdk'
export default class Root extends React.Component {
    async componentDidMount(){
      await SsoSDK.config({
        env: 'dev'    //    传入环境变量
    })
  } 
}
ReactDOM.render(<Root />, document.getElementById("root"))

Umi项目

//    app.tsx
import SsoSDK from 'gj-sso-sdk';
import { getQueryString } from '@/utils/utils';
export async function render(defaultRender) {
  console.log('BUILD_ENV => ', BUILD_ENV)
  await SsoSDK.config({
    env: BUILD_ENV,
  });
  window.SsoSDK = SsoSDK;
  await defaultRender();
}

拦截器

前端使用axios拦截器来进行登录鉴权，鉴权逻辑由开发者实现。
以下是如何token携带，以及鉴权未通过后手动调用中台登录的实现demo:

//    请求拦截器
axios.interceptors.request.use(
    config => {
      config.headers["Access-Token"] = SsoSDK.getToken()
  }
)
//    响应拦截器
axios.interceptors.response.use(
    res => {
      //    execute your success callback
  },
  error => {
    //    鉴权失败时调用单点登录逻辑
      if(error.response.status === 401) {
        SsoSDK.configSSO({
          env: 'dev'
      })
    }
  }
)

任何时候需要手动调用中台登录时（无论是否登录），使用SsoSDK.configSSO这个api

2. 钉钉H5微应用

安装依赖

yarn add gj-sso-sdk -D
// or
npm i gj-sso-sdk -D

原始模板html文件head标签中中引入钉钉jsapi文件

<script src="http://static.gaojin.com.cn/libs/dingtalk-jsapi/2.10.3/index.js"></script>

入口文件引入

Vue项目

// 写在App.vue中
<script>
  import SsoSDK from 'gj-sso-sdk'
  export default {
      async mounted(){
      await SsoSDK.config({
          env: 'dev',        //    环境变量值
        jsApiList: [    //    需要授权的api list
            'biz.contact.complexPicker',
          'biz.util.chooseImage',
        ]
      })
    }
  }
</script>

// 或直接写在main.js文件
import SsoSDK from 'gj-sso-sdk'
//    通过包装一个async函数，来保证调用sdk时序
async function main(){
    await SsoSDK.config({
    env: 'env',        //    环境变量值
    jsApiList: [    //    需要授权的api list
        'biz.contact.complexPicker',
      'biz.util.chooseImage',
    ]
    })
  //    挂载全局，方便调用
    window.SsoSDK = SsoSDK
    let app = new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount("#app");
}
main()

React项目

//    写在root component中
import React from 'react'
import SsoSDK from 'gj-sso-sdk'
export default class Root extends React.Component {
    async componentDidMount(){
      await SsoSDK.config({
        env: 'dev',    //    传入环境变量
      jsApiList: [    //    需要授权的api list
            'biz.contact.complexPicker',
          'biz.util.chooseImage',
        ]
    })
  } 
}
ReactDOM.render(<Root />, document.getElementById("root"))

Umi项目

//    app.tsx
import SsoSDK from 'gj-sso-sdk';
import { getQueryString } from '@/utils/utils';
export async function render(defaultRender) {
  console.log('BUILD_ENV => ', BUILD_ENV)
  await SsoSDK.config({
    env: BUILD_ENV,
    jsApiList: [    //    需要授权的api list
        'biz.contact.complexPicker',
      'biz.util.chooseImage',
    ]
  });
  window.SsoSDK = SsoSDK;
  await defaultRender();
}

拦截器

前端使用axios拦截器来进行登录鉴权，鉴权逻辑由开发者实现。
以下是如何token携带，以及鉴权未通过后手动调用中台登录的实现demo:

//    请求拦截器
axios.interceptors.request.use(
    config => {
      config.headers["Access-Token"] = SsoSDK.getToken()
  }
)
//    响应拦截器
axios.interceptors.response.use(
    res => {
      //    execute your success callback
  },
  error => {
    //    鉴权失败时调用单点登录逻辑
      if(error.response.status === 401) {
        SsoSDK.configSSO({
          env: 'dev'
      })
    }
  }
)

任何时候需要手动调用钉钉免密登录授权，使用SSOLogin.config这个api

3. API 文档-属性

SsoSDK.configuation

config配置项对象

SsoSDK.configuation
//    返回
{
    env: 'dev,
  jsApiList: ['dd.biz.contact']
}

SsoSDK.accessTokenCookieKey

中台登录后存储在cookie中的token-key

[ENV].sso.login.account.operation.auth

SsoSDK.accessTokenCookieKey
//返回
"dev.sso.login.account.operation.auth"     //    dev环境
"test.sso.login.account.operation.auth" //    test环境
"uat.sso.login.account.operation.auth"     //    uat环境
"sso.login.account.operation.auth"             //    生产环境

SsoSDK.runtimeDeviceEnv

当前环境

SsoSDK.runtimeDeviceEnv
//    返回
"dev"

4. API文档-方法

SsoSDK.config

初始化配置，开发者需注意，config方法会自动识别当前运行端环境是钉钉应用还是非钉钉应用，但jsApiList在钉钉应用中为必传参数。当未登录时，钉钉应用会自动调用登录，非钉钉应用会跳转中台单点登录。

参数列表

export interface SSOLoginConfig {
  //  调用环境
  env: EnvType
  //  cookie域名写入，勿传，仅供调试用
  domain?: string;
  //  jsApiList 调用钉钉免密时必传
  jsApiList?: Array<string>
  //  是否开启session级别登录保护
  withSession?: boolean
  //  鉴权url
  url?: string
}

SsoSDK.configSSO

强制调用中台单点登录，只能在非钉钉应用内调用。

参数列表，同config

SsoSDK.configSSO({
    env: 'dev'
})

SsoSDK.hasToken

查询cookie中是否已存在token

SsoSDK.hasToken()
//    返回
true

SsoSDK.getToken

获取token

SsoSDK.getToken()
//    返回
"ejljdfjl1nldfjljldjldg8309hfh7gho5s6hl23p"

SsoSDK.setDDConfig

手动调用钉钉鉴权

await SsoSDK.setDDConfig();