Integrate Native SPIs

Native SPIs are a set of interfaces that bridge the interaction between the super app and mini programs. When mini programs make requests via certain JSAPIs, the IAPMiniProgram SDK calls the corresponding Native SPIs to direct the request to the super app. By integrating these SPIs, the super app grants mini programs the following services or capabilities:

  • Obtaining user authorization
  • Accessing user information
  • Processing payments
  • Scanning QR codes and barcodes

This topic mainly explains the function of each Native SPI and guides the super app to integrate these SPIs step by step.

Overview

Integrate Native SPIs

Native SPI

Associated JSAPI

Description

OAuthService

my.getAuthCode

The super app integrates this SPI to generate authorization codes for mini programs. The mechanism is based on OAuth 2.0 standards and enables mini programs to securely access the resources or capabilities for proper functioning.

For more information, refer to OAuthService.

MemberInfoService

my.getOpenUserInfo

The super app integrates this SPI to provide basic user information for both mini programs and the IAPMiniProgram SDK. This integration is important for the following use cases:

  • Enable mini programs to access non-sensitive user profile information.

Note: In this use case, the super app must first integrate the OAuthService SPI.

  • Enable the IAPMiniProgram SDK to access the user ID for the following features:
    • Mini-program performance tracking: This includes the analysis of metrics such as Daily User Visits, which are displayed on the Mini Program Platform console if the super app has enabled the feature.
    • Whitelisting: This allows mini-program developers to choose specific users to test mini programs in your super app during pilot testing.

For more information, refer to MemberInfoService.

PaymentService

my.tradePay

The super app integrates this SPI to enable mini programs to process payments. For more information, refer to PaymentService.

CodeService

my.scan

The super app integrates this SPI to enable mini programs to use your scanner to scan QR codes or barcodes.

Note: To ensure this SPI activates your scanner successfully, you must implement code-scanning capabilities in your app.

For more information, refer to CodeService.

Note: Calling a JSAPI triggers to call its associated Native SPI. Errors occur when the SPI fails to call.

OAuthService

This section explains the workflow and integration process of the OAuthService interface, which obtains user authorization and generates authorization codes for mini programs.

Workflow

Integrate Native SPIs

Procedures

Follow the procedure to integrate the OAuthService interface:

Step 1: Implement OAuthService

Create a class that implements the OAuthService interface. Within this class, sequentially implement the following methods: getAuthorizedScopes, getAuthCode, and showAuthPage.

The following sections provide instructions for implementing the methods of this interface. For each implementation, you can optionally direct users to a Flutter page (created with a Widget) for further actions, such as an authorization page to request the user's consent. Depending on whether to open a Flutter page, the additional instructions are as follows:

Besides, you must call the parseRequest API to handle data communication between the SDK and the Flutter page. For a code samples, see Call parseRequest.

1. (Optional) Implement the getAuthorizedScopes method

If you need to enable the my.getOpenUserInfo JSAPI, implement the getAuthorizedScopes method to provide the SDK with a list of scopes that you support for granting to mini programs. In the method's response, return an OAuthScopeQueryResult containing the auth_base and auth_user scopes.

2. Implement the getAuthCodemethod

Implement the getAuthCode method to generate authorization codes for the mini program, and handle the following outcomes of the OAuth authentication flow:

    • The user's consent is required before granting the mini program access to the requested scopes. It is recommended to obtain the user's consent for scopes other than user_base.
    • The OAuth process succeeds.
    • The OAuth process fails.

3. Implement the showAuthPage method

Implement the showAuthPage method to show the user authorization dialog and handle the following outcomes:

    • The user allows mini program to access the requested scopes.
    • The user declines or cancels the permission request.

It is recommended to execute this method when the requested scopes include any scope, other than user_base, that requires the user's consent according to compliance.

Note: If the user allows mini program to access the requested scopes, the super app needs to save the scopes to prevent the authorization dialog from reappearing when the same scopes are requested again. To save the scopes, the super app can use the cacheScopes method to implement the caching logic. See the following code sample for more information:

copy
void cacheScopes(String appId, String authClientId, Collection grantedScopes) {
  for (String scope: grantedScopes) {
    String key = appId + "_" + authClientId + "_" + scope;
    cache(key, true); 
  }
}

When caching the scopes, construct a unique key by combining appId (the mini-program ID), authClientId (the super app ID), and each of grantedScopes (the scopes that are granted to the mini program) for identification, and set the value as a simple boolean true to indicate that the scopes are granted.

