您当前的位置:首页 > 百科摘抄 > 内容

网页微信扫码登录(网站实现微信扫码登录入门教程)

网友提问

被浏览:1469

关注者:206

最佳回答:

准备工作

微信扫码登录是基于OAuth2.0实现的,首先你需要要微信开放平台先注册开发者帐号和一个已审核通过的网站应用,这样你就拿到了AppID和AppSecret,以及你自己网站应用的域名,比如www.xxx.com

// 注册流程按官网要求填写资料就行了注册官网地址:https://mp.weixin.qq.com/授权流程说明

  1. 用户点击网页上面的微信扫码登录,我们主动跳转到微信指定的url,并显示一个二维码
  2. 用户使用微信扫一扫,并授权登录,微信指定的url会回跳到我们设置好的域名url,同时会把code带回来
  3. 我们拿code参数,加上AppID和AppSecret等,通过API换取access_token
  4. 通过access_token进行接口调用,获取用户基本数据

授权流程事例图

具体实现

具体实现前,请确认www.xxx.com域名已经设置过网页授权,具体设置是在注册完开发者帐号后,在帐号后台按要求设置就行了

第一步:请求code

用户点击微信扫码登录,主动跳转至https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=https://www.xxx.com/wxauth&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

1、APPID注册时获取的

2、redirect_uri是用户扫码同意授权后,微信这边主动回跳的地址,在回跳回来这个地址后台会有code,这个redirect_uri需要做一次UrlEncode

3、response_type和scope是固定写法

4、state是相当于传参,微信那边回跳后会原封不动的再带回来

最终回到我们域名的地址大概是这样

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

微信扫码效果图

第二步:通过code获取access_token

前台在拿到code后,调用后台一个api,然后由后台去请求微信的这个api换取access_token,我们不建议前台去直接请求,因为secret最好不要暴露在前端,不安全

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

返回结果

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

参数说明

参数

说明

access_token

接口调用凭证

expires_in

access_token接口调用凭证超时时间,单位(秒)

refresh_token

用户刷新access_token

openid

授权用户唯一标识

scope

用户授权的作用域,使用逗号(,)分隔

unionid

当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。

第三步:通过access_token调用接口

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

返回结果

{ "openid":"OPENID", "nickname":"NICKNAME", "sex":1, "province":"PROVINCE", "city":"CITY", "country":"COUNTRY", "headimgurl": "https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0", "privilege":[ "PRIVILEGE1", "PRIVILEGE2"],"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"}

参数

说明

openid

普通用户的标识,对当前开发者帐号唯一

nickname

普通用户昵称

sex

普通用户性别,1为男性,2为女性

province

普通用户个人资料填写的省份

city

普通用户个人资料填写的城市

country

国家,如中国为CN

headimgurl

用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空

privilege

用户特权信息,json数组,如微信沃卡用户为(chinaunicom)

unionid

用户统一标识。针对一个微信开放平台帐号下的应用,同一用户的unionid是唯一的。

我们拿到这些用户信息,再结合我们的业务就完成了微信扫码登录

觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧

获赞:883

收藏:69

回答时间:2022-11-28 15:28:39


声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,谢谢。

上一篇: 10月11日鞍山疫情今日更新 :昨日新增本土无症状16例

下一篇: 王者荣耀中单英雄有哪些(S19赛季中单梯队排行,工具人法师百搭好用,高端局杨玉环崛起)



推荐阅读

网站内容来自网络,如有侵权请联系我们,立即删除! | 软文发布 | 粤ICP备2021106084号