Single sign-on

With this topic, you can learn about single sign-on (SSO) and the procedures to enable SSO for your mini program.

What is single sign-on

Single sign-on (SSO) is an authentication method that allows super app users to securely authenticate with mini programs and super apps using just one set of credentials. With SSO, the users only need to accept authorization once on a single page and access all of the services on the mini program.

Benefits

Single sign-on brings benefits to both mini program merchants and super app users:

Higher adoption rates

For merchants: The benefits for merchants include an increase in user loyalty, higher conversion rates, and higher adoption rates. Making sign-up or login easier with SSO increases the chance that users will use your mini program and keep returning for more.

Better user experience

For users: As repeated authorizations are no longer required, super app users can enjoy a better digital experience using your mini program. The feature of enabling SSO in your mini program is that users only need to accept authorization for the first time they enter your mini program. Therefore, SSO also helps users save more time and avoid the hassle of repeated authorizations.

How it works

Single sign-on works based on a trust relationship set up between the merchant's mini program and the super app. When a user logs into your mini program for the first time, you get accessToken and userId from the super app. Your mini program and the merchant server will establish a binding relationship based on the user's merchant account and the super app userId. Then the mini program caches the session and userId. Whenever the user re-enters the mini program within the valid session, he or she won't need to grant the authorization again.

User experience

You can implement the following two types of user experience for your mini program:

  • Inform users to log in to your mini program with their super app account. This situation happens when the merchant server creates a merchant account for users automatically.
  • Inform users to bind their super app account with the merchant account.

How to enable single sign-on

The key point is to save the super app userId and associate the ID with the user's merchant account on the basis of implementing user authorization. In this way, every time the user enters the mini program, the mini program doesn't need to initiate the authorization over and over again to obtain the super app userId.

Here we recommend the following procedures to enable single sign-on for your mini program. To learn more, see the sequence diagram below:

image

The steps in the diagram are described as follows:

  1. A user opens the mini program, and the mini program checks whether it has cached userId and whether the session is still valid [1-2]:
  2. If the mini program has cached userId and the session is still valid,
    1. The mini program sends a request to the merchant server to obtain the user's home page [3].
    2. The merchant server processes the request and obtains the bound merchant account to show the user's home page [4-5].
    3. Then the merchant server returns the user's home page to the mini program. The mini program shows the user's home page using the cached session. The single sign-on is now successful [6-7].
  1. However, if the mini program hasn't cached userId or the session is invalid, invoke the authorization process.
    1. The mini program invokes the my.getSiteInfo JSAPI to get the site information and sends a request to the super app to get authCode via the my.getAuthCode JSAPI [8-9].
    2. The super app processes the request and pops up the authorization page to the user [10].
    3. After the user agrees to the authorization, the super app sends the authorization request to the super app server [12].
    4. The super app server returns authCode to the super app and the super app sends authCode to the mini program [13-14].
    5. The mini program sends authCode to the merchant server. Then the merchant server invokes the applyToken API and sends a request to obtain accessToken from AIMPDP (Alipay International Mini Program Development Platform) [15-16].
    6. AIMPDP sends the applyToken API request to the Alipay+ and the Alipay+ transfers the request to the super app server [17-18].
    7. The super app server returns accessToken and userId to the merchant server [19-21].
    8. The merchant server pops up a page for the user to log in or register a merchant account. The page should display the binding information. Otherwise, the merchant server creates a temporary account for the user silently [22].
    9. The user logs in or registers an account and accepts the binding information (optional if the merchant server creates an account silently) [23].
    10. The merchant server creates a session and establishes a binding relationship between the super app userId and the user's merchant account [25-26].
    11. Then the mini program caches the session and calls the my.setStorage JSAPI to save the super app userId for future login or other operations [27-28].
    12. The mini program displays the user's home page [29].

With the above procedures, you have now enabled single sign-on for your mini program.

Note:

  • If the mini program has cached the super app userId but the session is expired, you can choose to refresh the session, with no need to obtain the user authorization again.
  • The length of time that SSO takes effect depends on the validity period of the session that is cached by the client.

API list

Refer to the following two tables for the APIs that are used in the above procedures, along with their description:

JSAPI

API name

Description

my.getAuthCode

Obtains the authorization code.

my.getSiteInfo

Obtains the site information.

my.setStorage

Stores the data with a specified key in the local cache.

OpenAPI

API name

Description

/v2/authorizations/applyToken

Obtains the access token.