【微信登录二维码扫一扫】网站实现微信扫码登录入门教程

准备工作

微信扫码登录基于OAu。首先，微信开放平台必须首先注册开发者账户和审计的网站应用程序。然后你就可以获得自己网站应用程序的域名，比如AppID和应用程序秘密，还有www.xxx.com。

//注册过程可以按照官网的要求填写资料。

注册官网地址：

批准流程说明

用户点击网页上方的微信扫描码登录时，我们会自发跳转到微信指定的URL，显示一个队列(QR)码用户使用微信清理并授权登录，微信指定的URL再次跳转到我们设置的域名URL，导入代码，获取代码参数和AppID、AppSecret等，通过API获取accet

具体实现

具体实施之前，请确保www.xxx.com域名设置了网页许可证。特别是注册开发人员账户后，在账户背景下根据需要设置即可。

第一步：请求代码

用户点击微信扫码登录，积极跳转。redirect _ uri=；response _ type=code scope=snsapi _ log instate=state # we chat _ redirect

1、注册APPID时获取。

2、redirect_uri是用户扫描代码，同意许可后在微信这边主动跳转的地址，返回这个地址后，背景中会有代码。此redirect_uri必须执行一次UrlEncode

3、response_type、scope是固定标记法

4.state相当于前三。从微信那边跳起来，就会原封不动地拿回来

最终回到我们域名的地址是这样的。State=STATE 微信扫描码效果图

步骤2:通过代码获取access _ code

前台收到代码后，调用后台API，然后在后台请求微信API与access _ code交换。最好不要直接在前台要求。因为secret最好不要暴露在前端。因为不安全。Secret=Secret code=codegrant _ type=authorization _ code将返回结果

{

access _ token ' : ' access _ token '、

Expires_in':7200，

refresh _ token ' : ' refresh _ token '、

Openid':'OPENID '、

范围“:”范围，

union id ' : ' o6 _ BM asdasdsad 6 _ 2 sgvt 7 hmzopfl '

}参数说明

参数

说明

Access_token

接口调用凭据

Expires_in

Access_token接口调用凭据超时(秒)

Refresh_token

用户刷新access_token

Openid

授权用户唯一id

范围

以逗号(，)分隔的用户身份验证范围

Unionid

只有当网站应用程序通过该用户的userinfo认证时，才会显示此字段。

第三步：通过access_token调用接口

;openid=OPENID

返回结果

{ "openid":"OPENID", "nickname":"NICKNAME", "sex":1, "province":"PROVINCE", "city":"CITY", "country":"COUNTRY", "headimgurl": ";, "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是唯一的。

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

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