关于微信公众号页面获取code进行微信授权登录

关于微信公众号页面获取code进行微信授权登录

前言

提示：本文章为个人平时开发中的一些坑，对于新手可以耐心看一下，如果您感觉可以的话，请点个小星星再走吧，多谢了~~~

提示：以下是本篇文章正文内容（因为在网页登录授权这里，我们只需要跳转一个URL，在URL上面配置一些信息就可以，无需引入其他东西）

一、准备所需要的东西

1.官方文档
2.一个公司认证的公众号
3.还有编辑器 阿giao~

二、微信官方公众号开放文档

1.下面官方文档链接

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
所需要的东西在文档的微信网页开发-网页授权

2.开始工作

1.跳转链接的准备(因为网页授权只需要跳转链接)：

跳转所需要的链接（scope为snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）：

scope还有一种模式(权限低，如果想要，请移步到官方文档)：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirec

2.链接所需要的appid：
这个是在微信开发平台-开发-就基本配置里面(前提是已经认证的)

2.链接所需要的redirect_uri：
这个是在微信开发平台-设置-公众号设置-功能设置-网页授权域名(这里好像只能设置两个)，这里设置 上面有一个文件需要下载下来给你们的后端人员然他去配置一下就可以了；
URL 这里在强调一下(你回调的页面必须是在你配置的域名下面);

3.跳转链接(最为关键的一点)
小提示：
这里有一点切记！！！！！！！ appid和回调的URL必须是同一个公众号下的！！！appid和回调的URL必须是同一个公众号下的！！！appid和回调的URL必须是同一个公众号下的！！！
代码如下（示例）：

 gotoWXLogin() {
      //2 为微信登录
      //此处的ID是在文档的开发-基本配置里面
      let appid = "此处为已认证的公众号的唯一标识(公众号的开发ID)";
      let url = "这里是你的回调URL";
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        appid +
        "&redirect_uri=" +
        url +
        "&response_type=code&scope=snsapi_userinfo&state=bc17befd6d5060f16de95e38f6eaf69c&connect_redirect=1#wechat_redirect";
    },

3.获取官方返给你的code

1.code在哪里获取
官方的code会添加在你跳转到的页面的URL上面；
2.这里给一个vue的获取方式

//在页面的mounted或者created生命周期里面获取就可以
let code = this.getQueryString("code");
//这是方法
getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
      var context = "";
      if (r != null) context = r[2];
      reg = null;
      r = null;
      return context == null || context == "" || context == "undefined"
        ? ""
        : context;
    }

总结经验

提示：这里对文章进行总结：
以上是微信公众号获取code的方式，如果你感觉还可以的话，请给个小星星鼓励一下我吧！