uniapp一键登录

uniapp一键登录

官方指导

前端自学习自整理如下：

用户服务协议地址：请填写具体地址

const v_univerifyStyle =  {  
    "fullScreen": "false", // 是否全屏显示，默认值： "false"
    "backgroundColor": "#ffffff",  // 授权页面背景颜色，默认值：#ffffff
    "backgroundImage": "", // 全屏显示的背景图片，默认值："" （仅支持本地图片，只有全屏显示时支持）  
    "icon": {  
        "path": "static/logo.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo   
    },  
    "phoneNum": {  
        "color": "#202020"  // 手机号文字颜色 默认值：#202020  
    },  
    "slogan": {  
        "color": "#BBBBBB"  //  slogan 字体颜色 默认值：#BBBBBB  
    },  
    "authButton": {  
        "normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5  
        "highlightColor": "#2861c5   ",  // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）  
        "disabledColor": "#73aaf5",  // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）  
        "textColor": "#ffffff",  // 授权按钮文字颜色 默认值：#ffffff  
        "title": "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”  
        "borderRadius": "24px"    // 授权按钮圆角 默认值："24px" （按钮高度的一半）
    },  
    "otherLoginButton": {  
        "visible": "true", // 是否显示其他登录按钮，默认值：true  
        "normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明 
        "highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明 
        "textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565  
        "title": "其他登录方式", // 其他登录方式按钮文字 默认值：“其他登录方式”  
        "borderColor": "",  //边框颜色 默认值：透明（仅iOS支持）  
        "borderRadius": "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
    },  
    "privacyTerms": {  
        "defaultCheckBoxState":"false", // 条款勾选框初始状态 默认值： true   
        "textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB  
        "termsColor": "#ef8200", //  协议文字颜色 默认值： #5496E3  
        "prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”  
        "suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”  
        "privacyItems": [  
            // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效  
            {  
                "url": '用户服务协议地址', // 点击跳转的协议详情页面  
                "title": "用户服务协议" // 协议名称  
            }  
        ]  
    },
    "buttons": {  // 自定义登陆按钮
      "iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px
      "list": [
        {
          "provider": "apple",
          "iconPath": "/static/apple.png" // 图标路径仅支持本地图片
        }, 
        {
          "provider": "weixin",
          "iconPath": "/static/wechat.png" // 图标路径仅支持本地图片
        }
      ]
    }
}

页面调出一键登录弹框

<view v-if="is_can_univerify" class="" @click="univerify_login">一键登录</view>

that.v_univerifyStyle 为上文定义的配置，that.is_can_univerify看是否显示一键登录按钮

univerify_login(){
				let that = this;
				uni.preLogin({
				    provider: 'univerify',
				    success(){  //预登录成功
				        // 显示一键登录选项
						that.is_can_univerify = true ;
						uni.login({
						    provider: 'univerify',
						    univerifyStyle:  that.v_univerifyStyle ,// 自定义登录框样式 //参考`univerifyStyle 数据结构`
						    
						  
						    success(res){ // 登录成功
						        console.log(res.authResult);  // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
						        //请求公司服务器，开发后台已上传云函数供公司后台调用，后台也已申请通过得到了一键登录的参数
						    },
						    fail(res){  // 登录失败
						        console.log(res.errCode)
						        console.log(res.errMsg)
						    }
						})
						
				    },
				    fail(res){  // 预登录失败
						that.is_can_univerify = false ;
				        // 不显示一键登录选项（或置灰）
				    // 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
				        console.log(res.errCode)
				        console.log(res.errMsg)
				    }
				})
			},
		

有疑问，找客服

扫描公众号，了解更多实例分享：

参考

官方指导