微信网页授权开发(基于微信公众号发起的网页授权以及基于第三方平台代公众号发起授权)

由于工作需要,需要在h5界面上发起一个授权操作，从而获取用户信息以及用户openId，提供了两种方法：

想要拿到用户openid，第一步首先要获取到code，通过code以及你要授权的公众号一些别的信息来换取access_token，这里提供一个换取code的方法：

/**
     *@createdBy cjf
     *@date 2018/12/7
     *@methods:getUrlParam
     *@para: name 自定义字段
     *@description:取页面路径的某个字段所对应的参数
     **/
    function getUrlParam(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); // 构造一个含有目标参数的正则表达式对象
        var r = decodeURI(window.location.search).substr(1).
            match(reg); // 匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; // 返回参数值
    }

1、基于微信公众号发起的网页授权

首先就我自己对授权的理解说一下我的思路：

a、首先第一步要拿到code(用来获取access_token必须的参数)；

code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。

微信提供了一个链接，打开这个链接就可以做授权的操作：

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

主要参数说明如下：

按照如上的要求将路径拼好，直接在微信里面打开这个链接便可出现授权界面：

这里的操作说明如下：

点击允许，便可获取code，然后页面会重定向到你到你的h5页面，并且会在你的页面路径上面上增加code参数，使用最上面提供的方法便可拿取code换取用户openid；

获取code后，请求以下链接获取access_token：  https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

可以看到这里有个secrect（公众号秘钥）参数我们前端拿不到，所以第二步换取openid就放到了后端去做了。此次授权到此就告一段落了。。。。 下面贴代码。。

getCode () { // 非静默授权，第一次有弹框
     const code = GetUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
     const local = window.location.href
     if (code == null || code === '') {
         window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + window.APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
     } else {
         this.getOpenId(code) //把code传给后台获取用户信息
     }
 },
 getOpenId (code) { // 通过code获取 openId等用户信息
         // 此处可写请求后端的接口拿到openid

 }

ps:具体详细信息请前往微信公众平台开发文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

2、基于第三方平台代公众号发起授权

可能还有微信授权是基于第三方平台的，原理和上面基本都一样，唯一的不同是在于我们我们作为第三方平台的话，我们会有自己的component_appid（服务方的appid），component_access_token（服务开发方的access_token）。

第一步获取code链接也有所改动：

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

具体参数如下：

第二步用code换取openid：

https://api.weixin.qq.com/sns/oauth2/component/access_token?appid=APPID&code=CODE&grant_type=authorization_code&component_appid=COMPONENT_APPID&component_access_token=COMPONENT_ACCESS_TOKEN

具体参数如下：

换取openid成功返回参数如下：

{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}

ps:具体详细信息请前往微信开放平台开发文档：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419318590&token=&lang=zh_CN

希望可以帮到大家。。