uni-app实现手机号一键登录

步骤

1.登录开发者中心账号,注意开发者账号要与开发者中心的账号保持一致

1664520292025.png

2.开通一键登录，注：本地测试无需开通右下角 添加应用。 （项目上线打包时在更新添加应用步骤）

1664520856651.png

ApiKey和ApiSecret 是换取手机号和计费凭证关键。
3.创建云函数空间与项目关联
4.在cloudfunction里创建云函数getPhoneNumber

1664522139369.png

5.在index.js里写入代码

'use strict';
const crypto = require('crypto')
exports.main = async (event, context) => {    
console.log('event : ', event); 
//event为客户端上传的参数    
console.log('参数', event); 
//云函数URL化的方式，获取参数    
const res = await uniCloud.getPhoneNumber({        
    appid: 'XXX', 
    // 开通一键登录的应用的DCloud appid，使用callFunction方式调用时可以不传（会自动取当前客户端的appid），如果使用云函数URL化的方式访问必须传此参数        
    provider: 'univerify',
    apiKey: 'XXXX', // 在开发者中心开通服务并获取apiKey
    apiSecret: 'XXXX', // 在开发者中心开通服务并获取apiSecret
    access_token: event.access_token,
    openid: event.openid,
})    
    console.log('res', res); // res里包含手机号    
    // 执行用户信息入库等操作，正常情况下不要把完整手机号返回给前端    
    // 如果数据库在uniCloud上，可以直接入库    
    // 如果数据库不在uniCloud上，可以通过 uniCloud.httpclient API，将手机号通过http方式传递给其他服务器的接口，详见：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient    
    return res
};

6.在package.json中设置，写完上传部署

{
  "name": "univerify",
  "dependencies": {},
  "extensions": {
    "uni-cloud-jql": {},
    "uni-cloud-verify": {}
  }
}

7.页面代码

// 判断是否支持一键登陆
isAutoLogin() {
  let _that = this
  // 这一步写不写问题都不大
   uni.getProvider({ //获取可用的服务提供商
    service: 'oauth',
    success: function(res) {
        console.log(res.provider) // ['weixin', qq', 'univerify']
        }
    });
   uni.preLogin({ //预登录
    provider: 'univerify', //用手机号登录
    success() {
        console.log('预登录成功')
        uni.login({ //正式登录，弹出授权窗
        provider: 'univerify',
        univerifyStyle: { // 自定义登录框样式 ，默认是在下方没有占满屏幕
                    },
            success(res) {
                console.log(res, 'uni.login');
                // 在得到access_token后，通过callfunction调用云函数
                uniCloud.callFunction({
                    name: 'getPhoneNumber', // 云函数名称
                    data: { //传给云函数的参数
                        'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token
                        'openid': res.authResult.openid // 客户端一键登录接口返回的openid
                        },
                    success(callRes) {
                        console.log('调用云函数成功', callRes)
                        // 此处可获得手机号，调用后端接口
                        console.log(callRes.result.data)
                        },
                        fail(callErr) {
                            console.log('调用云函数出错', callErr)
                        },
                        complete() {
                            uni.closeAuthView() //关闭授权登录界面
                        }
                    })
                },
                fail(err) { // 正式登录失败
                    console.log(err)
                    console.log(err.errMsg)
                    uni.closeAuthView() //关闭授权登录界面
                }
            })
        },

        fail(err) { //预登录失败
            console.log('错误码：', err)
            console.log(err.errMsg)
        }
    })
},

7.manifest.json配置

1664522447473.png

注：一键登录页面只在手机端可见