本地测试微信授权登录

本地测试微信授权登录，首先要下载一个微信开发者工具，因为微信回调域名不支持IP地址，所以我们要获取到一个域名，映射到本地ip，目前我尝试成功的有两种方法：

1，使用natapp：

1. 注册一个natapp账号，购买一个免费隧道，具体可参考教程NATAPP1分钟快速新手图文教程
2. 下载客户端，下载完成后，新建一个config.ini文件，具体配置参考使用本地配置文件config.ini
3. 配置隧道，修改本机地地址为项目运行的ip地址，修改端口号等
4. 最后，运行成功后，就可以获得一个代理服务器的地址

1. 得到一个可用的域名之后（可先在浏览器打开看是否成功）

2. 申请一个接口测试号，微信公众平台接口测试帐号申请

3. 把测试账号的网页授权域名修改为得到的域名，就可以用这个域名在微信开发者工具打开，开始测试啦

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>

1. 这个ip映射的域名可以直接改成正式项目的域名，把这个域名配置到正式公众号，使用正式的appid，无缝对接上线
2. 这种映射的方法只能在微信开发者工具测试哦

 

注意：本地的端口号要用80的，微信不支持别的端口