uni-app系列二:微信小程序授权,获取用户信息和手机号码 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

uni-app系列二:微信小程序授权,获取用户信息和手机号码

发表时间:2021-1-4

发布人:葵宇科技

浏览次数:275

微信小程序中比较常用的就是通过微信的账号体系授权登录了,这样子省去了手动注册登录的流程,而且信息的真实性也是比较可靠的。

这一篇,就是说明在uni-app中怎么实现微信小程序的授权登录操作,结合后端PHP接口实现整个流程

老规矩,开始撸码


一 微信小程序获取code传到服务端获取openid和session_key

步骤:

  1. 微信小程序调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
  2. 服务端调用 auth.code2Session 接口,换取 用户唯一标识 OpenID会话密钥 session_key

二 服务端获取开放数据

这里使用方式一 开发者后台校验与解密开放数据

步骤:

  1. 服务端根据微信小程序的appid,用户openid,上一步获取的openid还有wx.getUserInfo()方法获取encryptedData和iv 这4个数据结合官方提供的案例解析出用户信息的数据

  2. 若解析成功,执行后续操作;解析失败,查找失败原因。

以上两个步骤就是微信官方提供的授权获取用户信息的方法了,具体可以看文档说明,这里只是简要说明


三 小程序端实现代码

1.第一步就是小程序先要通过 wx.login()方法获取code,这个只要调用方法即可获取参数。

2.第二步是通过wx.getUserInfo()方法获取encryptedData和iv这两个数据,如果是第一次登录的话,直接调用会直接进入 fail 回调,详见公告,接口升级之后是要使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。因为button必须是手动点击触发的,所以实现思路是

2.1点击open-type 指定为 getUserInfo 类型的button,首先获取encryptedData和iv信息,

2.2接着success回调里面调用wx.login()获取code。

2.3将code发送给服务端换取openid和session_key

2.4获取openid成功回调之后将openid和2.1获取到的encryptedData和iv发送给服务端解析用户信息,执行登录成功的操作

3.先上页面截图

4.重点就是 授权登录 这个按钮了

<button open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="getUserInfo">授权登录</button>
复制代码

指定button的open-type类型为 getUserInfo,并设置回调方法getUserInfo()

以下是整个方法执行流程,按照执行顺序依次如下

export default {
	data() {
		return {
		    userdetail: {}
		}
	},
	methods: {
		getUserInfo(res) {
			this.userdetail = res.detail; //将用户信息存起来,下次使用
			this.login();调用wx.login()方法获取code
		},
		login() {
		    uni.login({
			provider: 'weixin',
			    success: res => {
				this.wxLogin(res.code);
			    },
			    fail: err => {
				console.log('err', err);
			    }
			});
		},
                //调用接口,通过code换取openid,session_key保存在服务端解析时会用到
                wxLogin(code) {		    let params = {
			 code
		    };
		    this.$ajax.wxlogin(params).then(res => {
			this.wxAuth(res.data.openid);
		    });
		},
               //解析数据
		wxAuth(openid) {
			let params = {
				openid,
				iv: this.userdetail.iv,
				encryptedData: this.userdetail.encryptedData
			};
			this.$ajax.wxAuth(params).then(res => {
				uni.showToast({
                                        title: '授权成功',
                                        duration: 2000				})			});
		}
	}
}
复制代码

四 服务端实现代码 以PHP为例

PHP以codeigniter 为例

//获取openid
    public function index_post()
    {
       // 微信 appid及app_secret 微信开发者后台获取
        $appid = ""
        $secret = ""
        $post = $this->input->post();
        $code = trim($post['code']); //获取小程序传递过来的code值
        $ajax_url = "https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";
        $res = functionHelper::ajax_get($ajax_url); 自定义方法发起get请求
        $data = http://www.wxapp-union.com/array();
        if (!empty($res)) {
         //解析成功的数据需要json_decode转成json格式            $res_arr = json_decode($res, true);
            if ($res_arr) {
                //将openid返回给小程序
                $data['data']['openid'] = $res_arr['openid'] ? $res_arr['openid'] : '';
                //session_key保存在redis里面,不返回给小程序,官方是说这样子比较安全,手动狗头
                $this->cache->redis->save($res_arr['openid'], $res_arr['session_key'], 3000);
            }
            //返回数据
            responseHelper::response_ok($this, $data);
        } else {
            responseHelper::response_bad_request($this, "请求失败");
        }
    }

//解密,获取用户信息/手机号码
    public function auth_post()
    {
     // 微信 appid微信开发者后台获取        $appid = "";
        $post = $this->input->post(); //获取小程序传递过来的参数
        $openid = $post['openid'];
        $encryptedData = http://www.wxapp-union.com/$post['encryptedData'];
        $iv = $post['iv'];
        //根据openid从redis里面获取上一步存的对应openid的sessionKey
        $sessionKey = $this->cache->redis->get($openid);
        $pc = new WXBizDataCrypt($appid, $sessionKey);
        $errCode = $pc->decryptData($encryptedData, $iv, $data);
        if ($errCode == 0) {
             //解析成功的数据需要json_decode转成json格式
            $data_arr = json_decode($data, true);
	    responseHelper::response_ok($this, $data_arr);
        } else {
            responseHelper::response_bad_request($this, "解析失败");
        }
    }

//自定义ajax_get完整代码如下,只需传入拼接好的url即可
public static function ajax_get($durl)    {
        // header传送格式
        $headers = array();
        // 初始化
        $curl = curl_init();
        // 设置url路径
        curl_setopt($curl, CURLOPT_URL, $durl);
        // 将 curl_exec()获取的信息以文件流的形式返回,而不是直接输出。
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        // 在启用 CURLOPT_RETURNTRANSFER 时候将获取数据返回
        curl_setopt($curl, CURLOPT_BINARYTRANSFER, true);
        // 添加头信息
        curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
        // CURLINFO_HEADER_OUT选项可以拿到请求头信息
        curl_setopt($curl, CURLINFO_HEADER_OUT, true);
        // 不验证SSL
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
        // 执行
        $data = http://www.wxapp-union.com/curl_exec($curl);
        // 关闭连接
        curl_close($curl);
        // 返回数据
        return $data;
    }
复制代码

五 获取手机号码

获取手机号码和获取用户的流程和解析方法都是一样的,差别就是 button类型需要设置为getPhoneNumber,仅此一个差别。获取手机号码的流程就留给各位小伙伴自己测试了。


作者:就是个人
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关案例查看更多