H5调起微信授权

一、通过连接调起授权后重定向至页面

window.location.href =
                'https://open.weixin.qq.com/connect/oauth2/authorize?		
				appid=wxXXXXXXXXXXXX 小程序appid 
				&redirect_uri=http://XXX.com 重定向至当前页面
				&response_type=code
				&scope=snsapi_userinfo //用户手动授权
				&state=#wechat_redirect'

二、微信云托管登陆

const wechatAppId = process.env.VUE_APP_WECHAT_APPID_MK;
const wechatResourceId = process.env.VUE_APP_WECHAT_RESOURCE_ID;
const wechatEnvId = process.env.VUE_APP_WECHAT_ENV_ID;

// 微信云托管登录 换取用户信息 
window.mplogin2.checkCloud({
    appid: wechatAppId,               // 必填,公众号appid,将以此appid名义进行请求
    resourceAppid: wechatAppId,       // 必填,如果是资源复用模式,需要填环境共享下资源方微信账号
    envid: wechatResourceId,                  // 必填,资源方微信云托管环境,如果传递此参数则会返回初始化的cloud操作对象
    signature: window.location.href,       // 选填,如果需要微信SDK的API方法,则填写要使用的地址,会返回signature签名对象,envid参数不填则无效。
    // region: ''                             // 选填,环境的地域,可选ap-guangzhou、ap-beijing,不填默认为ap-shanghai
    traceUser: false                        // 选填,默认true,是否在将用户访问记录到用户管理中,非上海地域请设置成false
}).then(res => {
    if (res.login === true) {
        if (res.cloud != null) {
            // 挂载全局函数
            window.app = res.cloud;
            // 开始业务
            window.flag = true
            console.log('用于操作的CLOUD对象', res.cloud)
            console.log('微信用户信息', res.info)

            const getWechatUserInfo = function () {
                return new Promise((resolve, reject) => {
                    let wx_userInfo, userInfo // {cloud_id, json}
                    try {
                        wx_userInfo = JSON.parse(localStorage.getItem('wx_userInfo'))
                        userInfo = JSON.parse(localStorage.getItem('userInfo'))
                    } catch (error) {
                        // 如果解析失败,证明未授权成功,需要重新授权
                    }

                    if (wx_userInfo && userInfo) {
                        resolve()
                    } else {
                        window.app.callContainer({
                            path: '/api/user/info',     // 填入业务自定义路径和参数,根目录,就是 / '/api/user/info', 
                            method: 'POST',                     // 按照自己的业务开发,选择对应的方法
                            header: {
                                'X-WX-SERVICE': wechatEnvId,            // xxx中填入服务名称(微信云托管 - 服务管理 - 服务列表 - 服务名称)
                            },
                            data: {
                                info: window.app.CloudID(res.info)
                            }
                            // 其余参数同 wx.request
                        }).then(res => {
                            return res.data.data_list[0]
                        }).then(userInfo => {
                            // {cloud_id, json}
                            localStorage.setItem('wx_userInfo', JSON.stringify(userInfo));

                            let openid, nickname, headimgurl, unionid, activity_id
                            try {
                                const json = JSON.parse(userInfo.json);
                                const data = json.data
                                const data2 = JSON.parse(localStorage.getItem('activity_id'))
                                activity_id = data2
                                openid = data.openId
                                nickname = data.nickName
                                unionid = data.unionId
                                headimgurl = data.avatarUrl
                            } catch (e) {
                                // 错误上报
                            }

                           
                            } else {
                                resolve()
                            }
                        })
                    }
                })

            };

            // 获取用户信息
            // getWechatUserInfo();

            // 监听签名注册成功
            wx.ready(() => {
                getWechatUserInfo().then(() => {
                    next()
                })
            })

            // 使用微信公众号SDK,开始签名,签名信息在result.signature中
            // 发起签名注册,是一个异步操作,成功会触发wx.ready
            wx.config({
                appId: wechatAppId, // 微信公众号appid
                timestamp: res.signature.timestamp + '',   // 时间戳,从返回result.signature中获取
                nonceStr: res.signature.nonceStr,          // 随机字符串,从返回result.signature中获取
                signature: res.signature.signature,        // 签名,从返回result.signature中获取
                jsApiList: [],                // 注册的api列表
                openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
            })
        } else {
            // 登录成功,但环境加载失败,需按照提示解决
            console.log(res.msg)
        }
    } else {
        // 没有登录,需跳转到登录页面
        // 以下方式可以适应IOS、安卓、PC平台的跳转和返回
        //   const a = document.createElement("a");
        //   a.href = './login.html' // 需要和登录页保持一致
        //   a.click()
        window.mplogin2.doLogin({
            appid: wechatAppId,                   // 必填,公众号appid,将以此appid名义进行请求
            scope: 'snsapi_userinfo',                     // 必填,登录方式:snsapi_userinfo、snsapi_base// 必填,登录方式:snsapi_userinfo、snsapi_base
            // noback: true,                              // 选填,登录完不直接返回业务页面,执行自定义附加操作
            // redirect: window.location.href             // 跳转的页面,默认是当前页面,如果你有自定义登录成功页,可以联动设置 
        }).then(res => {
            // noback为true时,将不会返回业务页面,执行到这里
            // 此时需要自行控制跳转回业务页面
            console.log(res)
            next();
        })
    }
})

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值