微信小程序生态6—微信公众号授权登录(适用于H5小程序)

一、实现步骤

1 第一步:用户同意授权,获取code

2 第二步:通过code换取网页授权access_token

3 第三步:刷新access_token(如果需要)

4 第四步:拉取用户信息(需scope为 snsapi_userinfo)

5 附:检验授权凭证(access_token)是否有效

二、准备材料

一个服务号(已认证),确保网页授权权限已开通

三、实现步骤

1. 点击修改,跳转到公众号设置页,此处需要添加一个域名文件校验

2. 通过authorize获取的code

调用open.weixin.qq.com/connect/oau... 我这里写了一个简单HTML,用来发起调用接口:

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
</head>
<style>
</style>
<body>
<div id="container">
</div>
<script>
    window.appId = `${appId}`
   //注意:此处redirect_uri需要使用encodeURIComponent(该方法浏览器自带)转义
    let local = "http://xxx"
    // 跳转到授权页面
    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";
</script>
</body>
</html>

3. 参数说明

snsapi_base与snsapi_userinfo属于微信网页授权获取用户信息的两种作用域

  • snsapi_base只能获取access_token和openId

  • snsapi_userinfo可以获取更详细的用户资料,比如头像、昵称、性别等,该种形式会唤醒授权页面

4. 调用接口获取access_token

api.weixin.qq.com/sns/oauth2/...

返回值如下

json 复制代码
{
    "access_token":"accesstoken",
    "refresh_token":"refreshtoken",
    "openid":"openId",
    "scope":"snsapi_userinfo",
    "expires_in":7200
 }

5. 根据accessToken和openId查询用户信息

调用api.weixin.qq.com/sns/userinf...

返回值如下

json 复制代码
{
    "country":"",
    "province":"",
    "city":"",
    "openid":"openid",
    "sex":0,
    "nickname":"sum墨",
    "headimgurl":"xxx",
    "language":"",
    "privilege":[]
  }

三、常见错误码发生情况

json 复制代码
{
    "errcode":40029,
    "errmsg":"invalid code, rid: 620e3db2-410d5515-117f31ac"
 }

这种问题一般都发生在code上,要检查code是不是有值并且是不是重复调用了

相关推荐
Vicky&James1 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
吃海鲜的骆驼3 分钟前
服务异步通讯与RabbitMQ
java·分布式·后端·rabbitmq
m0_748233645 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟13 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386314 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596015 分钟前
前端代理,解决跨域问题讲解
前端
桦说编程16 分钟前
【硬核总结】如何轻松实现只计算一次、惰性求值?良性竞争条件的广泛使用可能超过你的想象!String实际上是可变的?
后端·函数式编程
quitv20 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238129 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星30 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存