npm package: @sungaoxiang/vue-sso
Description: SSO component for Vue.js.
Author: sungaoxiang
Latest version: 1.1.0

# vue-sso

> SSO component for [Vue.js](https://vuejs.org/).

## Table of Contents

- [Main](#main)
- [Getting Started](#getting-started)
- [API Methods](#api-methods)
- [SSO Config](#sso-config)
- [Browser Support](#browser-support)
- [Versioning](#versioning)
- [License](#license)

## Main

```text
dist/
├── vue-sso.js        (UMD)
├── vue-sso.min.js    (UMD, compressed)
├── vue-sso.common.js (CommonJS, default)
└── vue-sso.esm.js    (ES Module)
```

## Getting Started

### Install

```shell
npm install @xkeshi/vue-sso
```

### Usage

- Browser: `window.VueSSO`
- CommonJS: `var VueSSO = require('@xkeshi/vue-sso')`
- ES2015: `import VueSSO from '@xkeshi/vue-sso'`

#### Use as a library

```js
import VueSSO from '@xkeshi/vue-sso';

VueSSO.open('/path/to/sso', {
  success: () => {
    console.log('Login success');
    VueSSO.close();
  },
});
```

#### Use as a Vue plugin

```html
<div id="app">
  <button type="button" @click="openSSO">Open SSO</button>
</div>
```

```js
import Vue from 'vue';
import VueSSO from '@xkeshi/vue-sso';

Vue.use(VueSSO);

new Vue({
  el: '#app',
  methods: {
    openOSS() {
      this.$sso.open('/path/to/sso', {
        success: () => {
          console.log('Login success');
          this.$sso.close();
        },
      });
    },
  },
});
```

[⬆ back to top](#table-of-contents)

## API Methods

### open(url[, options])

- **url**:
  - Type: `string`
  - The target SSO url to open.
- **options** (optional):
  - Type: `Object`
- (return value):
  - Type: `Promise`
  - The promise will be resolved when the dialog has shown completely.

Open the SSO dialog.

All the available options:

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `'登录'` | The title of the dialog. |
| width | `number` | `360` | The width of the dialog. |
| zIndex | `number` | `1000` | The z-index of the dialog. |
| backdrop | `boolean` | `true` | Closes the dialog when the modal is clicked. |
| keyboard | `boolean` | `true` | Closes the dialog when the escape key is pressed. |
| success | `Function` | `null` | The login success callback. |
| error | `Function` | `null` | The login error callback. |

### close()

- (return value):
  - Type: `Promise`
  - The promise will be resolved when the dialog has hidden completely.

Close the SSO dialog.

[⬆ back to top](#table-of-contents)

## SSO Config

```js
// In login page
window.addEventListener('message', function (e) {
  var errors = document.querySelector('.errors');
  var error = errors ? errors.textContent : '';
  var body = document.body;
  var data = e.data;

  if (data && data.type === 'check.sso') {
    e.source.postMessage({
      type: error ? 'error.sso' : 'process.sso',
      message: error,
      clientWidth: body.clientWidth,
      clientHeight: body.clientHeight,
      scrollWidth: body.scrollWidth,
      scrollHeight: body.scrollHeight
    }, e.origin);
  }
});
```

```js
// In login success page
window.addEventListener('message', function (e) {
  var body = document.body;
  var data = e.data;

  if (data && data.type === 'check.sso') {
    e.source.postMessage({
      type: 'success.sso',
      clientWidth: body.clientWidth,
      clientHeight: body.clientHeight,
      scrollWidth: body.scrollWidth,
      scrollHeight: body.scrollHeight
    }, e.origin);
  }
});
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
- Internet Explorer 11+

## Versioning

Maintained under the [Semantic Versioning guidelines](http://semver.org/).

## License

[MIT](http://opensource.org/licenses/MIT) © [Xkeshi](http://xkeshi.com)

[⬆ back to top](#table-of-contents)