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

https://blog.csdn.net/qq_35430000/article/details/79299529

微信h5静默、非静默受权获取用户openId的方法和步骤:
1、openId是什么？
openId是用户在当前公众号下的惟一标识（‘身份证’），就是说经过这个openId，就能区分在这个公众号下具体是哪一个用户。

2、openId有什么用？

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

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

3、怎么获取openId？

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

 

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

 

（二）根据开发须要，静默受权仍是非静默受权

   ① 静默受权：snsapi_base，没有弹窗，只能获取用户的openId。

   ②非静默受权：snsapi_userinfo，有弹框弹出须要用户手动点击确认受权。能够获取openId，用户的头像、昵称等

 

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

 

redirect_uri，这个的意思是：受权完成后再从新回到当前页面（又刷新了一次页面）

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

 

 

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

 

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

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

 

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

 

 

 

前端具体代码以下，可复制（记得把文中的 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了，就避免了屡次跳转的状况。

 

 

（八）解决微信受权成功进入项目后，点击手机物理返回键或返回会出现空白页或者报错的状况，空白页是由于受权页就是空白页。能够参考个人另外一篇文章：

解决微信受权成功后点击按返回键出现空白页和报错的问题https://blog.csdn.net/qq_35430000/article/details/81505497 ———————————————— 版权声明：本文为CSDN博主「飞歌Fly」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处连接及本声明。原文连接：https://blog.csdn.net/qq_35430000/article/details/79299529