NeuLoginQrcodeSDK Access document

Before developing access, you need to contact the business to provide your information and obtain clientID The access party provides redirectURL (the jump address after scanning the code to log in successfully, it must be the https protocol)

Installation

npm install neuxnet_login_qr

<img id="neuxnet_login_qr" src="" />

import neuxnet_login_qr from "neuxnet_login_qr";
const Instance = neuxnet_login_qr({
        clientID: "8y6vywgqnta0prtswe", 
        domId: "neuxnet_login_qr",
        success: (res) => {
        
        },
        fail: (err) => {
          console.log("fail", err);I
        },
 });

Configuration

Basic configuration

| Parameter name | Required | Type | Default value | Introduction | | ---------------- | -------- | ---------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | clientID | Yes | string | | Client ID, please apply to business | | width | No | number | 200 | Width of two-dimensional code | | height | No | number | 200 | Two-dimensional code height | | QR_options | No | object | See QR_options for details | node-qrcode Specifies the parameters | | env | No | number | 0 | See the env description below | | proxy (0.0.14) | No | String undefined | undefined | Can be set to "/" when local development encounters cross-domain, or custom proxy paths must be set to false or undefined when deployed | | clickImg | No | bool | true | Click the qr code update whether true | false | | domId | No | string | neuxnet_login_qr | The DOM id of the two-dimensional code image | | redirectQuery | No | object | | redirectUrl pass-through parameter | | noRedirect | No | bool | false | Whether to automatically redirect to redirectUrl after successful login | | success | No | function | | The QR code generated a successful callback | | fail | No | function | | Failed to generate the QR code callback. Procedure |

env

| value | Corresponding domain name | description | | ----- | -------------------------- | ----------------------- | | 0 | https://stage.neuxnet.com | stage environment | | 1 | https://satest.neuxnet.com | Development environment | | 2 | https://qa.neuxnet.com | QA environment | | 3 | https://dev.neuxnet.com | dev environment | | 4 | https://stage.neuxnet.com | stage environment |

If env does not have a corresponding domain name, you can set envHost to forcibly specify the interface domain name

QR_options

Default value:

  {
    errorCorrectionLevel: "M",
    margin: 2,
  }

For more configuration details, see: https://github.com/soldair/node-qrcode

Success callback parameter

| Parameter name | Type | introduction | | -------------- | ------ | ------------ | | code | number | 0 is normal | | data | object | Instance |

Failed callback parameter

| Parameter name | Type | introduction | | -------------- | ------ | ---------------------------------- | | code | number | Non 0, as shown in the table below | | data | object | Interface error message |

Code Value

| value | introduction | | ----- | ------------------------------------------------------------------------------------- | | 0 | Normal | | -1 | Missing parameters, please check whether the required parameters exist | | -2 | DOM node error must be img, please check whether the dom element is img | | -3 | The DOM node with domId as id was not obtained. Please check the config configuration | | -4 | Backend interface error, see data for details. | | -5 | Interface non-200 status code | | -6 | The plugin that generates the QR code reports an error. |

[TOC]

Events & Methods

update

Proactively update QR code

Instance.update()

onChangeQrCode

Listen to QR code change events Example:

Instance.onChangeQrCode = (res) => {
    // ...Do something
};

onChangeState

Listen to QR code status change events Receive two parameters (a, b) in the callback function a:QR code status b: Detailed data: When state == ACCEPT will have detailed content, including code, redirectUri, redirectQuery, state

Instance.onChangeState = (state,res) => {
   // state== DEFAULT, 
   // USED("The code has been scanned."), 
   // ACCEPT
   // REFUSE
   // INVALID
   
 // v0.0.11
  // res = { code: "3bee5fc4-09e8-4010-8db1-e83436a198e1"
  //  redirectQuery: {aa: 1}
  //  redirectUri: "https://satest.neuxnet.com/superapp_portal/"
  //  state: "ACCEPT"
  // }
};

Instance content

Return value of neuxnet_login_qr ()

| Field | Interpretation | | ------ | -------------------------------------------- | | config | Initialize the configuration file of the SDK | | src | Base64 format QR code image | | state | QR code status | | uuid | QR code dynamic id |

issue

• Q: How to solve cross-domain problems in local development? (0.0.14)

  A: In the development environment, please configure the proxy as '/' or any custom proxy path such as 'qrCodeProxy'

  You can use the http-proxy-middleware middleware

  // proxy = 'qrCodeProxy'
app.use(
    '/qrCodeProxy',
    createProxyMiddleware({
        target: 'https://stage.neuxnet.com',
        changeOrigin: true,
        pathRewrite: {
          '^/qrCodeProxy': '', // 
        },
    })
);

Or Vite / vue cli:

// proxy = 'qrCodeProxy'
server: {
    proxy: {
      "/qrCodeProxy": {
        target: "https://stage.neuxnet.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/qrCodeProxy/, ""),
      },
    },
  }

In production, configure the proxy to undefined or false and contact the Neuxnet team to provide your deployed domain name