微信h5静默、非静默授权获取用户openId的方法和步骤

比眉伴天荒 2021-09-14 18:06 964阅读 0赞

# 微信h5静默、非静默授权获取用户openId的方法和步骤: #

### 一、openId是什么？ ###

openId是用户在当前公众号下的唯一标识（‘身份证’），就是说通过这个openId，就能区分在这个公众号下具体是哪个用户。

**二、openId有什么用？**

假如用户A在当前公众号下购买了一件商品，用户的下单信息肯定要存储到后台数据库，那根据什么进行存储呢？openId是用户在当前公众号下的唯一标识，通过openId和用户的下单购买信息进行键值对的数据绑定。那么我要查询该用户购买过什么商品，就能够通过openId去查询，并且数据是唯一的，不会和另外的用户数据有冲突。

拓展：UnionID：一个商家或公司可能会有多个公众号，假如用户A同时都关注了这个公司下面的三个公众号，那么这个用户就会有三个openId(一个公众号就对应一个openID)。如果作为开发者的我们，要对这个用户在这三个公众号下消费的数据进行汇总，我怎么获取到这三份数据（同一用户的）？答案是 UnionId，微信开发者文档：如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为同一用户，对同一个微信开放平台下的不同应用（移动应用、网站应用和公众帐号），unionid是相同的。就是说如果要获取用户在同一公司不同公众号下的数据，后台表结构不但要关联openId,还要关联UnionId。

**三、怎么获取openId？**

（一）登录微信公众平台后台获取公众号的AppId，设置回调地址。

![70][]

回调地址设置页面向导：开发>接口权限>网页服务>网页授权>修改。开发的项目需要放到已经解析好服务器域名的服务器下，同时把Mp\*\*\*.text文件放到服务器根目录下，此时你的服务器必须能联通外网也就是有公网IP,并且80端口是打开的，可以使用阿里云等服务器，默认配置就可以了。

![70 1][]

（二）根据开发需要，静默授权还是非静默授权

① 静默授权：snsapi\_base，没有弹窗，只能获取用户的openId。

②非静默授权：snsapi\_userinfo，有弹框弹出需要用户手动点击确认授权。可以获取openId，用户的头像、昵称等

![70 2][]

（三）前端代码，配置的参数要一一对应，获取code，并调用后台接口，把code传给后台

![70 3][]

redirect\_uri，这个的意思是：授权完成后再重新回到当前页面（又刷新了一次页面）

getUrlParam的方法，可以百度下，就是获取页面路径的某个字段所对应的参数。

![70 4][]

![70 5][]

如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会看到在地址栏中的code了。

![70 6][]

(四)前端截取地址栏中的code后通过调接口把code传给后台，后台通过code获取openId和用户头像昵称等信息并返回给前端

为什么，前端不能一起把获取code和获取openId的操作一并做了，还要请求后台，让后台获取openId？

![70 7][]

（五）后台通过 code、AppSecret（公众号平台后台取得）请求微信链接获取openId

![70 8][]

![70 9][]

![70 10][]

前端具体代码如下，可复制（记得把文中的 window.APPID改为自己公众号的APPID）

<template>
        <div></div>
    </template>
    
    <script>
    import GetUrlParam from '@/assets/js/util/getUrlParam.js'
    export default {
        name: 'Index',
        data () {
            return {
            }
        },
        created () {
            this.getCode()
        },
        methods: {
            getCode () { // 非静默授权，第一次有弹框
                const code = GetUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
                const local = window.location.href
                if (code == null || code === '') {
                    window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + window.APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
                } else {
                    this.getOpenId(code) //把code传给后台获取用户信息
                }
            },
            getOpenId (code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
                let _this = this
                this.$http.post('/api/user/wechat/login', {code: code}).then((res) => {
                    let datas = res.data
                    if (datas.code === 0 ) {
                        console.log('成功')
                    }
                }).catch((error) => {
                    console.log(error)
                })
            }
        }
    }
    </script>
    
    <style lang="less" scoped>
    
    </style>

（六）通过openId做用户的数据绑定或查询等操作

前后端都获取了openId后，就能通过openId做用户数据的绑定和查询了。

（七）补充说明

使用上述方法进行的微信授权，在手机端会有两次空白页跳转，时间虽然很短暂，但有些产品经理会觉得这种体验不好（实在很欠揍）。解决方法是：可以把跳转到微信获取code的这段链接拼接好直接复制到  微信公众平台 后台管理系统菜单列表里面。这样点击菜单，在回调页通过截取url中的code，就能直接获取到code了，就避免了多次跳转的情况。

![70 11][]

![70 12][]

（八）解决微信授权成功进入项目后，点击手机物理返回键或返回会出现空白页或者报错的情况，空白页是因为授权页就是空白页。可以参考我的另一篇文章：

解决微信授权成功后点击按返回键出现空白页和报错的问题  
https://blog.csdn.net/qq\_35430000/article/details/81505497

最后：这篇分享来源于我在实际项目中摸索和借鉴其他项目，有不对的地方希望大家多多指出，有不明白的地方可以给我留言.

**[卓越的云计算服务提供商,230万+用户正在享受阿里云"稳定,安全,低成本"的产品服务,金牌服务:免费体验,专业快速备案,7x24小时售后,服务器只选阿里云][230_7x24]**

[70]: /images/20210813/a4b7c4e2b9a84f8d9b5f64b95eb1a15a.png
[70 1]: /images/20210813/d1fb1c8c92cc461a812d53ef74a29a42.png
[70 2]: /images/20210813/fd89e140c6c14f7e8231ff349767a231.png
[70 3]: /images/20210813/eb11e1863964403bb0ede4dc626008d9.png
[70 4]: /images/20210813/890e78f314b64e26895fc828f5b3a564.png
[70 5]: /images/20210813/f6deb02197c741cfa96eba21334ebaf5.png
[70 6]: /images/20210813/999299d545b04706b7712eab768b2301.png
[70 7]: /images/20210813/0cf09493e09b4fc2a7d0be540dc8fbd8.png
[70 8]: /images/20210813/89fd329482eb4f6e8eb0be91c3cb7115.png
[70 9]: /images/20210813/2c7ec605cdd448f2894af0dacc6a2124.png
[70 10]: /images/20210813/f27dcce333da42c38e760a93592e383f.png
[70 11]: /images/20210813/7030b60ef490450e8ecaf16b106ee7bd.png
[70 12]: /images/20210813/82f4685160394f5a9bf488503e27469b.png
[230_7x24]: https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=uoe4s7nc