1. 到微信开放平台 ,先注册一个开发者帐号,再申请一个网页应用,填入公司网站信息,主要包括网站域名和回调地址,如 网站域名:www.baidu.com
回调地址:http://www.baidu.com/login.htm
2. 审核通过后,可以访问这个链接获取到微信登录的二维码:
https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect
这是一号店的微信登录地址,appid 和 appsecret 还有redirect_uri替换成你自己的,state参数是做校验的,可以随意写。
如果不想跳转到新的页面,可以使用第二种模式,内嵌js执行
- 引入js
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition>/js/jquery.min.js"></script> <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
- html 部分
<div id="wx_login_container"></div>
- js实例
<script> $(document).ready(function() { var obj = new WxLogin({ self_redirect: true, id:"wx_login_container", appid: "appid", scope: "snsapi_login", redirect_uri: "回调地址", state: "", style: "black", href: "", //https://某个域名下的css文件 }); }); </script>
注意其中href里指向的css文件必须放在https协议下才能引用的到,大体上不需改变默认样式,浪费脑细胞,可以针对div 来改变二维码的大小和位置,里边是内嵌一个iframe
3. 用户用微信客户端扫第二部的登录页面登录后,页面会跳转到回调地址并附加一个code参数,然后通过code参数可以通下面接口获取到access_token和open_id
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
appid scret替换成你自己的,code替换替换成微信给你的 其他参数不变
返回:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE",
"unionid": "xxxxxx"
}
参数 | 说明 |
---|---|
access_token | 接口调用凭证 |
expires_in | access_token接口调用凭证超时时间,单位(秒) |
refresh_token | 用户刷新access_token |
openid | 授权用户唯一标识 |
scope | 用户授权的作用域,使用逗号(,)分隔 |
unionid | 当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。 |
4. 通过第三步获取的accesstoken和openid再调用下个接口接口获取用户信息(年龄,性别,昵称,头像,国家等)。
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": "http://wx.qlogo.cn/xxxxx",
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
],
"unionid": " xxxx"
}
参数 | 说明 |
---|---|
openid | 普通用户的标识,对当前开发者帐号唯一 |
nickname | 普通用户昵称 |
sex | 普通用户性别,1为男性,2为女性 |
province | 普通用户个人资料填写的省份 |
city | 普通用户个人资料填写的城市 |
country | 国家,如中国为CN |
headimgurl | 用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空 |
privilege | 用户特权信息,json数组,如微信沃卡用户为(chinaunicom) |
unionid | 用户统一标识。针对一个微信开放平台帐号下的应用,同一用户的unionid是唯一的。 |
ACCECC_TOKEN OPENID替换成第三步获取到的
5、获取到用户信息后,登录到公司网站首页。