# Mini Program login adaptation program explaination

App The login method is generally mobile phone number login, WeChat login and so on. And WeChat Mini Program login, generally in the Mini Program side call wx.login Obtain Code, and then in the server side authentication way to achieve login. Based on this background, this product provides the following two types of multi-terminal application adaptation Mini Program login solutions.

# I. Zero Change Scheme for Back Office Services

Considering that some developers already have a set of wx.login The developer can choose the following two adaptation method of completing square. The goal is that developers only need a small amount of front-end code changes, server-side code changes, you can achieve the ability to login in multi-terminal applications.

SeeAccess Guidelines

# Using Login Page Templates

Small code modification:

1. In the Mini Program code. wx.login Replaced by wx.getMiniProgramCode

The timing chart is as follows:

%%{
  init: {
    'theme': 'default',
    'themeVariables': {
      'loopTextColor': '#000000'
    }
  }
}%%
sequenceDiagram
    car number 
    participant multi as Multiterminal application
    participant wxa as WeChat Mini Program
    %% participant devServer as Developer Server
    multi->>Multi:  call wx.getMiniProgramCode 
    alt System login state does not exist
        multi-->>Multi:  display App Login Page
        multi->>wxa: Users click to log in, evoke WeChat mini program
        wxa-->>wxa: Display Mini Program Authorization Page
        wxa-->>Multi:  User authorized login, evoke multi-application
    end
    multi-->>Multi:  wx.getMiniProgramCode  success Callback, return Mini Program Code

Process Dxplaination

1. System login stateAutomatic maintenance of multi-terminal base library
   • If the system login state does not exist, the wx.getMiniProgramCode Will evoke the WeChat Mini Program, after the user logs in successfully, return to Mini Program Code。(Note: The multi-terminal base library will automatically generate and maintain the system login state. Effective within days)
   • If the system login state exists, the wx.getMiniProgramCode Will return immediately. Mini Program Code
2. App Login PageOfficial Offer Template (Weixin DevTools - Explorer - Select Folder and Right Click - New Multi-terminal Login Page), developers need to choose their own path into the code package, and in the App.miniApp.json Configure the following information in

// App.miniApp.json 
{
    "identityServiceConfig": 
    {
        "authorizeMiniprogramType": 1, // You can specify the version of the jump Mini Program (0: official version, 1: development version, 2: experience version)
        "miniprogramLoginPath":  "/pages/donutLogin /donutLogin  // Need to change the path selected by the business
    }
}

3. Mini Program authorization pageProvided by the official, developers need to be in the App.json Configure the following information in.

// App.json
{
  "miniApp":  {
    "useAuthorizePage": true
  }
}

Note: The official template provided by the App Login page only supports Mini Program call after successful login wx.getMiniProgramCode。

# Custom Login Page

Applicable scenarios: Developers have a custom Mini Program login page needs

Small code modification:

1. Implement a custom Mini Program login page that is called when the user logs on wx.weixinMiniProgramLogin
2. In the Mini Program code. wx.login Replaced by wx.getMiniProgramCode

The timing chart is as follows:

%%{
  init: {
    'theme': 'default',
    'themeVariables': {
      'loopTextColor': '#000000'
    }
  }
}%%
sequenceDiagram
    car number 
    %% actor user as user
    participant multi as Multiterminal application
    participant wxa as WeChat Mini Program
    %% participant devServer as Developer Server
    %% user->>Multi:  Users use multiple applications
    multi-->>Multi:  Display a custom login page
    %% user->>Multi:  The user clicks the login button
    multi->>wxa: Users click the login button to evoke WeChat mini programs<br>(Call wx.weixinMiniProgramLogin 
    wxa-->>wxa: Display Mini Program authorization page
    %% user->>wxa: User Confirmed Authorized Login
    wxa-->>Multi:  User authorized login, evoke multi-application
    multi->>Multi:  call wx.getMiniProgramCode, return to the applet  Code

Process Dxplaination

1. Pre-call wx.weixinMiniProgramLogin And logged in successfully. Within 30 days if the call wx.getMiniProgramCode Can be silently accessed Mini Program Code

# II. Support for multiple login schemes

Application scenarios: Developers have a need to support multiple login methods

Small code modification:

1. Implement a custom login page, provided by this product through theTypes of Login MethodsFor user login.
2. In the Mini Program code. wx.login Replaced by wx.getIdentityCode

Background Service Code Modification:

1. Received by the front end after a successful login Code (by wx.getIdentityCode or wx.xxxLogin return), Through code2Verifyinfo Get user identification information from WeChat.
2. Returns the Mini Program custom login state.

Timing Chart:

The program timing chart can be referred toMultiterminal application login timing。

%%{
  init: {
    'theme': 'default',
    'themeVariables': {
      'loopTextColor': '#000000'
    }
  }
}%%
sequenceDiagram
    participant client as Multiterminal application
    participant dev server as Developer Server
    participant wx server as WeChat interface service

    client->>Client: Displays custom login page, via wx.xxxLogin Obtain Code
    client->>dev Server: Send Code
    dev server->>wx server:code2Verifyinfo(Appid+Appsecret+code)
    wx server->>dev Server: Returns user identification information, etc.
    dev server->>dev Server: Build custom login state
    dev server->>Client: Returns custom login state
    client->>Client: Store custom login state
    client->>dev Server: business request, with custom login state
    dev server->>Client: Business Response

Process Dxplaination

1. Pre-call wx.xxxLogin And logged in successfully. Within 30 days if the call wx.getIdentityCode You can silently get the data that is used to code2Verifyinfo of CodeTherefore, the developer can replace the full amount of the wx.login for wx.getIdentityCode To and maintain the user experience of silently logging in.