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

YDH865

已于 2022-12-09 19:52:16 修改

阅读量4.5k

点赞数

文章标签： uni-app 小程序微信 javascript 前端

于 2022-12-09 19:29:44 首次发布

本文链接：https://blog.csdn.net/ydh865/article/details/128258070

版权

本文详细介绍了如何在uniapp中实现微信授权登录功能，涵盖H5、小程序和App三个平台。首先，需要在微信开放平台注册并绑定相关应用。接着，分别阐述了H5的网页授权过程，包括授权按钮、js代码及授权注意事项；小程序的授权步骤，强调了授权按钮的配置和用户信息获取；最后，讨论了App授权的两种方式及其安全性考虑。完成这些步骤后，即可实现跨平台的微信授权登录功能。

摘要由CSDN通过智能技术生成

本文介绍在使用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_ba