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

sum墨

已于 2024-06-26 16:43:16 修改

阅读量4k

点赞数

分类专栏：小程序生态文章标签：微信小程序前端

于 2022-06-02 14:24:21 首次发布

本文链接：https://blog.csdn.net/weixin_33005117/article/details/125100105

版权

小程序生态专栏收录该内容

22 篇文章 23 订阅

订阅专栏

文章导航

正文

实现步骤

1 第一步：用户同意授权，获取code

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

3 第三步：刷新access_token（如果需要）

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

5 附：检验授权凭证（access_token）是否有效

准备材料

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

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

2、通过authorize获取的code

调用https://open.weixin.qq.com/connect/oauth2/authorize

<!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>

参数说明：

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

snsapi_base只能获取access_token和openID

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

3、调用https://api.weixin.qq.com/sns/oauth2/access_token，获取access_token

返回值如下

{"access_token":"accesstoken","refresh_token":"refreshtoken","openid":"openId","scope":"snsapi_userinfo","expires_in":7200}

常见错误码发生情况

{“errcode”:40029,“errmsg”:“invalid code, rid: 620e3db2-410d5515-117f31ac”}

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

4、根据accessToken和openId查询用户信息，调用https://api.weixin.qq.com/sns/userinfo?access_token=accessToken&openid=openIdlang=zh_CN

返回值如下

{"country":"","province":"","city":"","openid":"openid","sex":0,"nickname":"sum墨","headimgurl":"https://thirdwx.qlogo.cn/mmopen/vi_32/KqPuMLU8JmRIlicUSvia4PR0vNKWKLFmfR6icibJ2Us7EyZXbZaKBd30qjGYJJSkmdHoib66wiaicQia61R34xC7Jr8EJg/132","language":"","privilege":[]}

文末小彩蛋，自建摸鱼网站，各大网站热搜一览，上班和摸鱼很配哦！

sum墨

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信小程序生态6-微信公众号授权登录(适用于H5小程序)

实现步骤1 第一步：用户同意授权，获取code2 第二步：通过code换取网页授权access_token3 第三步：刷新access_token（如果需要）4 第四步：拉取用户信息(需scope为 snsapi_userinfo)5 附：检验授权凭证（access_token）是否有效准备材料一个服务号(已认证)，确保网页授权权限已开通调用https://open.weixin.qq.com/connect/oauth2/authorize参数说明：snsapi_base与snsapi_userinfo
复制链接

扫一扫