uniapp实现公众号H5、小程序和App微信授权登录功能

本文介绍在使用uniapp开发的H5、小程序和App中使用微信授权登录的方法。
由于微信的公众号、小程序和App是相对独立的体系，同一个用户在这些不同的端中授权所返回的openid是不一样的，这个时候就必须在微信开放平台注册账号，并把对应的公众号、小程序和移动应用绑定上去，在授权的时候就能返回一个unionid了，这样就可以在后台识别到是同一个用户了。
前期要准备的工作：
1、申请公众号、小程序和微信开放平台，并拿到对应平台的appid和secret；
2、H5网页授权还要在公众号后台设置网页授权域名；
3、小程序的接口域名必须启用https，且要设置request、download合法域名等；
4、App必须在微信开放平台申请应用并绑定。
上述工作准备好后，就可以开干了！
一、H5网页授权
1、授权按钮

// official.vue
<u-button class="button" type="success" @click="getWeChatCode">立即授权</u-button>

2、js代码

// official.vue
onLoad(options) {
    if (options.scope) {
        this.scope = options.scope
    }
    if (this.$wechat && this.$wechat.isWechat()) {
        uni.setStorageSync('scope', this.scope)
    let code = this.getUrlCode('code')
        if (code) {
        this.checkWeChatCode(code)
    } else {
        if (this.scope == 'snsapi_base') {
        this.getWeChatCode()
        }
        }
    }
},
methods: {
    getUrlCode(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
    },
    getWeChatCode() {
    if (this.$wechat && this.$wechat.isWechat()) {
        let appid = '公众号appid'
        let local = encodeURIComponent(window.location.href)
        let scope = uni.getStorageSync('scope')
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=${scope}&state=1#wechat_redirect`
    } else {
        uni.showModal({
        content: '请在微信中打开',
        showCancel: false
        })
    }
    },
    checkWeChatCode(code) {
    if (code) {
        let scope = uni.getStorageSync('scope')
        this.$http.post('/wechat/login', {
        code,
        scope,
        type: 1
    }).then(res => {
        if (res.code == 1) {
        if (scope == 'snsapi_userinfo') {
            this.login(res.data.userinfo)
            uni.navigateBack()
            }
        } else {
        uni.showModal({
            content: res.msg,
            showCancel: false
        })
        }
        }).catch(err => {
        uni.showModal({
        content: err.msg,
        showCancel: false
        })
        })
    }
}

注意，
1、公众号授权scope有两种方式：snsapi_base和snsapi_userinfo，前者静默授权不会有授权弹窗，后者必须用户点击授权弹窗按钮授权才行；
2、网页授权是需要跳转到微信服务器上，然后携带code再跳回来，所以在跳回来后还需要用到的变量比如scope必须用缓存保存起来，否则会读取不到；
3、跳转回来的页面就是发起授权的页面，所以在页面的onload方法中要判断url是否携带有code，避免重复跳转授权的死循环（会提示code已被使用）；
4、授权后拿code去后台通过微信请求换取用户信息。
二、小程序授权
1、授权按钮，必须是button，且设置

// mp.vue
<u-button type="success" @click="getUserProfile()">微信授权登录</u-button>

2、js代码

getUserProfile() {
    uni.getUserProfile({
    desc: '使用微信登录',
    lang: 'zh_CN',
    success: (a) => {
        uni.login({
        provider: 'weixin',
            success: (b) => {
            this.loading = true
            let userInfo = a.userInfo
            userInfo.code = b.code
            userInfo.type = 2
            this.$http.post('/wechat/login', userInfo).then(c => {
            this.loading = false
            this.login(c.data.userinfo)
            uni.navigateBack()
            }).catch(err => {
            this.loading = false
            uni.showModal({
                content: err.msg,
                showCancel: false
                })
            })
            },
            fail: (err) => {
            console.error(err)
            }
        })
        },
        fail: (err) => {
            console.error(err)
        }
    })
}

说明：
1、授权后会得到code和userInfo，里面有昵称、头像、性别、地域等字段，没有openid；
2、把code和userInfo传回后台，再通过code换取用户的openid和unionid。
三、App授权
1、授权按钮

// app.vue
<u-button class="button" type="success" @click="onAppAuth">确定授权</u-button>

2、js代码

// app.vue
onAppAuth() {
    uni.getProvider({
    service: 'oauth',
    success: (a) => {
        if (~a.provider.indexOf('weixin')) {
        uni.login({
            provider: 'weixin',
            onlyAuthorize: true,    // 注意此参数
            success: (b) => {
            if (b.code) {
                this.$http.post('/wechat/login', {
                code: b.code,
                type: 3
                }).then(c => {
                this.loading = false
                this.login(c.data.userinfo)
                uni.navigateBack()
                }).catch(err => {
                this.loading = false
                uni.showModal({
                    content: '授权登录失败',
                    showCancel: false
                })
                })
            } else {
                uni.getUserInfo({
                success: (c) => {
                    this.loading = true
                    let userInfo = c.userInfo
                    userInfo.type = 3
                    this.$http.post('/wechat/login',　userInfo).then(d => {
                    this.loading = false
                    this.login(d.data.userinfo)
                    uni.navigateBack()
                    }).catch(err => {
                    this.loading = false
                    uni.showModal({
                        content: '授权登录失败',
                        showCancel: false
                    })
                    })
                },
                fail: (err) => {
                    console.error(err)
                }
                })
            }
            },
            fail: (err) => {
            console.error(err)
            }
        })
        }
    },
    fail: (err) => {
        console.error(err)
    }
    })
}

注意：微信在App中授权有两种方式，
1、第一种是uni.login里面的onlyAuthorize为false，此时直接调用uni.getUserInfo方法即可直接在前端获取到用户信息。但此方式有个问题，即必须把App的secret配置在manifest.json文件当中，并且会被打包进apk/ipa中，存在泄漏的风险！所以不推荐此种方式；
2、第二种是onlyAuthorize设置为true，则uni.login只返回code，跟小程序一样传到后台去换取用户信息。

// 后台代码
public function login()
{
    $params = $this->request->param();
    switch ($params['type']) {
        case '1':   // 公众号
            $wechat = Config::get('wechat.h5');
            $access_token = Http::sendRequest('https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$wechat['appid'].'&secret='.$secret['secret'].'&code='.$params['code'].'&grant_type=authorization_code');
            $msg = json_decode($access_token['msg'], true);
            if ($params['scope'] == 'snsapi_userinfo') {
                $userinfo = Http::sendRequest('https://api.weixin.qq.com/sns/userinfo?access_token='.$msg['access_token'].'&openid='.$msg['openid'].'&lang=zh_CN');
                $info = json_decode($userinfo['msg'], true);
                $wechat_member = $this->memberModel->field(['user_id','headimgurl'])->where(['openid'=>$info['openid']])->find();
                $member = [
                    'type'       => $params['type'],
                    'unionid'    => $info['unionid'],
                    'openid'     => $info['openid'],
                    'nickname'   => $info['nickname'],
                    'sex'        => $info['sex'],
                    'language'   => $info['language'],
                    'country'    => $info['country'],
                    'province'   => $info['province'],
                    'city'       => $info['city'],
                    'headimgurl' => $info['headimgurl']
                ];
                // 判断是否需要注册或更新数据
                if ($wechat_member) {
                    // 如果该用户已经存在，则只更新数据
                } else {
                    // 否则的话先用unionid判断有无其他微信记录，再进行更新或注册
                }
            } else {
                $data['openid'] = $info['openid'];
                $this->success('获取成功',$data);
            }
            break;
        case '2':   // 小程序
            $app = Factory::miniProgram(Config::get('wechat.mini'));
            $info = $app->auth->session($params['code']);
            $wechat_member = $this->memberModel->field(['user_id','headimgurl'])->where(['openid'=>$info['openid']])->find();
            $member = [
                'type'       => $params['type'],
                'unionid'    => $info['unionid'],
                'openid'     => $info['openid'],
                'nickname'   => $params['nickName'],
                'sex'        => $params['gender'],
                'language'   => $params['language'],
                'country'    => $params['country'],
                'province'   => $params['province'],
                'city'       => $params['city'],
                'headimgurl' => $params['avatarUrl']
            ];
            // 判断是否需要注册或更新数据
            if ($wechat_member) {
                // 如果该用户已经存在，则只更新数据
            } else {
                // 否则的话先用unionid判断有无其他微信记录，再进行更新或注册
            }
            break;
        case '3':   // app
            if (isset($params['code'])) {
                $app = Config::get('wechat.app');
                $access_token = Http::sendRequest('https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$app['app_id'].'&secret='.$app['secret'].'&code='.$params['code'].'&grant_type=authorization_code');
                $msg = json_decode($access_token['msg'], true);
                $wechat_member = $this->memberModel->field(['user_id','headimgurl'])->where(['openid'=>$msg['openid']])->find();
                $member = [
                    'type'       => $params['type'],
                    'unionid'    => $msg['unionid'],
                    'openid'     => $msg['openid'],
                    'nickname'   => isset($msg['nickName']) ? $msg['nickName'] : '微信用户',
                    'sex'        => isset($msg['gender']) ? $msg['gender'] : '0',
                    'language'   => isset($msg['language']) ? $msg['language'] : '',
                    'country'    => isset($msg['country']) ? $msg['country'] : '',
                    'province'   => isset($msg['province']) ? $msg['province'] : '',
                    'city'       => isset($msg['city']) ? $msg['city'] : '',
                    'headimgurl' => isset($msg['avatarUrl']) ? $msg['avatarUrl'] : ''
                ];
            } else {
                $wechat_member = $this->memberModel->field(['user_id','headimgurl'])->where(['openid'=>$params['openId']])->find();
                $member = [
                    'type'       => $params['type'],
                    'unionid'    => $params['unionId'],
                    'openid'     => $params['openId'],
                    'nickname'   => $params['nickName'],
                    'sex'        => $params['gender'],
                    'language'   => isset($params['language']) ? $params['language'] : '', // app微信wx.getUserInfo授权未返回此字段
                    'country'    => $params['country'],
                    'province'   => $params['province'],
                    'city'       => $params['city'],
                    'headimgurl' => $params['avatarUrl']
                ];
            }
            // 判断是否需要注册或更新数据
            if ($wechat_member) {
                // 如果该用户已经存在，则只更新数据
            } else {
                // 否则的话先用unionid判断有无其他微信记录，再进行更新或注册
            }
            break;
    }
}

至此，微信公众号H5、小程序和App授权登录全部流程结束。
转载自王维的博客: https://asyou.github.io/content/43.html

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342