Authing DocsDocuments
Concept
workflow
Guides
Development Integration
Application integration
Concept
workflow
Guides
Development Integration
Application integration
Old Version
Development Integration
  • Single Sign-On (SSO)
  • Login component

  • JavaScript/Node.js

  • Java / Kotlin

  • Python

  • C#

  • PHP

  • Go

  • Ruby
  • Android

  • iOS

  • Flutter

  • React Native
  • WeChat Mini Program
  • WeChat webpage authorization
  • Framework Integration
  • Error code
  1. Development Integration
  2. /
  3. Single Sign-On (SSO)

¶ Single Sign-On

Update Time: 2025-02-18 09:00:47
Edit

Single sign-on (SSO) is one of the popular solutions for enterprise business integration. The definition of SSO is that in multiple application systems, users only need to log in once to access all mutually trusted application systems. You can read this guide to learn how to quickly implement single sign-on in your application.

¶ Installation

¶ Install via NPM

$ npm install @authing/sso --save

Then it can be used in the following way

import AuthingSSO from "@authing/sso";

¶ Install via CDN

<script src="https://cdn.jsdelivr.net/npm/@authing/sso/dist/AuthingSSO.umd.min.js"></script>
<script>
  console.log(AuthingSSO);
</script>

¶ Quick Start

Before starting, you need to create an application。

¶ Initialization

To initialize the AuthingSSO SDK, you need to pass in the application ID and application domain name. The format of the application domain name is example-app.authing.cn without the protocol header and Path. See the initialization constructor for detailed parameters.

import AuthingSSO from "@authing/sso";

let auth = new AuthingSSO({
  appId: "APP_ID",
  appDomain: "example-app.authing.cn"
});

The privatization deployment scenario needs to specify the GraphQL endpoint of your privatized Authing service. If you are not sure, you can contact the Authing IDaaS service administrator.

let auth = new AuthingSSO({
  appId: "APP_ID",
  appDomain: "example-app.you-authing-service.cn",
  host: {
    oauth: "https://core.you-authing-service.com/graphql"
  }
});

¶ Login

¶ Redirect login

Initiating single sign-on, it will redirect to the login page. The relevant application needs to open the authorization code mode if use authorization code mode.

auth.login();

¶ Window login

Initiate single sign-on, a window will pop up,and the login page in it. The relevant application needs to open the authorization code mode if use authorization code mode.

auth.windowLogin();

The business domain name callback address needs to host an html file, which is used to send the obtained code access_token id_token and other parameters to the parent window by postMessage, and then close the window.

