# 小程序登录适配方案说明

App 的登录方式，一般是手机号登录、微信登录等。
而微信小程序的登录方式，一般是在小程序端调用 `wx.login` 获取 `code`，然后在服务端验证的方式来实现登录。
基于此背景，本产品提供以下两类多端应用适配小程序登录方案。

## 一、后台服务零改动方案

考虑到部分开发者已有一套基于 `wx.login` 的前端代码和对应的后台服务，开发者可以选择以下两种适配方法。
目标是开发者只需少量的前端代码改动，服务端代码零改动，即可在多端应用中实现登录能力。

查看[接入指引](/miniprogram/dev/platform-capabilities/miniapp/quickstart/auth)

### 使用登录页模板

**小程序代码改造量：**

1. 将小程序代码中的 `wx.login` 替换成 `wx.getMiniProgramCode`

**时序图如下：**

```mermaid
%%{
  init: {
    'theme': 'default',
    'themeVariables': {
      'loopTextColor': '#000000'
    }
  }
}%%
sequenceDiagram
    autonumber
    participant multi as 多端应用
    participant wxa as 微信小程序
    %% participant devServer as 开发者服务器
    multi->>multi: 调用 wx.getMiniProgramCode
    alt 系统登录态不存在
        multi-->>multi: 显示 App 登录页
        multi->>wxa: 用户点击登录，唤起微信小程序
        wxa-->>wxa: 展示小程序授权页
        wxa-->>multi: 用户授权登录，唤起多端应用
    end
    multi-->>multi: wx.getMiniProgramCode success 回调，返回小程序 code
```

**流程说明**

1. **系统登录态**由多端基础库自动维护
    * 如果系统登录态不存在，则 `wx.getMiniProgramCode` 会唤起微信小程序，用户登录成功后，返回 `小程序 code`。(注：多端基础库会自动生成并维护系统登录态，30 天内有效)
    * 如果系统登录态存在，则 `wx.getMiniProgramCode` 会立刻返回 `小程序 code`
2. **App 登录页**官方提供模板 (微信开发者工具-资源管理器-选择文件夹并点击右键-新建多端登录 Page)，开发者需要自己选定路径放到代码包内，并在 `App.miniApp.json` 中配置如下信息：
  ```json
  // App.miniApp.json
  {
      "identityServiceConfig":
      {
          "authorizeMiniprogramType": 1, // 可指定跳转小程序版本（0：正式版，1：开发版，2：体验版）
          "miniprogramLoginPath": "/pages/donutLogin/donutLogin" // 需改成业务选定的路径
      }
  }
  ```
3. **小程序授权页**由官方提供，开发者需要在 `App.json` 中配置如下信息。
  ```json
  // App.json
  {
    "miniApp": {
      "useAuthorizePage": true
    }
  }
  ```
注意：官方模板提供的 App 登录页仅支持小程序登录成功后调用 `wx.getMiniProgramCode`。

### 自定义登录页

> 适用场景：开发者有自定义小程序登录页的需求

**小程序代码改造量：**

1. 实现自定义小程序登录页，当用户登录时调用 `wx.weixinMiniProgramLogin`
2. 将小程序代码中的 `wx.login` 替换成 `wx.getMiniProgramCode`

**时序图如下：**

```mermaid
%%{
  init: {
    'theme': 'default',
    'themeVariables': {
      'loopTextColor': '#000000'
    }
  }
}%%
sequenceDiagram
    autonumber
    %% actor user as 用户
    participant multi as 多端应用
    participant wxa as 微信小程序
    %% participant devServer as 开发者服务器
    %% user->>multi: 用户使用多端应用
    multi-->>multi: 显示自定义登录页
    %% user->>multi: 用户点击登录按钮
    multi->>wxa: 用户点击登录按钮，唤起微信小程序<br>（调用 wx.weixinMiniProgramLogin）
    wxa-->>wxa: 显示小程序授权页
    %% user->>wxa: 用户确认授权登录
    wxa-->>multi: 用户授权登录，唤起多端应用
    multi->>multi: 调用 wx.getMiniProgramCode，返回小程序 code
```

**流程说明**

1. 前置调用 [wx.weixinMiniProgramLogin](/miniprogram/dev/platform-capabilities/miniapp/api/auth/wx.weixinMiniProgramLogin)并登录成功，30天内如果调用[wx.getMiniProgramCode](/miniprogram/dev/platform-capabilities/miniapp/api/auth/wx.getMiniProgramCode) 可以静默获取到 `小程序 code`

## 二、支持多种登录方式方案
> 适用场景：开发者有支持多种登录方式的需求

**小程序代码改造量：**

1. 实现自定义登录页，通过本产品提供的[各类登录方法](introduction)进行用户登录。
2. 将小程序代码中的 `wx.login` 替换成 `wx.getIdentityCode`

**后台服务代码改造量：**

1. 接收前端登录成功后获得的 code (由 `wx.getIdentityCode` 或 `wx.xxxLogin` 返回)，通过[登录凭证校验](/miniprogram/dev/platform-capabilities/miniapp/openapi/code2Verifyinfo)向微信获取用户标识信息。
2. 返回小程序自定义登录态。

**时序图：**

该方案时序图可参考[多端应用登录时序](loginSequence)。

```mermaid
%%{
  init: {
    'theme': 'default',
    'themeVariables': {
      'loopTextColor': '#000000'
    }
  }
}%%
sequenceDiagram
    participant client as 多端应用
    participant dev server as 开发者服务器
    participant wx server as 微信接口服务

    client->>client:显示自定义登录页，通过wx.xxxLogin 获取 code
    client->>dev server:发送 code
    dev server->>wx server:code2Verifyinfo(Appid+Appsecret+code)
    wx server->>dev server:返回用户标识信息等
    dev server->>dev server:构建自定义登录态
    dev server->>client:返回自定义登录态
    client->>client:存储自定义登录态
    client->>dev server:业务请求，携带自定义登录态
    dev server->>client:业务响应
```

**流程说明**

1. 前置调用 [wx.xxxLogin](introduction) 并登录成功，30天内如果调用[wx.getIdentityCode](/miniprogram/dev/platform-capabilities/miniapp/api/auth/wx.getIdentityCode)可以静默获取到用于[登录凭证校验](/miniprogram/dev/platform-capabilities/miniapp/openapi/code2Verifyinfo) 的 `code`。因此，开发者可以全量替换小程序代码中的 `wx.login` 为 `wx.getIdentityCode` 以并保持静默登录的用户体验。