When you use wechat App or Baidu App or Alipay App and enter the mini program, you often see an authorization box. Through this authorization box, the login information on the App can be synchronized by the mini program. Through this authorization, users can use the functions of the corresponding mini-program in the most convenient and fastest way.

In the APP integrated with FinClip SDK, the same problem exists: how to help users log in faster, more convenient and with lower barriers?

FinClip siege lions, who were moving bricks at the construction site, learned about the developers’ pain point and set up a Flag to help solve the problem with a series of articles.

Today, we’re going to start with the very basic first step:

Help apps integrate FinClip SDK to connect wechat login, and at the same time meet the goal of APP to synchronize wechat account to mini program and complete authorized login! That is, to create their own App unique “like wechat” small program authorized login.

Let’s break this down:

The truly authorized login of wechat applets can only be carried out in wechat APP, which means that the wechat APP is authorized to the wechat applets. The authorized login of the FinClip applets is through a third-party APP integrated with the SDK (because most apps have their own account system).

Therefore, even if a third-party APP supports login through the wechat account system and then authorizes the FinClip applets to log in, it is not truly wechat authorized login. In essence, it is the third-party APP’s authorized login to FinClip applets.

To sum up, if you want to realize APP’s authorized login to FinClip applet, you can refer to the following steps:

1. Connect the APP to wechat and log in

If you need to realize the authorized login of wechat account of APP, please refer to the mobile application development document of wechat Open Platform and the authorized login development document of wechat (see the document address at the bottom of the article) for implementation. If you do not need it, you can directly start from step 2.

2.APP implements custom injection interface

First of all, the APP needs to refer to the two documents of iOS SDK custom injection interface and Android SDK custom injection interface to inject the authorized login ability of the account into the SDK so that the small program can call. The details are as follows.

The Android side:

To enable an applet to obtain APP data other than the applet, you need to register the API. For details about the API, see FinClip Open Applet Platform – User-defined Applet Interface, FinClip Open Applet Platform – Registering the API in the applet process.

1. Customize the login interface

A. Customize the API class and set the API name to login.

public class LoginApi extends AbsApi { private final static String API_NAME_LOGIN = "login"; @override public String[] apis() {return new String[]{API_NAME_LOGIN}; }}Copy the code

B. Register custom apis;

The example shows the user authorization prompt Dialog. The Activity object is required as the context parameter of the Dialog, so you need to register the custom Api with the subroutines process.

If (FinAppClient. INSTANCE. IsFinAppProcess (this)) {/ / / / applet small application process in the register API method can get small program is the activity object, Can be used to create the context of the dialog box parameters) FinAppProcessClient. The INSTANCE. The setCallback (new FinAppProcessClient. Callback () {@ Override public List<IApi> getRegisterExtensionApis(@NotNull Activity activity) { ArrayList<IApi> apis = new ArrayList<>(); apis.add(new LoginApi()); return apis; } @Nullable @Override public List<IApi> getRegisterExtensionWebApis(@NotNull Activity activity) { return null; }}); return; }Copy the code

C. Implement the custom API invoke() method; Display the authorization prompt Dialog first (developers should decide whether to display the authorization prompt Dialog as required), and then retrieve the user login information from the main process (App process).

