# Integration and Usage

## Example apps

* [vue](https://github.com/ontology-tech/ontlogin-sdk-js/tree/main/example/vue-demo)
* [pure HTML](https://github.com/ontology-tech/ontlogin-sdk-js/tree/main/example/html-demo)

## Install and import package

 via NPM [package](https://npmjs.com/package/ontlogin)

```javascript
npm i ontlogin
```

```javascript
import {createAuthRequest} from "ontlogin";
```

via [js bundle](https://github.com/ontology-tech/ontlogin-sdk-js/blob/main/dist/ontlogin.min.js)

```javascript
<script src="ontlogin.min.js"></script>
<script>
    ontlogin.createAuthRequest();
</script>
```

via [es module js bundle](https://github.com/ontology-tech/ontlogin-sdk-js/blob/main/dist/ontlogin.es.js)

```javascript
import {createAuthRequest} from "ontlogin.es.js";
```

## Generate `authRequest` and challenge

```javascript
import { createAuthRequest } from "ontlogin";

const authRequest = createAuthRequest();
const challenge = await fetch("server-url", { body: authRequest });
```

## Get QR code from ontlogin QR server.

```javascript
import { requestQR } from "ontlogin";

const { text, id } = await requestQR(challenge);
```

## Show QR code UI and query scan result from ontlogin QR server

```javascript
import { queryQRResult, cancelQueryQRResult, ErrorEnum } from "ontlogin";

try {
  const challengeResponse = await queryQRResult(id);
} catch (e) {
  if (e.message === ErrorEnum.UserCanceled) {
    // handle cancel
  } else {
    // handle error
  }
}

cancelQueryQRResult(); // Cancel fetching result if you need.
```

## Submit challenge response to your server

```javascript
fetch("server-url", { body: challengeResponse });
```