公众号 H5 测试号注册和授权获取code 前端部分

XDJcc 2023-03-28 原文

Tips：因为申请公众号需要 ¥300。 so 我用的是测试号。【白嫖永远不亏】

需要注意的是测试号是和个人微信号关联起来的，不是公众号主体关联。。也就是每个人都可以申请，而不是必须有公众号主题才可以。测试号和公众号是独立的。

一、前置准备-注册配置测试账号

1.注册测试号

去微信公众平台注册一个测试号。注意这是测试账号【白嫖的快乐】你会进入到这个界面。会生成测试用的appid 让你测试授权。记下来等会要用。

2、配置网页回掉域名

还是这个界面往下滑你会看到一个。体验接口权限表

在这个表的【网页服务】- 【网页账号】- 【网页授权获取用户基本信息】这一项点击【修改】按钮
点击按钮会让你 设置网页回调域名 无需以"http://"开头，直接写域名就可以,例如 "aa.bb.com"。

因为是开发调试，所以我们需要用手机连接电脑启动的H5服务。你可以把这个路径写成自己启动的H5 项目的服务地址，然后在手机上访问。具体怎么访问的流程之后会讲。我这边填写的就是我启动的H5服务地址。

end：到这里就已经可以进行授权了，其他的一些功能就不叽歪了。

二、H5 获取授权信息

1、微信授权分为静默授权（snsapi_base）和非静默授权（snsapi_userinfo）

我选择的是静默授权

静默授权流程：以snsapi_base为scope发起网页授权得到code，再用公众号的appid和secret获取微信公众号的全局唯一凭证access_token，然后用拿到的access_token调用公众号的“用户管理接口”中的“获取用户信息接口”获得unionID。

前端需要做的是以snsapi_base为scope发起网页授权得到code，调用后台接口获取unionId

2、代码实现

废话不多说上代码：

URl就是你上面配置的那个路径这里是使用当前获取授权的界面地址。我们用的是测试号，所以你上面配置了什么路径就在这里用什么路径。这样直接获取当前界面的路径我没试也不知道测试号行不行。小伙伴们可以尝试一下

getBaseInfos() {
  if (this.isWeiXin()) {
    const code = this.getUrlParam("code"); // 截取路径中的code
    if (code == null || code === "") {

      let url = sessionStorage.getItem("originUrl");
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=你申请的appkey&redirect_uri=" +
        encodeURIComponent(url) +
        "&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
    } else {
    ///
    ///暂时不知道怎么写不是微信浏览器怎么搞。
    ///
    }

    if (code != "" && code != null) {
      this.wxCode = code;
      console.log(code)
      //这里就是把code给服务端了，没我们的事啦。【撒花】
      this.getOpenid(code)
    }
  } else {
  }
},
//判断是不是微信浏览器。
isWeiXin() {
  var ua = window.navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  } else {
    return false;
  }
},
// 编码函数
getUrlParam(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
  var r = window.location.search.substr(1).match(reg); //匹配目标参数
  if (r != null) return unescape(r[2]);
  return null; //返回参数值
},

有关公众号 H5 测试号注册和授权获取code 前端部分的更多相关文章

ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？最佳答案不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
ruby - 使用 C 扩展开发 rubygem 时，如何使用 Rspec 在本地进行测试？ - 2
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
ruby - Ruby 的 Hash 在比较键时使用哪种相等性测试？ - 2
我有一个围绕一些对象的包装类，我想将这些对象用作散列中的键。包装对象和解包装对象应映射到相同的键。一个简单的例子是这样的:classAattr_reader:xdefinitialize(inner)@inner=innerenddefx;@inner.x;enddef==(other)@inner.x==other.xendenda=A.new(o)#oisjustanyobjectthatallowso.xb=A.new(o)h={a=>5}ph[a]#5ph[b]#nil,shouldbe5ph[o]#nil,shouldbe5我试过==、===、eq?并散列所有无济于事。
ruby - RSpec - 使用测试替身作为 block 参数 - 2
我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere
ruby - Sinatra:运行 rspec 测试时记录噪音 - 2
Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/
ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2
我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test
ruby - 即使失败也继续进行多主机测试 - 2
我已经构建了一些serverspec代码来在多个主机上运行一组测试。问题是当任何测试失败时，测试会在当前主机停止。即使测试失败，我也希望它继续在所有主机上运行。Rakefile:namespace:specdotask:all=>hosts.map{|h|'spec:'+h.split('.')[0]}hosts.eachdo|host|begindesc"Runserverspecto#{host}"RSpec::Core::RakeTask.new(host)do|t|ENV['TARGET_HOST']=hostt.pattern="spec/cfengine3/*_spec.r
ruby-on-rails - 如何使辅助方法在 Rails 集成测试中可用？ - 2
我在app/helpers/sessions_helper.rb中有一个帮助程序文件，其中包含一个方法my_preference，它返回当前登录用户的首选项。我想在集成测试中访问该方法。例如，这样我就可以在测试中使用getuser_path(my_preference)。在其他帖子中，我读到这可以通过在测试文件中包含requiresessions_helper来实现，但我仍然收到错误NameError:undefinedlocalvariableormethod'my_preference'.我做错了什么？require'test_helper'require'sessions_hel
ruby - 简单获取法拉第超时 - 2
有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url
ruby - 从 Ruby 中的主机名获取 IP 地址 - 2
我有一个存储主机名的Ruby数组server_names。如果我打印出来，它看起来像这样:["hostname.abc.com","hostname2.abc.com","hostname3.abc.com"]相当标准。我想要做的是获取这些服务器的IP(可能将它们存储在另一个变量中)。看起来IPSocket类可以做到这一点，但我不确定如何使用IPSocket类遍历它。如果它只是尝试像这样打印出IP:server_names.eachdo|name|IPSocket::getaddress(name)pnameend它提示我没有提供服务器名称。这是语法问题还是我没有正确使用类？输出:ge

公众号 H5 测试号 注册 和 授权 获取code 前端部分