今天要测试一下微信登录,要咋整呢,有appId,有秘钥,但要咋整呢,下面来梳理下。
1. 首先注册 微信公众平台测试号
http:// mp.weixin.qq.com/debug/ cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
微信扫一下,就能得到一个测试号啦。
2.有了测试号,你就能看到appID和appsecret啦。
下一步,滑滑滑到
测试号二维码
,扫描添加自己的微信号。
![5e908da9f50006c3940620daf4e59cd2.png](https://i-blog.csdnimg.cn/blog_migrate/d7cec30a9334bb3225ec5b27c2e2bce4.png)
再下一步,滑滑滑到体验接口权限表,直接滑到网页服务-网页账号,点击修改。
![2e7c9d0e25921c529263c1701fc82920.png](https://i-blog.csdnimg.cn/blog_migrate/c6379e69018b94f6e2080d1e0db25ec2.jpeg)
会要求你需要一个授权回调页面域名
。
![ef4b3c6e5dec778c971c4a2d7131c64e.png](https://i-blog.csdnimg.cn/blog_migrate/a7dd8a7ba5c7d2fa7d609c45294bee39.png)
3. 如何填写这个授权回调页面域名
因为我们是本地测试,我们直接修改hosts文件就好了。
- 第一步,打开hosts文件,MAC系统:sudo vim /etc/hosts就好了。
- 第二步,里面直接填写127.0.0.1 http://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我们要如何做?
- 第一步:下载微信开发者工具,左上角菜单,更换开发者模式为
公众号网页调试
![7941683fe32940abeb08fbcd0a19e43d.png](https://i-blog.csdnimg.cn/blog_migrate/d397fbfd7bbd671fe78ef90cd7d86d45.png)
- 第二步:在微信开发者工具中请求连接:https://open.weixin.qq.com/connect/oauth2/authorize?appid=OPENID&redirect_uri=REDIRCT_URI&response_type=code&scope=snsapi_base&state=123#wechat_redirect
![360285612d3e2360e0783ab7c7cbfd0a.png](https://i-blog.csdnimg.cn/blog_migrate/8ea09f979fba98d92803d80b9c3e45e7.jpeg)
- 把我们获取的到的openid,填上去然后,填上我们重定向的uri就行了。
4.2重定向的url要如何弄呢?
我们直接Django 写一个视图就好啦。
def testView(request):
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}&lang=zh_CN')
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端口,而不是其他端口,因为重定向url不能带端口号。
最终我们的重定向域名就是 http:// weixintest.com/test/ ,其实就是127.0.0.1:80/test/。
4.3test.html内容,简单的渲染下
test.html
<html lang="en">
<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,就会重定向我们的http://weixintest.com/test/路由上,渲染出我们的一些简单的数据。
![566d5204b746afa43507aa8865de35f1.png](https://i-blog.csdnimg.cn/blog_migrate/f6c519438429d7becc20c82f4896139f.jpeg)
可以看到这里返回了一些基本信息。
后续的微信接口也是如此。