uniapp中,调用微信手机号一键登录

Daotin 于 2023-11-10 发布 编辑

一键登录和手机号登录差不多,只不过需要先通过特殊的 button 标签,获取到加密后的手机号,后面和手机号登录是一样的。

首先,需要有一个 button 标签:

<button type="primary" open-type="getPhoneNumber" @getphonenumber="getUserPhone" lang="zh_CN" class="touch_btn">微信用户一键登录</button>

open-type=”getPhoneNumber” 这个按钮允许用户授权小程序获取他们的手机号码。

如果用户同意授权,微信会将加密的手机号信息发送给前端(在@getphonenumber 回调中拿到)

然后,调用 uni.login 获取 code,通过 code 调用后端接口获取 openid,调用登录接口,传入 openid,加密的手机号,得到 token。

总结下流程:

  1. 输入手机号,调用后端接口,获取验证码
  2. 点击登录。调用 uni.login 获取 code,通过 code 调用后端接口获取 openid,调用登录接口,传入 openid,手机号,验证码,得到 token
getUserPhone(obj) {
  const desPhone = obj.code
	uni.login({
		success: (res) => {
	    // 拿到code
	    const code = res.code
	    // 拿到openid
			const openid = this.handelGetOpenId(code)
	    // 调用登录接口
	    this.handelSubmit(openid, desPhone)
		}
	})
}