For example, the callback address is [https://example.com/handle.html](https://example.com/handle.html. This html needs a piece of code to send postMessage, which is responsible for taking out relevant parameters from the url and passing them to the parent window.

GitHub reference code: https://github.com/Authing/oidc-window (opens new window)。

¶ Redirect to registration page

Sometimes you may want to allow users to redirect to the registration page, an example of use is as follows:

// Call this function to redirect directly to the registration page
auth.register();

¶ Check login status

After the user logs in and returns to your business address, you can use this method to query the user's login status in this application. If the user is logged in, the user information of the user can be obtained, and you can understand the definitions ofall fields of user information.

After version 13.1, Safari will block third-party cookies by default, which will affect certain single sign-on features of Authing. In other similar updates, after Chrome 83, third-party cookies are disabled by default in incognito mode. Other browsers are also slowly making such updates to protect user privacy. Many browsers will disable third-party cookies as a security configuration feature.

This may have an impact on this method. For details, see the impact of disabling third-party cookies on Authing,You can view the solution.

let res = await auth.trackSession();
/**
 * {
 *    session: { appId: 'xxx', type: 'oidc/oauth', userId: 'yyy'},
 *    userInfo: {
 *      "_id": "USER_ID",
 *      "email": "USER_EMAIL",
 *      "registerInClient": "CLIENT_ID",
 *      "token": "JTW_TOKEN",
 *      "tokenExpiredAt": "2019-10-28 10:15:32",
 *      "photo": "PICTURE",
 *      "company": "",
 *      "nickname": "NICKNAME",
 *      "username": "USERNAME",
 *   },
 *   urlParams: {
 *      code: 'xxx', // These parameters are obtained from the url and need to be stored by the developer for use
 *      id_token: 'ID_TOKEN',
 *      access_token: 'ACCESS_TOKEN'
 *   }
 * }
 *
 * if session not exist,return:
 *
 * {
 *   session: null
 * }
 * */

After obtaining the user information, you can get the user's identity credential (the token field ), which you can carry in subsequent requests sent by the client to the backend server token, for axios example :

const axios = require("axios");
axios
  .get({
    url: "https://yourdomain.com/api/v1/your/resources",
    headers: {
      Authorization: "Bearer ID_TOKEN"
    }
  })
  .then(res => {
    // custom codes
  });

The legitimacy of this needs to be checked in the back-end interface to verify the user's identity. For details of the verification method, see Verifying User Identity Credentials (token) . After identifying the user's identity, you may also need to perform permission management on the user to determine whether the user has permission to operate this API.

¶ Sign out

This method is an asynchronous function, please make sure to use await to wait for the return before proceeding to the next step.

let res = await auth.logout();
/**
 * {
 *    message: "Single Sign out success",
 *    code: 200
 * }
 * */

¶ API

¶ Initialize constructor

The constructor accepts an object as a parameter. The list of parameters in the object is as follows:

Parameter nameRequiredDescrptionDefault
appIdyesapplication ID-
appDomainyesApplication domain name,E.g. app1.authing.cn-
appTypenoApplication type, optional values are oidc, oauth.oidc,oauth。oidc
scopenoAuthorized domain'openid profile email phone',View the list of supported scopes。
statenoCustom string, callback address will receive this parameter, the content is the same, can be used to pass custom information.Random string
hostnoAn object that specifies the GraphQL address. The privatization deployment scenario needs to specify the GraphQL endpoint of your privatized Authing service. If you are not sure, you can contact the Authing IDaaS service administrator.GraphQL endpoint using Authing public cloud
host.oauthnoGraphQL 通信地址https://core.authing.cn/graphql
responseTypenoApplication authorization process, optional value is code code,implicitcode
redirectUrlnoApplication callback addressThe business domain name filled in when creating the application in the Authing console.
noncenoRandom numberRandom number
timestampnoTimestampCurrent timestamp

Example:

let auth = new AuthingSSO({
  appId: "APP_ID",
  appDomain: "example-app.authing.cn"
});

¶ login

Request the authorized address of the application to log in.

Parameter list:

Parameter nameRequiredDescrptionDefault
langnoLanguage, optional values are zh-CN and en-USDepend on the browser locale

Example:

auth.login();

¶ register

Call this function to redirect directly to the registration page.

Parameter list:

Parameter nameRequiredDescrptionDefault
langnoLanguage, optional values are zh-CN and en-USDepend on the browser locale

Example:

auth.register();

¶ trackSession

Example:

let res = await auth.trackSession();
/**
 * {
 *    session: { appId: 'xxx', type: 'oidc/oauth', userId: 'yyy'},
 *    userInfo: {
 *      "_id": "USER_ID",
 *      "email": "USER_EMAIL",
 *      "registerInClient": "CLIENT_ID",
 *      "token": "JTW_TOKEN",
 *      "tokenExpiredAt": "2019-10-28 10:15:32",
 *      "photo": "PICTURE",
 *      "company": "",
 *      "nickname": "NICKNAME",
 *      "username": "USERNAME",
 *   },
 *   urlParams: {
 *      code: 'xxx', // hese parameters are obtained from the url and need to be stored by the developer for use
 *      id_token: 'ID_TOKEN',
 *      access_token: 'ACCESS_TOKEN'
 *   }
 * }
 *
 * if session not exist,return:
 *
 * {
 *   session: null
 * }
 * */

¶ logout

This method is an asynchronous function, please make sure to use await to wait for the return before proceeding to the next step.

Example:

let res = await auth.logout();
/**
 * {
 *    message: "Single Sign out success",
 *    code: 200
 * }
 * */

¶ Get help

  1. Join us on forum: #authing-chat (opens new window)
Next: Login component
  • Installation
  • Quick Start
  • API
  • Get help

User identity management

Integrated third-party login
Mobile phone number flash check (opens new window)
Universal login form component
Custom authentication process

Enterprise internal management

Single Sign On
Multi-factor Authentication
Authority Management

Developers

Development Document
Framework Integration
Blog (opens new window)
GitHub (opens new window)
Community User Center (opens new window)

Company

400 888 2106
sales@authing.cn
16 / F, Block B, NORTH STAR CENTURY CENTER, Beijing(Total)
room 406, 4th floor, zone B, building 1, No. 200, Tianfu Fifth Street, Chengdu(branch)

Beijing ICP No.19051205-1

© Beijing Steamory Technology Co.