ajax 实现微信网页授权登录

binaryTree 发布于2019-06-28 18:29 / 2183人阅读

摘要：项目背景因为项目采用前后端完全分离方案，所以，无法使用常规的微信授权登录作法，需要采用实现微信授权登录。其实实现这个也麻烦，在实现之前，我们需要了解一下微信授权的整个流程。用户微信登录授权以后回调过来的会携带两个参数，第一个是另一个就是。

项目背景

因为项目采用前后端完全分离方案，所以，无法使用常规的微信授权登录作法，需要采用 ajax 实现微信授权登录。

需求分析

因为本人是一个phper ，所以，微信开发采用的是 EasyWeChat ，所以实现的方式是基于EW的。
其实实现这个也麻烦，在实现之前，我们需要了解一下微信授权的整个流程。

引导用户进入授权页面同意授权，获取code

通过code换取网页授权access_token（与基础支持中的access_token不同）

如果需要，开发者可以刷新网页授权access_token，避免过期

通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

其实说白了，前端只需要干一件事儿，引导用户发起微信授权页面,然后得到code,然后跳转到当前页面,然后再请求后端换取用户以及其他相关信息。

功能实现

引导用户唤起微信授权确认页面

这里需要我们做两件事，第一去配置jsapi域名，第二配置微信网页授权的回调域名

构建微信授权的url "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split("#")[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect 我们从连接中看到有两个变量，appId,以及 redirect_uri。appId 不用多说，就是咱们将要授权的微信公众号的appId,另一方个回调URL，其实就是我们当前页面的URL。

用户微信登录授权以后回调过来的URL 会携带两个参数，第一个是code,另一个就是 state。才是我们需要做的一件事儿就是将code获取到然后传给后端，染后端通过code 获取用户基本信息。

后端得到code 以后，获取用户基本信息，并返回相关其他信息给前端，前端获取到然后做本地存储或者其他。

function 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;
}

function wxLogin(callback) {
    var appId = "xxxxxxxxxxxxxxxxxxx";
    var oauth_url = "xxxxxxxxxxxxxxxxxxx/oauth";
    var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split("#")[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
    var code = getUrlParam("code");
    if (!code) {
        window.location = url;
    } else {
        $.ajax({
            type: "GET",
            url: oauth_url,
            dataType: "json",
            data: {
                code: code
            },
            success: function (data) {
                if (data.code === 200) {
                    callback(data.data)
                }
            },
            error: function (error) {
                throw new Error(error)
            }
        })
    }
}

私有云云服务器微信网页授权 php微信登录授权 php 网页授权登录 php做微信授权登录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28324.html

基于SpringBoot的微信授权登录+仿微信朋友圈+文章查看（评论）系统

摘要：功能介绍微信网页端顾名思义就是在微信浏览器上看的啦，本系统使用微信测试号条件有限授权登录，可以查看网页端所发的文章，对文章进行评论，回复，点赞，可修改个人的资料，可以发表说说，也是可对说说进行回复点赞评论。本系统是基于Spring Boot 技术实现的文章发布系统，该系统是我和我朋友一起做的，本文仅介绍自己的这部分，他的那部分会在本文发布后在评论里贴上链接，微信网页上的操作为我所负责...

shadajin 2019-08-21 17:43 评论0 收藏0
基于SpringBoot的微信授权登录+仿微信朋友圈+文章查看（评论）系统

摘要：功能介绍微信网页端顾名思义就是在微信浏览器上看的啦，本系统使用微信测试号条件有限授权登录，可以查看网页端所发的文章，对文章进行评论，回复，点赞，可修改个人的资料，可以发表说说，也是可对说说进行回复点赞评论。本系统是基于Spring Boot 技术实现的文章发布系统，该系统是我和我朋友一起做的，本文仅介绍自己的这部分，他的那部分会在本文发布后在评论里贴上链接，微信网页上的操作为我所负责...

mochixuan 2019-08-15 12:34 评论0 收藏0
H5/web app/第三方网页微信授权登录调研

摘要：微信登录用户可使用微信帐号快速登录你的网站，同一用户使用微信登录你的不同应用和公众帐号，会对应同一个，以便进行不同业务间的帐号统一微信授权登录可分为扫码登录一般用于网页微信开放平台跳转授权登录第三方使用微信开放平台微信内置浏览器内登录一微信登录：用户可使用微信帐号快速登录你的网站，同一用户使用微信登录你的不同应用和公众帐号，会对应同一个UnionID，以便进行不同业务间的帐号统一 ...

keithxiaoy 2019-08-23 15:33 评论0 收藏0
说说微信扫码登录

摘要：详情接口我们这里主要讲的是网站应用，网站应用微信登录是基于协议标准构建的微信授权登录系统即上面的协议。在微信客户端授权登录获取用户信息的可以查看。微信授权登录目前支持模式，适用于拥有端的应用授权。一、OAuth2.0 OAuth（开放授权）是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如照片，视频，联系人列表），而无需将用户名和密码提供给第三方应用。 ...

Jokcy 2019-08-23 13:07 评论0 收藏0