精华内容
下载资源
问答
  • uni-app实现一键登录思路如下: 1、通过 button 标签获取用户信息 2、调用 uni.login 方法,获取到 code 3、将 code chuan'di'dao'hou'tai

    uni-app实现一键登录思路如下:

    1、通过 button 标签获取用户信息(设置button的open-type为getPhoneNumber,并通过@getphonenumber回调获取到信息)

    2、调用 uni.login 方法,获取到 code

    3、拿着获取到的 code 和用户信息请求后端接口

    其实现代码如下:

    html代码

    <button class="button-div" type="primary" open-type="getPhoneNumber" @getphonenumber="getUserInfo">
    		微信用户一键登录
    <button>

    js代码

    /**
    * 获取到手机号的回调
    */
    getUserInfo(e) {
        if (e && e.detail.errMsg === 'getPhoneNumber:ok') {
    		uni.showLoading({
    			mask: true,
    			title: '加载中'
    		});
    		let self = this;
    		uni.login({
    			provider: 'weixin',
    			success: result => {
    			    if (result && result.code) {
                        // 此时获取到了用户信息和code,使用这些信息去调用后端接口实现自身逻辑
    			        self.authorizeInfo(self.phoneNumberInfo.detail, result.code);
    			    }
    			},
    			fail: result => {
    				console.log(result)
    			}
    		});
    	}
    },

    写完以上代码,登录的逻辑就实现了,但是在测试过程中却发现每次登录都要点击两次按钮才能成功,后端反馈是encryptedData解密失败导致的,解决方法:

    在调用getUserInfo()之前先调用一次uni.login方法

     

    展开全文
  • #73aaf5(仅ios支持) "textColor": "#ffffff", // 授权按钮文字颜色 默认值:#ffffff "title": "本机号码一键登录", // 授权按钮文案 默认值:“本机号码一键登录” "borderRadius": "24px" // 授权按钮...

    1、首先需要在dcloud开发者控制台开通一键登录,

    dcloudhttps://dev.dcloud.net.cn/uniLoginicon-default.png?t=L9C2https://dev.dcloud.net.cn/uniLogin

     充值,获取关键参数 ApiKey 和 ApiSecret

    2、登录云服务空间,创建云服务空间,选择运营商等  https://unicloud.dcloud.net.cn/home

    3、在项目中创建 云开发环境 ,本项目演示选择的是阿里云服务器 

    4、项目目录  创建 getPhoneNumber/index.js

    一键登录云函数 uni-app官网

     getPhoneNumber/index.js

    // 云函数
    'use strict';
    
    const db = uniCloud.database()
    exports.main = async (event) => {
    	const res = await uniCloud.getPhoneNumber({
    		appid: '__UNI__123456', // 替换成自己开通一键登录的应用的DCloud appid
    		provider: 'univerify',
    		apiKey: 'abcdefghjklokdsadsadsa', // 在开发者中心开通服务并获取apiKey
    		apiSecret: 'abscdshjksdhjakdahshjdsad', // 在开发者中心开通服务并获取apiSecret
    		access_token: event.access_token,
    		openid: event.openid
    	})
    	// 执行入库等操作,正常情况下不要把完整手机号返回给前端	
    	await db.collection('regUser').add({
    		openid: event.openid, //前端提交过来的数据
    		PhoneNumber: res.phoneNumber,
    		createTime: Date.now()
    	})
    
    	return res
    }
    

    5、右键关联云服务空间 

     

     选择创建的云空间

    关联后上传云函数

    6、一键登录本地方法

    import Vuex from '@/store/index.js'
    
    export function univerifyLogin(cb, fun, fun1) {
    	const commit = Vuex.commit;
    	const PROVIDER = 'univerify';
    	const univerifyStyle = {
    		"fullScreen": true,
    		"icon": {
    			"path": "static/icon/logo.png" // 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo   
    		},
    		"authButton": {
    			"normalColor": "#00A861", // 授权按钮正常状态背景颜色 默认值:#3479f5  
    			"highlightColor": "#008B50", // 授权按钮按下状态背景颜色 默认值:#2861c5(仅ios支持)  
    			"disabledColor": "#7fd4b0", // 授权按钮不可点击时背景颜色 默认值:#73aaf5(仅ios支持)  
    			"textColor": "#ffffff", // 授权按钮文字颜色 默认值:#ffffff  
    			"title": "本机号码一键登录", // 授权按钮文案 默认值:“本机号码一键登录”  
    			"borderRadius": "24px" // 授权按钮圆角 默认值:"24px" (按钮高度的一半)
    		},
    		"privacyTerms": {
    			"defaultCheckBoxState": true, // 条款勾选框初始状态 默认值: true
    			"uncheckedImage": "", // 可选 条款勾选框未选中状态图片(仅支持本地图片 建议尺寸 24x24px)(3.2.0+ 版本支持)   
    			"checkedImage": "", // 可选 条款勾选框选中状态图片(仅支持本地图片 建议尺寸24x24px)(3.2.0+ 版本支持)   
    			"textColor": "#BBBBBB", // 文字颜色 默认值:#BBBBBB  
    			"termsColor": "#00A861", //  协议文字颜色 默认值: #5496E3  
    			"prefix": "我已阅读并同意", // 条款前的文案 默认值:“我已阅读并同意”  
    			"suffix": "并使用本机号码登录", // 条款后的文案 默认值:“并使用本机号码登录”  
    		},
    	}
    	return new Promise((resolve, reject) => {
    		uni.getProvider({
    			service: 'oauth',
    			success: (res) => {
    				if (res.provider.indexOf(PROVIDER) !== -1) {
    					// 一键登录已在APP onLaunch的时候进行了预登陆,可以显著提高登录速度。登录成功后,预登陆状态会重置
    
    					uni.login({
    						provider: PROVIDER,
    						univerifyStyle: univerifyStyle,
    						success: (res) => {
    							let loginRes = res.authResult
    							uni.closeAuthView();
    							uni.showLoading({
    								title: "登录中..."
    							});
    							uniCloud.callFunction({
    								name: 'getPhoneNumber', // 你的云函数名称
    								data: {
    									access_token: loginRes
    									.access_token, // 客户端一键登录接口返回的access_token
    									openid: loginRes
    										.openid // 客户端一键登录接口返回的openid
    								}
    							}).then(e => {
    								console.log('login success', e);
    								if (e.result.code == 0) {
    									typeof fun == "function" && fun(e.result)
    									resolve('suc');
    								} else {
    									console.log('登录失败', e);
    								}
    							})
    							.catch(err => {
    								// 处理错误
    								console.error("获取手机号err", err)
    								uni.showModal({
    									title: `登录失败`,
    									content: err.errMsg ||
    										"网络异常,请选择其他方式登录",
    									showCancel: false
    								})
    								typeof fun1 == "function" && fun1(err)
    								reject('err')
    							})
    
    						},
    						fail: (err) => {
    							console.error('授权登录失败:' + JSON.stringify(err));
    
    							univerifyErrorHandler(err, cb);
    						}
    					})
    
    
    				} else {
    					cb && cb()
    				}
    			},
    			fail: (err) => {
    				console.error('获取服务供应商失败:' + JSON.stringify(err));
    				cb && cb()
    			}
    		});
    
    	})
    }
    
    export function univerifyErrorHandler(err, cb) {
    	const state = Vuex.state;
    	const obj = {
    		showCancel: true,
    		cancelText: '其他登录方式',
    		success(res) {
    			console.log("rinima", res)
    			if (res.confirm) {
    				uni.redirectTo({
    					url: '/pages/login/login'
    				});
    			}
    			if (res.cancel) {
    				cb && cb()
    			}
    		}
    	} 
    
    	switch (true) {
    		// 一键登录点击其他登录方式
    		case err.code == 30002:
    			uni.closeAuthView();
    			cb && cb()
    			break;
    			// 未开通
    		case err.code == 1000:
    			uni.showModal(Object.assign({
    				title: `登录失败: ${err.code}`,
    				content: `${err.errMsg}\n开通指南:https://ask.dcloud.net.cn/article/37965`,
    				/* confirmText: '开通指南',
    				cancelText: '确定',
    				success: (res) => {
    					if (res.confirm) {
    						setTimeout(() => {
    							plus.runtime.openWeb('https://ask.dcloud.net.cn/article/37965')
    						}, 500)
    					}
    				} */
    			}, obj));
    			break;
    			// 预登陆失败
    		case err.code == 30005:
    			uni.showModal(Object.assign({
    				showCancel: false,
    				title: `登录失败`,
    				content: `${state.univerifyErrorMsg ||err.metadata.desc || err.errMsg}`
    			}, obj));
    			break;
    			//用户关闭验证界面
    		case err.code == 30003:
    			setTimeout(() => {
    				uni.redirectTo({
    					url: '/pages/login/login'
    				});
    			},500)
    
    			break;
    	}
    }
    
    

    7、调用

     引入
    import { univerifyLogin } from '@/common/univerify.js'
    
     async openUnLogin() {
    				    await univerifyLogin(() => {
    					uni.redirectTo({
    						url: '/pages/login/login'
    					});
    				}, res => {
    					console.log("个人中心一键登录:", res)
    					let loginMobile = res.phoneNumber
    
    					this.userStoreLogin(loginMobile).then(res => {
    						console.error("登录成功llllllllllll", res)
    						this.userStoreUserInfos()
    						util.showText("登录成功");
    					})
    				})
    			},

    展开全文
  • uniapp一键登录

    2021-12-07 18:28:02
    un-app官网提供多种实现一键登录的方法,这里的选择是 自有服务器调用 二、uni-app准备账号 1、un-app官网注册账号,并在dcloud开发者中心创建应用 2、开通一键登录服务 保管好 ApiKey 和 ApiSecret 3、点击右下角...

    一、整理思路

    un-app官网提供多种实现一键登录的方法,这里的选择是 自有服务器调用

    官网: 很详细点击进入 —>uniapp 一键登录

    二、uni-app准备账号

    1、un-app官网注册账号,并在dcloud开发者中心创建应用

    2、开通一键登录服务 保管好 ApiKey 和 ApiSecret
    在这里插入图片描述

    3、点击右下角的添加应用并提交申请
    在这里插入图片描述

    4、添加服务空间
    在这里插入图片描述

    三、uni-app开通一键登录

    1、uni-app项目开通uniCloud服务

    关联云空间选择阿里云或腾讯云均可
    在这里插入图片描述

    2、新建云函数
    在这里插入图片描述

    3、新建云函数后会有一个index.js生成,粘贴以下代码

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

    4、保存后上传部署到云空间

    在这里插入图片描述

    5、勾选一键登录(项目中的 manifest.json)
    在这里插入图片描述

    四、项目编码

    1、调取一键登录

    uniapp 官网一键登录

    官方有示例代码

    uni.login({
    	provider: 'univerify',
    	success(res) { // 登录成功
    		console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
    		res.authResult.accessToken = res.authResult.access_token
    		return that.$request({
    			method: 'POST',
    			url: '后台做具体逻辑的接口',
    			data: res.authResult
    		}).then(res => {
    			uni.closeAuthView() //成功关闭授权页面
    			console.log('登录成功', res)
    			if (res.code) return
    			that.$store.commit('setToken', res.data)
    			that.$util.msg('登录成功')
    			setTimeout(() => {
    				uni.redirectTo({
    					url: '登陆成功跳转的目标页面'
    				})
    			}, 500)
    		})
    	},
    	fail(res) { // 登录失败
    		console.log(res.errCode)
    		console.log(res.errMsg)
    	}
    })
    

    2、日志可以再云函数列表查看

    云函数可在云函数列表查看
    在这里插入图片描述

    3、云函数url化

    在云函数列表点击详情,下拉到底部点击编辑设置一个url
    在这里插入图片描述

    4、后台写具体逻辑
    在这里插入图片描述

    5、需要的工具类
    1、HeaUtil.java

    public class HeaUtil {
        /**
         * sha256_HMAC加密
         *
         * @param message 消息
         * @param secret  秘钥
         * @return 加密后字符串
         */
        public static String sha256_HMAC(String message, String secret) {
            String hash = "";
            try {
                Mac sha256_HMAC = Mac.getInstance("HmacSHA256");
                SecretKeySpec secret_key = new SecretKeySpec(secret.getBytes(), "HmacSHA256");
                sha256_HMAC.init(secret_key);
                byte[] bytes = sha256_HMAC.doFinal(message.getBytes());
                hash = byteArrayToHexString(bytes);
            } catch (Exception e) {
                System.out.println("Error HmacSHA256 ===========" + e.getMessage());
            }
            return hash;
    
        }
    
        /**
         * 将加密后的字节数组转换成字符串
         *
         * @param b 字节数组
         * @return 字符串
         */
        private static String byteArrayToHexString(byte[] b) {
            StringBuilder hs = new StringBuilder();
            String stmp;
            for (int n = 0; b != null && n < b.length; n++) {
                stmp = Integer.toHexString(b[n] & 0XFF);
                if (stmp.length() == 1)
                    hs.append('0');
                hs.append(stmp);
            }
            return hs.toString().toLowerCase();
        }
    }
    
    
    展开全文
  • 最近要做一个uniapp一键登录。 第一步:上传云函数: // 云函数验证签名,此示例中以接受GET请求例作演示 const crypto = require('crypto') module.exports = async(event){ const secret = 'your-secret-...

    最近要做一个uniapp 的一键登录。  

    第一步:上传云函数:

    'use strict';
    exports.main = async (event, context) => {
        //event为客户端上传的参数
        console.log('event : ', event)
        // event里包含着客户端提交的参数
        const res = await uniCloud.getPhoneNumber({
            appid: '', // 替换成自己开通一键登录的应用的DCloud appid,使用callFunction方式调用时可以不传(会自动取当前客户端的appid),如果使用云函数URL化的方式访问必须传此参数
            provider: 'univerify',
            apiKey: '', // 在开发者中心开通服务并获取apiKey
            apiSecret: '', // 在开发者中心开通服务并获取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 {
            code: 0,
            message: '获取手机号成功',
            data:res
        }
    };
     

     

    第二步:java 写一个 HeaUtil 工具类。用于校验签名。


    import java.util.HashMap;
    import java.util.Map;
    import javax.crypto.Mac;
    import javax.crypto.spec.SecretKeySpec;
    import com.yuyuan.internet.common.utils.HttpClientUtil4;

    /**
     * @Describe: Hmac加密工具类
     */
    public class HeaUtil  {

     
        /**
         * sha256_HMAC加密
         * @param message 消息
         * @param secret 秘钥
         * @return 加密后字符串
         */
        public static String sha256_HMAC(String message, String secret) {
            String hash = "";
            try {
            Mac sha256_HMAC = Mac.getInstance("HmacSHA256");
            SecretKeySpec secret_key = new SecretKeySpec(secret.getBytes(), "HmacSHA256");
            sha256_HMAC.init(secret_key);
            byte[] bytes = sha256_HMAC.doFinal(message.getBytes());
            hash = byteArrayToHexString(bytes);
            } catch (Exception e) {
            System.out.println("Error HmacSHA256 ===========" + e.getMessage());
            }
            return hash;
        }
        
        /**
         * 将加密后的字节数组转换成字符串
         * 
         * @param b
         *字节数组
         * @return 字符串
         */
        private static String byteArrayToHexString(byte[] b) {
            StringBuilder hs = new StringBuilder();
            String stmp;
            for (int n = 0; b != null && n < b.length; n++) {
            stmp = Integer.toHexString(b[n] & 0XFF);
            if (stmp.length() == 1)
            hs.append('0');
            hs.append(stmp);
            }
            return hs.toString().toLowerCase();
        }
    }

     

    第三步: 调用uniapp云函数、置换出、用户手机号码出来。

            //调用uniapp云函数、置换出、用户手机号码出来。
            String sign = HeaUtil.sha256_HMAC("access_token="+accessToken+"&openid="+openid, "密钥");
            String url = "https://换成你的云函数地址.bspapp.com/http/loginByOwnSystem?access_token="+accessToken+"&openid="+openid+"&sign="+sign;
            String body =  HttpClientUtil4.sendPostSSLRequest(url,  null, "UTF-8");
            //失败案例{"success":false,"error":{"code":"FunctionBizError","message":"5000:errCode: 5000 | errMsg: 获取手机号码失败:获取号码失败"}}
            //登录成功{"code":0,"success":true,"phoneNumber":"18888888888"}

     

    2021年2月24日  add ----

    如果没有 HttpClientUtil4 工具类,贡献1个积分  不过分的把?  下面就是下载地址!

    https://download.csdn.net/download/tanwenkai198809004/15449662

    展开全文
  • uniapp 微信,支付宝登录 1.获取手机号2.获取个人信息(头像,昵称) <template> <!-- #ifdef MP-WEIXIN --> <uni-popup ref="popup" type="center"> <view class="center" v-if="type == 1...
  • if (StrUtil.isBlank(code)) { throw new BizException("code不能为空"); } WxMaJscode2SessionResult session = wxService.getUserService().getSessionInfo(code); String openid = session.getOpenid(); String ...
  • uni开发的H5接入QQ登录

    千次阅读 热门讨论 2020-05-16 12:16:24
    uni开发的H5接入QQ登录 本以为网上应该有现成的答案,没想到啊,没个有用的,只能自己琢磨,阿西八! uni-H5接入QQ流程 第一步:首先肯定要去QQ互联 申请开发者啦,然后注册,然后得到APPID,对,就是很基操的一套...
  • android app微信登录(android端+Java后台)积分: 22智慧币积分: 2 智慧币【0.67元 】包含内容: 源码,全套工具详情描述如遇视频清晰,请最大化观看演示以下仅列出部分功能,全部功能请至官网 《手册》查看播放暂停...

空空如也

空空如也

1
收藏数 8
精华内容 3
关键字:

uniapp调用一键登录报accesstoken不能为空