今天要測試一下微信登入,要咋整呢,有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/路由上,渲染出我們的一些簡單的資料。
後續的測試也是如此。