H5微信点击授权登录

步骤一：获取code

// 登录
wxlogin() {let appid="xxx"//项目appidlet url=encodeURIComponent('https:/xxx.cn/')//这里的是回调地址要与申请的地址填写一致let scopes="snsapi_userinfo"//表示授权的作用域，多个可以用逗号隔开，snsapi_base表示静默授权，snsapi_userinfo表示非静默授权let mainstate=Math.random()//state：用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击）可设置为简单的随机数加session进行校验window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=${scopes}&state=${mainstate}#wechat_redirect`
},

步骤二：获取code换取token

页面会自动跳转到类似以下地址，在重定向的页面拿到给我们返回的 code，会拼接在URL后面

https://www.test.com/?code=xxx&state=STATE

同意授权，跳转到配置回调地址

方式一：

//截取code传给后台，返回token

方式二：

1.用code获取access_token和openid
通过code换取网页授权access_token在业务代码中，用JS获取code参数，然后访问以下地址：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=xxx&secret=SECRET&code=CODE&grant_type=authorization_code
//appid：应用的 Appid,
//secret: 应用密钥 AppSecret,
//code：上一步中获取到的code
//grant_type：值为authorization_code

其中：
成功后的返回数据如下：（主要是拿access_token和openid字段）

{ "access_token":"ACCESS_TOKEN","expires_in":7200,"refresh_token":"REFRESH_TOKEN","openid":"OPENID","scope":"SCOPE"
}

2.用access_token 和openid获取用户信息
用access_token和openid字段访问以下地址：

https://api.weixin.qq.com/sns/userinfo?access_token=xxx&openid=xxx&lang=zh_CN

【uniapp】 H5微信授权登录相关推荐

uniapp开发h5微信授权登录(详细教程)
uniapp开发h5微信授权登录文章目录 uniapp开发h5微信授权登录前言一.前期准备--申请测试账号二.正式开发--前端代码三.打包发布总结前言我也是第一次做h5授权微信登录,网 ...
uniapp获取微信授权登录和手机号一键登录（保姆教程）
uniapp获取微信授权登录(保姆教程) 第一步下载官方给的解密文件'mWXBizDataCrypt' 没有文件就复制该文件的代码创建一个 var crypto = require('crypto' ...
H5 微信授权登录功能实现
背景最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...
H5微信授权登录后点击返回出现循环登录无法退出问题
简单介绍h5微信授权流程 1.入口页跳转到我们自己创建的空白授权页 2.在空白授权页判断url上是否包含code,没有code拼接微信授权链接,通过location.href进行跳转 location ...
pc、h5微信授权登录
pc登录微信登录(通过后端返回一个qrcode重定向到页面上,进行扫码授权,获取code即可,再根据code获取登录信息) h5登录微信授权登录:(支持微信浏览器,其它浏览器无法拉起微信的授权): ...
uniapp app微信授权登录
先在微信开放平台申请移动应用,然后拿到appid和appsecret秘钥进入管理中心,选择移动应用,创建移动应用,按步骤来就行了,可能唯一会让你卡住的就是应用签名了现在要生成应用签名就得用自有证书 ...
uni-app 实现微信授权登录
最近在写网易云音乐微信小程序,发现项目中少了点什么东西,于是爆肝了几天,参考了很多网上的写法,最终实现了这个简单的登录功能! 注意,微信小程序是没有登出功能的,害的我找了半天的api,在平时的是使用中 ...
uniapp写微信授权登录
html部分 <button class="login-btn" type="primary" @click="getUserInfo" ...
H5微信授权登录弹窗提示
如下图:用户授权登录前,先通过静默授权,拿到token,展示部分信息,用户通过授权后拿到头像昵称,该弹窗让用户有个比较好的体验请求过程如下: 1.首次在没有UID.code的情况下:静默授权(&am ...
uniapp实现微信授权登录并回显用户头像和名称
先上html页面的代码: <button class="login" v-if="show1" open-type="getUserInfo&q ...

【uniapp】 H5微信授权登录