H5/web app/第三方网页微信授权登录调研

keithxiaoy 发布于2019-08-23 15:33 / 2463人阅读

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

微信登录：

用户可使用微信帐号快速登录你的网站，
同一用户使用微信登录你的不同应用和公众帐号，会对应同一个UnionID，以便进行不同业务间的帐号统一

微信授权登录可分为：

扫码登录（一般用于 PC 网页）- 微信开放平台

跳转 APP 授权登录（第三方 APP 使用）- 微信开放平台

微信内置浏览器内登录（一般用于移动端网站，公众号登录）- 微信公众平台

微信小程序内微信登录（小程序内部）- 微信公众平台

公司项目登录场景描述：
只限于在微信客户端打开的网页应用，在微信消息列表直接给好友发送一个网页的URL，用户收到直接点击URL直接打开页面

结论：云学院为移动端网站，使用第三种登录方式，微信网页授权

网页授权的两种方式：

1.静默授权：

用户感知的就是直接进入了回调页（往往是业务页面）

req.scope = @"snsapi_base"

只能获取access_token和openID

2.非静默授权：

需要用户手动同意

req.scope = @"snsapi_userinfo"

获取更详细的用户资料，比如头像、昵称、性别等

结论：使用非静默授权

实现步骤：

1、登陆【杏树林公众号】后可以查看到【appId】和【appsecret】信息

2、公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名

3、引导用户进入授权页面同意授权，此时会调用微信api获取code

4、授权通过后会带上code参数请求回调地址

5、后台获取code,再次调用微信接口换取网页授权access_token和openid

6、通过网页授权access_token和openid获取用户基本信息（如果有unionid还会获取到unionid参数）

示例代码：

async function wxAuth(req, res) {
    //解析querystring获取URL中的code值    
    let code = req.query.code;
    //通过拿到的code和appID、app_serect获取返回信息
    let resObj = await getAccessToken(code);
    //解析得到access_token和open_id
    let access_token = resObj.access_token;
    let open_id = resObj.openid;
    //通过上一步获取的access_token和open_id获取userInfo即用户信息
    let userObj = await getUserInfo(access_token, open_id);
    console.log(userObj);
    res.render(path.resolve(__dirname,"userInfo.ejs"), {userObj: userObj});
    // res.send(userObj);}

//通过拿到的code和appID、app_serect获取access_token和open_id
function getAccessToken(code) {
    return new Promise( (resolve, reject) => {
        let getAccessUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=` + `${appID}&secret=${appSerect}&code=${code}&grant_type=authorization_code`;
        https.get(getAccessUrl, (res) => {
            var resText = "";
            res.on("data", (d) => { 
               resText += d; 
            });
            res.on("end", () => {
                var resObj = JSON.parse(resText);
                resolve(resObj);
            });
        }).on("error", (e) => {
            console.error(e);
        });
    });
    }
//通过上一步获取的access_token和open_id获取userInfo即用户信息
function getUserInfo(access_token, open_id) {
    return new Promise( (resolve, reject) => {
        let getUserUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${open_id}&lang=zh_CN`;
        https.get(getUserUrl, (res) => {
            var resText = ""; 
            res.on("data", (d) => {
                resText += d;
            });
            res.on("end", () => {
                var userObj = JSON.parse(resText);
                resolve(userObj);
            });
        }).on("error", (e) => {
            console.error(e);
        });
    })}

demo：

文档：微信网页授权

https://mp.weixin.qq.com/wiki...

参考：
https://juejin.im/post/5b5c42...
https://juejin.im/post/5ad54e...

私有云混合云微信网页授权 php微信登录授权 php 网页授权登录 php做微信授权登录

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

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

微信第三方登录（PC网站、APP、移动网页）

摘要：最近搞微信第三方登录，搞蒙圈了。当你把服务号绑定到开放平台之后，网页授权返回的数据会多一个，同一个微信账号在同一个开放平台账号下的是一致的。最近搞微信第三方登录，搞蒙圈了。我们的业务有两个场景需要使用微信第三方登录：1、APP 第三方登录2、H5网页第三方登录，具体流程：用户微信端收到一个二维码--->扫码后同意微信授权-->绑定手机号码一开始纠结着是不是需要申请公众号，找了个专...

RobinQu 2019-07-01 11:05 评论0 收藏0
微信第三方登录接口开发

摘要：相关资料博客微信第三方登录接口开发端微信扫码登录文档移动端网页微信公众平台授权登录微信开放平台登录与微信公众平台授权登录区别在哪微信登录接口几个问题微信登录的和区别百分号编码在线转换第三方登录微信登录接口开发须知 APP登录接口 PC网站登录接口微信移动网页登录接口(又称微信公众号授权登录) 移动端非微信自带浏览不支持微信登录微信移动网页登录接口(又称微信公众号授权登录) ...

ziwenxie 2019-06-28 13:45 评论0 收藏0
聊聊二维码登录

摘要：场景主要的场景有如下几个扫二维码登录版系统比如微信版，在手机端微信登录的前提下，扫二维码确认，自动登录网页版。小结二维码扫描登录是个挺潮流的功能，这要求既有系统增加改造，也要求针对这种形式的登录带来潜在的攻击进行安全防范。序本文主要来研究一下二维码登录的相关场景和原理。场景主要的场景有如下几个： app扫二维码登录pc版系统比如微信web版，在手机端微信登录的前提下，扫二维码...

Tikitoo 2019-06-21 16:38 评论0 收藏0
微信小程序调研

摘要：外链月最新新增提供组件可以用来承载网页容器会自动铺满整个小程序页面个人类型和海外类型暂不支持需将访问域名后台添加至白名单微信授权链接是否可访问需要测试公众号关联公众号关联小程序后，将可在图文消息自定义菜单模板消息等功能中使用小程序。小程序入口微信发现,小程序公众号主体查看小程序好友分享,群分享公众号自定义菜单跳转 APP页面跳转第三方服务附近的小程序扫普通链接二维码打...

CKJOKER 2019-08-21 17:49 评论0 收藏0
微信小程序调研

摘要：外链月最新新增提供组件可以用来承载网页容器会自动铺满整个小程序页面个人类型和海外类型暂不支持需将访问域名后台添加至白名单微信授权链接是否可访问需要测试公众号关联公众号关联小程序后，将可在图文消息自定义菜单模板消息等功能中使用小程序。小程序入口微信发现,小程序公众号主体查看小程序好友分享,群分享公众号自定义菜单跳转 APP页面跳转第三方服务附近的小程序扫普通链接二维码打...

BingqiChen 2019-08-05 12:28 评论0 收藏0