# 手机号登录后如何绑定微信账号

多端框架为开发者提供了一套完整的身份管理体系，开发者无需自己建设即可直接使用。

本文档演示在多端 app 登录时，用户在手机号登录后，如何绑定微信登录账号；并在退出登录后再次微信登录，如何获取绑定的手机号。

## 一、 手机号登录的实现

手机号登录分两个方式，发送验证码登录和快速登录，我们一一展示：

首先是验证码登录，关键步骤有两个：

1. 发送验证码：必须使用按钮 open-type 形式来发起验证码发送，具体看此[文档](/miniprogram/dev/platform-capabilities/miniapp/component/auth/sendPhoneSms)。

    ``` html
    发送验证码
    ```

2. 验证码登录：通过收到的短信验证码和手机号登录，具体看此[文档](/miniprogram/dev/platform-capabilities/miniapp/api/auth/wx.phoneSmsLogin)。

    ``` js
    Page({
        loginsms(){
            wx.showLoading({
                title: '登录中',
                mask:true
            })
            wx.phoneSmsLogin({
                phoneNumber: that.data.phonetel, // 页面输入的手机号，发送验证码后最好将其固定
                verifyCode: that.data.phonecode, // 页面输入的验证码
                success (res) {
                    wx.hideLoading()
                    console.log(res) // 将获取的 res.code 发送到服务器进行身份验证
                    wx.showToast({ title: '手机号登录成功',  icon: 'success' });
                },
                fail(e){
                    wx.hideLoading()
                    console.log(e)
                    wx.showToast({ title: '手机号登录失败',  icon: 'error' });
                }
            })
        }
    })
    ```

其次是快速登录，是直接通过运营商返回手机号信息，来进行登录认证的。主要分两个步骤：

1. 调用 `wx.getPhoneMask`：此接口将检查当前设备支持的 SIM 卡信息，如果信息有效，将返回对应的手机号掩码，否则将直接报失败，使用前需查看[文档](/miniprogram/dev/platform-capabilities/miniapp/api/auth/wx.getPhoneMask)中的注意事项。

    ``` js
    Page({
        getMask(){
            const that = this
            wx.getPhoneMask({
                success (res) {
                that.setData({
                    phonemask: res.phoneMask
                })
                }
            })
        }
    })
    ```
> 建议在真要登录时进行调用，不要无脑直接在页面 onLoad 中直接调，如果 APP 已经登录身份了，就不要执行它了

2. 当获取手机掩码之后，我们可以构建一个 `open-type` 为 `phoneOneClickLogin` 的按钮，用户点击后，在 `bindphoneoneclicklogin` 回调方法中会获得登录成功的信息。

    ``` html
    快速登录({{phonemask}})
    ```

    ``` js
    Page({
        startloginnosms(){
            // 这首先被触发，可以设置加载状态
        },
        loginnosms(e){
            // 登录结束后会触发这里，结束加载状态
            if(e.detail.code!=null){
                // 将获取的 code 发送到服务器进行身份验证
            }
        }
    })
    ```

3. 在手机号登录后，APP 已经登录了身份信息，此时可以调用 [wx.getIdentityCode](/miniprogram/dev/platform-capabilities/miniapp/api/auth/wx.getIdentityCode) 来获取 `code`。（也可以直接在 `bindphoneoneclicklogin` 回调中获得，如果业务无法当时处理，可以使用 `wx.getIdentityCode` 多次获得）

4. 在服务器中，使用 [code2Verifyinfo 接口](/miniprogram/dev/platform-capabilities/miniapp/openapi/code2Verifyinfo) 换取登录信息，信息样式大概如下：

    ``` json
    {
    "errcode": 0,
    "errmsg": "ok",
    "login_info": {
        "type": "phoneOneClick", // 当前登录的方式
        "login_time": 1726584653
    },
    "user_info": { // 登录用户信息
        "phone_info": { // 手机号登录时手机号信息
        "phone": "12388886666"
        },
        "user_id": "u5d0a68103768719d74f82bdf1c0d519f" // 用户唯一ID，可以与自己的业务结合
    }
    }
    ```

这里的信息分两块：

- `login_info` 表示了当前登录是通过什么方式完成的，比如上面例子里 phoneOneClick 表示是使用手机号快速登录。
- `user_info` 表示了当前登录的用户信息，包括 user_id （多端身份管理的用户标识），以及各种登录方式具体的身份信息，在这个例子中可以拿到 phone_info （包含完整的手机号）

## 二、 微信登录绑定

在保持手机号登录的前提上，调用 `wx.miniapp.bindWeixin` 接口唤起用户的微信 APP 进行绑定

``` js
Page({
    bindweixin() {
      wx.showLoading({ title: '绑定中', mask: true })
      wx.miniapp.bindWeixin({
          success () {
            wx.hideLoading()
            // 调用 wx.getIdentityCode 获取 code，完成信息更新
          },
          fail: (e) => {
              wx.hideLoading()
              console.log('微信绑定失败', e)
              wx.showToast({ title: '微信绑定失败',  icon: 'error' });
          }
      })
    }
})
```

如果在绑定之前，已经使用微信登录过一次，就会有身份信息，此时就不允许将微信登录方式绑定至手机号，需要先注销该登录方式下的身份账号才能绑定。

通过在服务器中调用 [unregisterUser 接口](/miniprogram/dev/platform-capabilities/miniapp/openapi/unregisteruser)完成账号注销，注销后再操作绑定微信。

如果微信已经和其他登录方式绑定了，可以通过在服务器中调用 [unbindWeixin 接口](/miniprogram/dev/platform-capabilities/miniapp/openapi/unbindweixin)完成将微信方式从一个 user_id 中解绑，然后再操作绑定微信到手机号下的 user_id 中。

> 如果你不知道 user_id，可以操作登录微信后使用 [code2Verifyinfo 接口](/miniprogram/dev/platform-capabilities/miniapp/openapi/code2Verifyinfo) 换取登录信息，获取其中的 user_id

## 三、检查绑定信息

当操作绑定成功后，你可以使用 [code2Verifyinfo 接口](/miniprogram/dev/platform-capabilities/miniapp/openapi/code2Verifyinfo) 重新获取登录信息，成功绑定后的登录信息格式大概如下：

``` json
{
  "errcode": 0,
  "errmsg": "ok",
  "login_info": { // 当前登录方式
    "type": "phoneOneClick", // 如果是微信登录进来的，这里会变成 weixinApp
    "login_time": 1726584653
  },
  "user_info": {
    "openapp_info": { // 微信登录信息
      "appid": "wx435af04f70f771f7",
      "openid": "oimKbiEzJf6JNJs_zK7G_yVvgUvs",
      "unionid": "ohIz4AFKeVy5teZqzqDP_dZtUNIg",
      "nickname": "ZiraLi",
      "headimgurl": "http://wx.qlogo.cn/mmhead/ZHK9X5JK58zNYibpKPNPDBlOKCvCqTzEfnx3TESeysblKnyiaMXQibrAQ/0"
    },
    "phone_info": { // 手机号登录信息
      "phone": "12388886666"
    },
    "user_id": "u5d0a68103768719d74f82bdf1c0d519f" // 用户唯一 ID
  }
}
```