uni-app 微信小程序授权登录

1.appID配置

在manifest.json中输入申请的微信小程序id

uni-app 微信小程序授权登录

 

 

 2.获取用户信息

可以使用uni.getUserProfile请求用户授权获取用户信息, 也可以使用uni.getUserInfo获取

uni-app 微信小程序授权登录

 

 

 授权成功后获取到的用户信息在userInfo中:

uni-app 微信小程序授权登录

 

 

 

uni.getUserProfile({
                    desc: ‘123‘,
                    lang: ‘zh_CN‘,
                    success: res => {    
                                   console.log(res)
                                }
                            })        

3.调用登录api

使用uni.login方法,provider参数输入‘weixin‘,成功的返回值中如果errMsg="login:ok" 代表成功,

微信小程序端会返回一个code字符串

uni-app 微信小程序授权登录

 

 

 4.使用获取到的code请求微信登录接口,获取 openid 和 session_key

uni-app 微信小程序授权登录

 

 

 

请求微信官方文档中的jscode2Session接口:

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

替换为自己的参数,appId和Secret为申请微信小程序时获取的AppID和appSecret,js_code为刚才uni.login获取到的code,最后一个参数为固定值‘authorization_code’

调用成功后,会获取到该用户的openId,唯一标识微信用户

uni-app 微信小程序授权登录

 

 

 uni-app 微信小程序授权登录

5.绑定用户 实现登录

获取到微信用户的唯一id后,就可以绑定至自己系统中的用户,我的做法是在用户表中加入weixinId字段,跳转至自己的用户绑定界面,如果用户选择绑定微信,则更新该行用户数据的weixinId。下次用户使用微信登录时,如果通过openId能够查询到一条用户数据,说明已经绑定,则登录该用户

完整代码:

uni.getUserProfile({
                    desc: ‘123‘,
                    lang: ‘zh_CN‘,
                    success: res => {
                        //拉取用户成功,调用登录
                        uni.login({
                            provider: ‘weixin‘,
                            success: res => {
                                //console.log(res);
                                if (res.errMsg == "login:ok") {
                                    this.code = res.code;
                                    //请求后端接口换取 openid 和 session_key,这里放到后端去请求code2Session接口,将返回的openid和sessionkey再返回给前端                     

                        uni.request({
                        url: ‘WebService/xxxxxxxx/GetWxOpenId‘,
                        data: {
                          code: this.code
                          }
                        }).then((res)=>{

                        //获取到 openid 和 session_k后,自己的逻辑

                          console.log(res.openId);
                          console.log(res.session_key);

                        //DoSomeThing.................

                        })

                                } else {

                                    uni.showModal({
                                        title: ‘登录失败‘,
                                        content: ‘系统异常,请联系管理员‘
                                    });
                                }
                            }
                        })

                    },
                    fail: faleres => {
                        console.log(faleres);
                        uni.hideLoading();
                    }
                })

 

uni-app 微信小程序授权登录

上一篇:小白学Go| 说说Go中变量那些事~


下一篇:微信Vue框架构建Part5——渲染对象数据