H5怎么实现调用微信登录？

Posted 2023-04-24

接入微信授权，有两种方式：

静默授权和非静默授权

静默授权：scope=snsapi_base，没有弹窗，只能获取OPENID

非静默授权： scope=snsapi_userinfo，有弹窗需要手动确认授权，可以获取openid, 头像，昵称等信息。

H5登录就是通过授权获取code，将code传给后端，后端再将openid, 头像，昵称等信息返给前端。所以首先要获取到code。获取方式如下：

let appid = '....'; //换成自己的appid

let uri = encodeURIComponent(link);  //link是需要登录的页面

let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=$appid&redirect_uri=$uri&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`; //这里使用的是非静默授权

window.location.href = authURL;

页面自动刷新后，返回的地址里面会携带code值 ，把地址里的code值取出来传给后端就可以了。

参考技术A 这个是能够可以实现微信登录的，你可以自己去摸索一下 参考技术B 是不是像微信登录的话可以选择二次登录？ 参考技术C 你搜索搜索答案，一般百度里面都有答案。

微信 应用 怎么 获取code

参考技术A 小程序如何获取code的步骤，希望这些方法能够帮助到大家。

首先，调用wx.login获取code，判断用户是否授权读取用户信息，调用wx.getUserInfo读取用户数据。

然后，由于小程序后台授权域名无法授权微信的域名，所以我们只能通过我们自己的服务器去调用微信服务器去获取用户信息。

然后，故我们将wx.login获取code和wx.getUserInfo获取的encryptedData与iv通过wx.request请求传入后台。

然后，调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）。

然后，用户数据的加解密通讯需要依赖会话密钥完成，code换取session_key，这是一个HTTPS接口，开发者服务器使用登录凭证code获取session_key和openid。

最后，其中session_key是对用户数据进行加密签名的密钥。为了自身应用安全，session_key不应该在网络上传输。