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

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

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

# 一、手机号登录的实现

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

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

发送验证码：必须使用按钮 open-type 形式来发起验证码发送，具体看此文档。

<button open-type="sendPhoneSms" bindsendphonesms="sendsms" phoneNumber="{{phonetel}}">发送验证码</button>

验证码登录：通过收到的短信验证码和手机号登录，具体看此文档。

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' });
            }
        })
    }
})

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

调用 wx.getPhoneMask：此接口将检查当前设备支持的 SIM 卡信息，如果信息有效，将返回对应的手机号掩码，否则将直接报失败，使用前需查看文档中的注意事项。

Page({
    getMask(){
        const that = this
        wx.getPhoneMask({
            success (res) {
            that.setData({
                phonemask: res.phoneMask
            })
            }
        })
    }
})

建议在真要登录时进行调用，不要无脑直接在页面 onLoad 中直接调，如果 APP 已经登录身份了，就不要执行它了

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

<button wx:if="{{phonemask!=null}}" open-type="phoneOneClickLogin" bindphoneoneclicklogin="loginnosms" bindtap="startloginnosms">快速登录({{phonemask}})</button>

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

在手机号登录后，APP 已经登录了身份信息，此时可以调用 wx.getIdentityCode 来获取 code。（也可以直接在 bindphoneoneclicklogin 回调中获得，如果业务无法当时处理，可以使用 wx.getIdentityCode 多次获得）

在服务器中，使用 code2Verifyinfo 接口换取登录信息，信息样式大概如下：

{
"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 进行绑定

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 接口完成账号注销，注销后再操作绑定微信。

如果微信已经和其他登录方式绑定了，可以通过在服务器中调用 unbindWeixin 接口完成将微信方式从一个 user_id 中解绑，然后再操作绑定微信到手机号下的 user_id 中。

如果你不知道 user_id，可以操作登录微信后使用 code2Verifyinfo 接口换取登录信息，获取其中的 user_id

# 三、检查绑定信息

当操作绑定成功后，你可以使用 code2Verifyinfo 接口重新获取登录信息，成功绑定后的登录信息格式大概如下：

{
  "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
  }
}

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

# 一、 手机号登录的实现

# 二、 微信登录绑定

# 三、检查绑定信息

# 一、手机号登录的实现

# 二、微信登录绑定