Step 2: Register OAuthService with the SDK

To register the implemented OAuthService with the IAPMiniProgram SDK, pass it to the init method during initialization with the following code sample:

copy
void initSDK() async {
  IAPMiniProgram.instance.init(
    oauthService: TestOAuthService()
  );
}

MemberInfoService

This section explains the workflow and integration process of the MemberInfoService interface, which obtains basic user information for mini programs and the SDK.

Workflow

The interaction workflow of the MemberInfoService interface differs depending on the following use cases:

  • For requests by mini programs
  • For requests by the IAPMiniProgram SDK

For requests by mini programs

Integrate Native SPIs

For requests by the IAPMiniProgram SDK

Integrate Native SPIs

Procedures

Follow the instructions to integrate the MemberInfoService interface:

Step 1: Set open ID

In the case where the SDK requests the user ID (the strategy request parameter is set to localUserIdOnly), the super app must return the ID synchronously because returning it in a different thread causes the SDK to get a null result. To return the user ID synchronously, the super app can use either of the following methods depending on whether the ID is cached locally:

  • If the user ID is not cached locally, you need to retrieve it after the IAPMiniProgram SDK has been initialized and the user logs in to the super app. Then, call the setOpenId API to set the ID.
  • If the user ID is cached locally, during the SDK initialization, pass the cached ID into the init method by specifying the openId key. See the following code sample for details:
copy
void initSDK() async {
  IAPMiniProgram.instance.init(
      openId: '123***789'
  );
}

Step 2: Implement MemberInfoService

Create a class that implements the MemberInfoService interface. Within this class, implement the getMemberInfo method to fetch the user information according to the specified strategy. For a code sample, refer to MemberInfoService.

Step 3: Register MemeberInfoService with the SDK

To register the implemented MemberInfoService with the IAPMiniProgram SDK, pass it to the init method during initialization with the following code sample:

copy
void initSDK() async {
  IAPMiniProgram.instance.init(
      memberInfoService: TestMemberInfoService()
  );
}

PaymentService

This section explains the workflow and integration process of the PaymentService interface, which enables payment processing capabilities.

Workflow

Integrate Native SPIs

Procedures

Follow the procedure to integrate the PaymentService interface:

Step 1: Implement PaymentService

Create a class that implements the PaymentService interface. Within this class, implement the pay method to initiate the payment process and request for payment with the type of order, and handle the payment result. You can optionally direct users to a Flutter page (created with a Widget) for further actions, such as a payment page to complete transactions. Follow the corresponding instructions depending on whether to open a Flutter page:

  • Open a Flutter page: Set the value of the result.showFlutterPage response parameter to true and specify the page routing address in the result.flutterPageRoute response parameter. For a code sample, see Open a Flutter page during the PaymentService calls.

Besides, you must call the parseRequest API to handle data communication between the SDK and the Flutter page. For a code sample, see Call parseRequest.

Step 2: Register PaymentService with the SDK

To register the implemented PaymentService with the IAPMiniProgram SDK, pass it to the init method during initialization with the following code sample:

copy
void initSDK() async {
  IAPMiniProgram.instance.init(
    paymentService: TestPaymentService(),
  );
}

CodeService

This section explains the workflow and integration process of the CodeService interface, which enables QR code or barcode scanning capabilities.

Workflow

Integrate Native SPIs

Procedures

Follow the procedure to integrate the CodeService interface:

Step 1: Implement CodeService

Create a class that implements the CodeService interface. Within this class, implement the scan method to launch the QR code or barcode scanner and return the code. You can optionally direct users to a Flutter page (created with a Widget) for further actions, such as a code scan page to read QR codes or barcodes. Follow the corresponding instructions depending on whether to open a Flutter page:

  • Open a Flutter page: Set the value of the result.showFlutterPage response parameter to true and specify the page routing address in the result.flutterPageRoute response parameter. For a code sample, see Open a Flutter page during the CodeService calls.

Besides, you must call the parseRequest API to handle data communication between the SDK and the Flutter page. For a code sample, see Call parseRequest.

Step 2: Register CodeService with the SDK

To register the implemented CodeService with the IAPMiniProgram SDK, pass it to the init method during initialization with the following code sample:

copy
void initSDK() async {
  IAPMiniProgram.instance.init(
    codeService: TestCodeService()
  );
}