uniapp 一键登录

uniapp 一键登录

链接: link

    // 判断是否支持一键登陆
    isAutoLogin() {
      let _that = this
      uni.preLogin({ //预登录
        provider: 'univerify', //用手机号登录
        success() {
          console.log('预登录成功')
          uni.login({ //正式登录，弹出授权窗
            provider: 'univerify',
            univerifyStyle: { // 自定义登录框样式
              //参考`univerifyStyle 数据结构`
              "fullScreen": true, // 是否全屏显示，默认值： false
              "title": '快速登录',
              "backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
              "icon": {
                "path": "" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
              },
              "phoneNum": {
                "color": "#000000", // 手机号文字颜色 默认值：#000000
                "fontSize": "18" // 手机号字体大小 默认值：18
              },
              "slogan": {
                "color": "#8a8b90", //  slogan 字体颜色 默认值：#8a8b90
                "fontSize": "12" // slogan 字体大小 默认值：12
              },
              // 一键登录
              "authButton": {
                "normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5
                "highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
                "disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
                "textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
                "title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”
              },
              // 其他登录方式
              "otherLoginButton": {
                "visible": "true", // 是否显示其他登录按钮，默认值：true
                "normalColor": "#f8f8f8", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
                "highlightColor": "#dedede", // 其他登录按钮按下状态背景颜色 默认值：#dedede
                "textColor": "#000000", // 其他登录按钮文字颜色 默认值：#000000
                "title": "密码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
                "borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）
                "borderColor": "#c5c5c5" //边框颜色 默认值： #c5c5c5（仅ios支持）
              },
              // 自定义按钮登录方式
              "buttons": { // 仅全屏模式生效，配置页面下方按钮  （3.1.14+ 版本支持）  
                "iconWidth": "45px",        // 图标宽度（高度等比例缩放） 默认值：45px  
                "list": [{
                  "provider": "apple",
                  "iconPath": "",  // 图标路径仅支持本地图片  
                },
                {
                  "provider": "weixin",
                  "iconPath": "",
                }
                ]
              },
              "privacyTerms": {
                "defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值： true
                "textColor": "#8a8b90", // 文字颜色 默认值：#8a8b90
                "termsColor": "#1d4788", //  协议文字颜色 默认值： #1d4788
                "prefix": "我已阅读并同意0", // 条款前的文案 默认值：“我已阅读并同意”
                "suffix": "并使用本机号码登录1", // 条款后的文案 默认值：“并使用本机号码登录”
                "fontSize": "12", // 字体大小 默认值：12,
                "privacyItems": [
                  // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
                  {
                    "url": "https://", // 点击跳转的协议详情页面
                    "title": "用户服务协议" // 协议名称
                  }
                ]
              }
            },
            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)
                  // {"code":0,"success":true,"phoneNumber":"15131084428"} 
                },
                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)
        }
      })
    },

uniCloud-aliyun文件下找到cloudfunctions
新建文件夹getPhoneNumber里创建index.js

'use strict';
exports.main = async (event, context) => {
	const res = await uniCloud.getPhoneNumber({
		appid: '__UNI__6A6B707',// 在manifest.json里面可以找到
		provider: 'univerify',
		apiKey: 'e08ae3b7e18581b996589b0f84c2e5ba',// 在DCloud开发者中心开通一键登录基础服务时自动生成的
		apiSecret: '78ed705cb1534b3ab83f6e1210c341fb',// 开通一键登录基础服务时自动生成的
		access_token: event.access_token,
		openid: event.openid
	});
	console.log(res,"res"); // res里的数据格式	{ code: 0, success: true, phoneNumber: '186*****078' }
	return {
		code: 0,
		data: res,
		message: '获取手机号成功'
	}
};