本地测试微信授权登录,首先要下载一个微信开发者工具,因为微信回调域名不支持IP地址,所以我们要获取到一个域名,映射到本地ip,目前我尝试成功的有两种方法:
1,使用natapp:
- 注册一个natapp账号,购买一个免费隧道,具体可参考教程NATAPP1分钟快速新手图文教程
- 下载客户端,下载完成后,新建一个config.ini文件,具体配置参考使用本地配置文件config.ini
- 配置隧道,修改本机地地址为项目运行的ip地址,修改端口号等
- 最后,运行成功后,就可以获得一个代理服务器的地址
- 得到一个可用的域名之后(可先在浏览器打开看是否成功)
- 申请一个接口测试号,微信公众平台接口测试帐号申请
- 把测试账号的网页授权域名修改为得到的域名,就可以用这个域名在微信开发者工具打开,开始测试啦
2,修改本地hosts:
首先在本地ip运行一个项目
这里显示的是window的路径,打开hosts文件,添加映射: 本地ip->测试域名
得到一个可用的域名之后(可先在浏览器打开看是否成功)
申请一个接口测试号,微信公众平台接口测试帐号申请
把测试账号的网页授权域名修改为得到的域名,就可以用这个域名在微信开发者工具打开,开始测试啦
点击微信授权按钮,提示没有关注就去关注一下
再次点击授权按钮,这里可以看到已经成功获取到code啦,顺便把测试的vue代码贴出来参考一下。
<template>
<div class="page">
<button @click="getWxAuth">微信授权</button>
{{ code }}
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import Utils from '@/common/utils/utils'
@Component({})
export default class WxComponent extends Vue {
code = ''
getWxAuth() {
// 回调链接
const redirectURL =
window.location.origin + window.location.pathname + '#/wx-test'
const appId = 'wx82b9adeb92815aea'
const url =
'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
appId +
'&redirect_uri=' +
encodeURIComponent(redirectURL) +
'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
window.location.href = url
}
created() {
const code = Utils.getQueryString(window.location.href, 'code')
console.log(code, 'wxcode')
if (code) {
this.code = code
}
}
}
</script>
- 这个ip映射的域名可以直接改成正式项目的域名,把这个域名配置到正式公众号,使用正式的appid,无缝对接上线
- 这种映射的方法只能在微信开发者工具测试哦
注意:本地的端口号要用80的,微信不支持别的端口