前端对接微信公众号网页开发：详细介绍公众号授权对接及参数获取流程-微信公众号学习资源网

我以前编写过一篇关于微信公号网页制作步骤及初期配置的资料。今天，我要具体讲解公号的授权对接步骤。这对那些从事这方面开发的朋友们来说非常重要，只有搞清楚授权对接，公号的开发流程才能更加顺畅。

引入微信js-sdk

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

在那些必须用到JS接口的网页上，得确保加载了正确的JS文件。这可是确保后续授权对接顺利进行的基础工作，就好比盖楼前得先打好地基。要是这一步出了差错，后续的许多功能都可能无法正常运作。所以，大家在引入文件时一定要仔细检查文件路径和版本，确保它们准确无误。

为确保服务稳定运行，若遇到之前提到的资源无法访问，我们可调整策略，尝试访问其他地址。这样做能有效避免因资源不可用而耽误开发进度。遇到此类问题，大家不妨试试这个方法，以确保工作流程不受影响。

http://res2.wx.qq.com/open/js/jweixin-1.6.0.js

引导授权之必要参数

在使用微信授权接口前，得先配置一些重要信息，诸如appid、redirect_uri、response_type、scope以及#wechat_redirect等。这些信息就好比是开启授权流程的钥匙，必须确保它们设置正确。只有充分了解每个参数的功能，大家才能顺畅地完成授权对接。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

授权地址包含的关键数据必须完整，每个数据都有其独特的用途。现在，我们将逐一阐述几个关键数据的获取方式及其作用，帮助大家更好地理解授权过程，降低开发过程中的错误率。

在这里插入图片描述

参数详解之appid

获取appid一般要通过特定途径。编写程序时，最好别直接展示appid，这样做主要是为了安全。一旦appid的详细信息泄露，可能会给公众号的开发带来潜在的安全隐患，就像把家里的钥匙随便给人看，会有安全隐患。

在获取appid时，务必确保接口既稳固又可靠。您可以通过咨询技术专家或查阅官方资料来了解正确的获取途径。这样做可以保证后续的授权对接流程更加顺利，减少不必要的麻烦。

参数详解之redirect_uri

设置 redirect_uri 时，一定要检查地址是否准确无误。在开发期间，最好反复测试，确保用户能被正确引导到目标页面，这样能确保后续操作能够顺畅进行。

参数详解之scope

scope是应用授权的作用域名称，分为snsapi_base和snsapi_userinfo两种。这两种选择决定了我们能够收集的用户信息种类。这相当于拥有不同权限的钥匙，可以开启不同的锁。不同的scope参数将使我们能够获取到不同层面的用户信息。

snsapi_base属于一种静默授权方式，它只能获取用户的唯一标识码openid。而snsapi_userinfo则需要用户手动进行授权，授权时会跳出一个页面，用户需要主动点击确认。一旦授权成功，我们就能通过openid获取用户的详细资料，比如昵称、性别、居住地等信息。在设置scope参数时，要结合实际需要来选择。

var locationHref = document.location.href;

开始授权完整代码

要确认用户是否授权，我查看重定向链接里有没有code，同时检查是否已成功获取用户资料。这相当于给用户的授权情况装了个“小探测器”，能快速知道用户是否完成了授权步骤。

// 路径是否存参数
var array = []
var index = locationHref.indexOf("?")
// 如果本地路径存在参数则进行参数解析
if (index != -1) {
    var objStr = locationHref.substr(index + 1);
    var obj = objStr.split("&");
    for (var i = 0; i < obj.length; i++) {
        array[obj[i].split("=")[0]] = (obj[i].split("=")[1]);
    }
}