uniapp 本机号码一键登录并获取手机号

4,357 阅读3分钟

image.png

提示:三方登录模块参数配置需提交云端打包后才能生效,真机运行调试时请使用自定义基座

image.png

image.png

一键登录

login() {
    let that = this
    const univerifyManager = uni.getUniverifyManager()

    // 预登录
    univerifyManager.preLogin()

    // 调用一键登录弹框
    univerifyManager.login({
       univerifyStyle: {
           "fullScreen": true
       },
       success(res) {
           console.log('login success', res)
           // 关闭一键登录弹框
           univerifyManager.close()
       },
       fail(res) { // 登录失败
           if (30002 === res.errCode) { // 切换登录方式

           }
       }
    })
}

用access_token换手机号

客户端获取到 access_token 后,传递给uniCloud云函数,云函数中通过uniCloud.getPhoneNumber方法获取真正的手机号。

uni-app项目使用uniCloud.callFunction的方式调用云函数

如果是未开通过uniCloud的uni-app项目:

  1. 首先开通uniCloud服务空间,参考
  2. 对项目点右键,创建uniCloud开发环境,然后绑定到上一步创建的服务空间上
  3. 对uniCloud/cloudfunctions/点右键,创建云函数
  4. 分别在前端和云端复制下列代码
  5. 对云函数点右键,上传到服务空间

image.png

image.png

image.png

客户端示例:

// 在得到access_token后,通过callfunction调用云函数
uniCloud.callFunction({
  name: 'xxx', // 你的云函数名称
  data: {
    'access_token': 'xxx', // 客户端一键登录接口返回的access_token
    'openid': 'xxx' // 客户端一键登录接口返回的openid
  }
}).then(res => {
  // res.result = {
  //   code: '',
  //   message: ''
  // }
  // 登录成功,可以关闭一键登录授权界面了
}).catch(err=>{
  // 处理错误
})

云函数代码getPhoneNumber示例:

'use strict';
exports.main = async (event, context) => {
  // event里包含着客户端提交的参数
  const res = await uniCloud.getPhoneNumber({
  	appid: '_UNI_ABCDEFG', // 替换成自己开通一键登录的应用的DCloud appid
  	provider: 'univerify',
  	access_token: event.access_token,
  	openid: event.openid
  })

  console.log(res); // res里包含手机号
  // 执行用户信息入库等操作,正常情况下不要把完整手机号返回给前端
  // 如果数据库在uniCloud上,可以直接入库
  // 如果数据库不在uniCloud上,可以通过 uniCloud.httpclient API,将手机号通过http方式传递给其他服务器的接口,详见:https://doc.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
  return res
}

打正式包后获取手机号报错

{"errMsg":"fc_function_not_found getPhoneNumber" , "errCode":"InternalBizError", "code":"InternalBizError","requestld":"ac1cc3061703577596669187243"}

解决:需要将获取手机号的云函数上传部署

image.png

整合:获取一键登录获取手机号

login() {
    const univerifyManager = uni.getUniverifyManager()

    // 预登录
    univerifyManager.preLogin()

    // 调用一键登录弹框
    univerifyManager.login({
        univerifyStyle: {
            "fullScreen": true
        },
        success(res) {
            // 获取手机号码
            uniCloud.callFunction({
                name: 'getPhoneNumber',
                data: {
                    'access_token': res.authResult.access_token, 
                    'openid': res.authResult.openid 
                }
            }).then(res => {
                let data=JSON.stringify(res)
                console.log(data)
                // 登录成功 关闭一键登录弹框
                univerifyManager.close()
                
                // 按需调用 登录接口获取token和其他信息
            }).catch(err => {
                // 处理错误
                console.log('err:' + err)
            })
        },
        fail(res) { // 登录失败
            if (30002 === res.errCode || 30003 === res.errCode || 30006 === res.errCode) {
                setTimeout(() => {
                    univerifyManager.close()
                    
                    // 前往登录页 30002切换登录方式
                   
                }, 1000)
            } else if (30005 === res.errCode && res.errMsg.indexOf('20202') > -1) {
                uni.$showMsg('温馨提示:请开启手机流量,使用手机号一键注册登录')
            }
        }
    })
}

或者

uni.preLogin({ //预登录
    provider: 'univerify', //用手机号登录
    success() {
        uni.login({
            provider: 'univerify', 
            univerifyStyle: {
                "fullScreen": true
            },
            success(res) {
                // 获取手机号码
                uniCloud.callFunction({
                    name: 'getPhoneNumber',
                    data: {
                        'access_token': res.authResult.access_token,
                        'openid': res.authResult.openid
                    }
                }).then(res => {
                    // 登录成功 关闭一键登录弹框
                    uni.closeAuthView()
                    
                    // 按需调用 登录接口获取token和其他信息
                }).catch(err => {
                    console.log(err)
                    uni.closeAuthView()
                })
            },
            fail(res) {
                console.log(res)
                if (30002 === res.errCode || 30003 === res.errCode || 30006 === res.errCode) {
                    if (30006 === res.errCode) {
                        uni.$showMsg(res.errMsg);
                    }
                    setTimeout(() => {
                        uni.closeAuthView()
                        // 前往登录页 30002切换登录方式
                    }, 1000)
                } else if (30005 === res.errCode && res.errMsg.indexOf('20202') > -1) {
                    uni.$showMsg('温馨提示:请开启手机流量,使用手机号一键注册登录')
                } else {
                    uni.$showMsg(JSON.stringify(res));
                }
            }
        })
    }
})

image.png 报了上面这个错,未打开一键登录页,处理如下:

断开wifi,使用自己的数据流量,这时候就能打开了一键登录页了,后面获取手机号报错,提示链接不上unicloud,这时候打开wifi与电脑连接同一个wifi,关掉HBuilder重新打开重新运行既可

参考链接:

doc.dcloud.net.cn/uniCloud/un…

uniapp.dcloud.net.cn/univerify.h…

uniapp.dcloud.net.cn/tutorial/ap…

开通一键登录:

1、先打个包

生成证书: ask.dcloud.net.cn/article/357…

image.png

2、开通uniCloud服务空间,参考

image.png

image.png

image.png

image.png