今天要测试一下微信登录,要咋整呢,有appId,有秘钥,但要咋整呢,下面来梳理下。
1. 首先注册 微信公众平台测试号
http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
微信扫一下,就能得到一个测试号啦。
2.有了测试号,你就能看到appID和appsecret啦。
下一步,滑滑滑到 测试号二维码
,扫描添加自己的微信号。
再下一步,体验接口权限表,直接滑到网页服务-网页账号,点击修改。
会要求你需要一个 授权回调页面域名
。
授权回调页面域名
3. 如何填写这个授权回调页面域名
因为我们是本地测试,我们直接修改hosts文件就好了。
- 第一步,打开hosts文件,MAC系统:sudo vim /etc/hosts就好了。
- 第二步,里面直接填写127.0.0.1 weixintest.com,我随便取的。
- 第三步,保存,退出,然后授权回调页面域名就填写
weixintest.com
4.接下来就需要看看文档,如何微信登录啦。
这里是微信的开发文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0
直接粘贴文档部分内容
1 第一步:用户同意授权,获取code
2 第二步:通过code换取网页授权access_token
3 第三步:刷新access_token(如果需要)
4 第四步:拉取用户信息(需scope为 snsapi_userinfo)
5 附:检验授权凭证(access_token)是否有效
4.1我们要如何做?
- 第一步:下载微信开发者工具,左上角菜单,更换开发者模式为
公众号网页调试
- 第二步:在微信开发者工具中请求连接:https://open.weixin.qq.com/connect/oauth2/authorize?appid=OPENID&redirect_uri=REDIRCT_URI&response_type=code&scope=snsapi_base&state=123#wechat_redirect
- 把我们获取的到的openid,填上去然后,填上我们重定向的uri就行了。
4.2重定向的url要如何弄呢?
我们直接Django 写一个视图就好啦。
appid = 'xxx'
secret = 'xxxx'
code = request.GET.get('code')
weixin_url = requests.get(
f"https://api.weixin.qq.com/sns/oauth2/access_token?appid={appid}&secret={secret}&code={code}&grant_type=authorization_code")
info = weixin_url.json()
open_id = info.get('openid')
access_token = info.get('access_token')
user_info_req = requests.get(
f'https://api.weixin.qq.com/sns/userinfo?access_token={access_token}&openid={open_id}&)
user_info_req.encoding = 'utf-8'
user_info = user_info_req.json()
context = {'code': request.GET.get('code'), 'info': info, 'user_info': user_info}
return render(request, 'test.html', context)
这就是一个简单的视图,把我们获取到的数据渲染到了test.html上,方便我们直观的观察。
最后在urls.py上,定义一下url,比如 /test/之类的。
不要忘了启动
python manage.py 127.0.0.1:80
,没错你需要开启的是80端口,而不是其他端口。
最终我们的重定向域名就是 weixintest.com/test/ ,其实就是127.0.0.1:80/test/。
4.3 test.html内容,简单的渲染下
<html >
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<h3>{{ code }}</h3>
{% for k,v in info.items%}
<p>{{k}}:{{ v }}</p>
{% endfor %}
{% for k,v in user_info.items %}
<p>{{k}}:{{v}}</p>
{% endfor %}
</body>
</html>
最后你只要在微信开发者工具中输入上面开头说的url,就会重定向我们的weixintest.com/test/路由上,渲染出我们的一些简单的数据。
后续的测试也是如此。