public class LoginApi extends AbsApi { @Override public void invoke(String event, JSONObject param, ICallback callback) { if (event.equals(API_NAME_LOGIN)) { showAuthDialog(callback); }} /** * Display authorization prompt dialog box for obtaining user login information */ private void showAuthDialog(final ICallback callback) {// Whether to display authorization prompt dialog box according to product requirements New Alertdialog.Builder (Activity).setTitle(" Do you agree to authorize access to user login information? ") SetNegativeButton (" Reject ", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { callback.onFail(); }}).setpositiveButton (" Agree ", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { loginMainProcess(callback); } }) .show(); Private void loginMainProcess(final ICallback callback) {private void loginMainProcess(final ICallback callback) { After the main process for user information is returned to the small program process FinAppProcessClient. INSTANCE. GetAppletProcessApiManager () callInMainProcess (API_NAME_LOGIN, null, New FinCallback<String>() {@override public void onSuccess(final String result) {// Call callback on the main thread activity.runOnUiThread(new Runnable() { @Override public void run() { try { callback.onSuccess(new JSONObject(result)); } catch (JSONException e) { e.printStackTrace(); callback.onFail(); }}}); } @Override public void onError(int code, String error) { callback.onFail(); } @Override public void onProgress(int status, String info) { } }); }}Copy the code

The user login information is then returned to the applet process from the main process (usually within the Application, but the developer can choose another appropriate location).

/ / in the main process set "of" small call the main application process of treatment / / developer can also choose other suitable code in the main process FinAppClient position setting processing method. The INSTANCE. GetAppletApiManager () .setAppletProcessCallHandler(new IAppletApiManager.AppletProcessCallHandler() { @Override public void onAppletProcessCall(@NotNull String name, @Nullable String params, @Nullable FinCallback<String> callback) { if (callback ! = null) {if (name.equals(loginapi.api_name_login)) {if (name.equals(loginapi.api_name_login)) {if (name.equals(loginapi.api_name_login)) JSONObject JSONObject = new JSONObject(); try { jsonObject.put("userId", "123"); } catch (JSONException e) { e.printStackTrace(); } callback.onSuccess(jsonObject.toString()); }}}});Copy the code

At this point, the entire process of the applets obtaining user login information from the APP through the custom API is complete.

Note: If the product requirement does not require the display of user authorization Dialog, it is recommended to register the custom API with the main process (APP process) to avoid the above process of calling the main process (APP process) method in the applet process to get data.

2. Customize the getUserProfile interface

A. Customize the API whose interface name is getUserProfile

B. The process for customizing the getUserProfile interface is the same as the process for customizing the Login interface. \

3.FinClip also provides the official Android APP Demo project and small program as a demonstration, if necessary, you can download to experience.

The iOS side:

1. Call the INJECTION API method of SDK in the native App. GetUserProfile is the method name of wechat applet to obtain user information

[[FATClient sharedClient]registerExtensionApi:@"getUserProfile" handle:^(id param, FATExtensionApiCallback) {// Return the user information, not logged in, can pop login here, After login, return user information NSDictionary *userInfo = @ {@ "nickName:" @ "zhang SAN," @ "avatarUrl:" @ ", "@" gender ": @ 1, @" country ": @" China, "@" province ": @" guangdong province ", "@" city ": @" shenzhen "@" language: "@" zh_CN" }; NSDictionary *resDic = @{@"userInfo":userInfo}; / / callback to the result of the small program user information if (resDic) {callback (FATExtensionCodeSuccess resDic);  }else{ callback(FATExtensionCodeFailure,resDic); } }];Copy the code

2. Call the declared getUserProfile in the small program to get the user information

wx.getUserProfile({
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
Copy the code

3.FinClip also provides the official iOS APP Demo project and small program as a demonstration. If necessary, you can download it and experience it.

3. Small program to achieve the invocation of the interface

If the small program needs to support login and getUserProfile API, it needs to be implemented in the APP in the way of injection API. For the implementation steps of injection API, please refer to Step 2.

Note that Login and getUserProfile are the default injection interfaces of the applet. You can tune these two interfaces without configuring FinChatConf in the root directory of the applet.

When the APP does not inject the relevant interface, the call will report an error and execute the fail callback.

1. Enable the login interface

Wx. login({param1: ", // Add parameters as required, which will be transparently passed to APP for processing success: (res) => {console.log(res)}, fail: (res) => { console.log(res.errMsg) } })Copy the code

2. Enable the interface for obtaining user information

wx.getUserProfile({
  success: (res) => {
    console.log('getUserProfile success', res)
  },
  fail: (res) => {
    console.log('getUserProfile fail', res.errMsg)
  }
})
Copy the code

At this point, the relevant code implementation is over!