微信开发之微信授权登录
沉沙 2018-12-21 来源 : 阅读 3174 评论 0

摘要:本篇教程探讨了微信开发之微信授权登录,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

本篇教程探讨了微信开发之微信授权登录,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。

微信开发之微信授权登录

<

应用场景是:用Hbuilder打包app,在app中点击微信授权登录或者某一操作,调起微信授权登录,用户授权后拿到用户信息。
一、登录插件配置
先配置微信登录参数 appid和appsecret,在manifest.json 文件中选择SDK配置,登录鉴权  勾选微信登录,填入在开放平台申请的app参数。
在manifest.json 文件中选择 源码视图,找到“OAuth”,配置为
"OAuth" : {
    "description" : "登录授权"
},
 官方相关查阅地址://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/192
二、在网站中添加授权登录代码
我的需求是:在网站中点击微信授权登录,判断是否来自wap2app,如果来自wap2app则调起微信授权登录。在网站中加入如下代码:
1.点击微信授权登录,获取微信授权服务:
var auths=null;
$("body").on("click",".loginBtn",function(){
    // 微信授权登录
    if(navigator.userAgent.indexOf("Html5Plus") > -1){
        plus.oauth.getServices( function(services){
            auths = services;
            authLogin();
        }, function(e){
            alert("获取分享服务列表失败:"+e.message+" - "+e.code);
        } );
    }
})
2.登录认证
//登录
function authLogin(){
    var s = auths[0];
    if ( !s.authResult ) {
        s.login( function(e){
            // 获取登录操作结果
            var result = e.target.authResult;
            alert( "登录认证成功:"+JSON.stringify(result) );
            authUserInfo()
        }, function(e){
            alert("登录认证失败!");
        }, {} );
    }
}
3.获取用户信息
// 获取登录用户信息操作
function authUserInfo(){
    var s = auths[0];
    if ( !s.authResult ) {
        alert("未登录授权!");
    } else {
        s.getUserInfo( function(e){
            alert( "获取用户信息成功:"+JSON.stringify(s.userInfo) );
            //拿到用户信息,进行相关处理,ajax传用户数据到服务器等
            var prame = JSON.stringify(s.userInfo);
        }, function(e){
            alert( "获取用户信息失败:"+e.message+" - "+e.code );
        } );
    }
}
4.退出登录
function authLogout(){
    for ( var i in auths ) {
        var s = auths[i];
        if ( s.authResult ) {
            s.logout(function(e){
                alert( "注销登录认证成功!" );
            }, function(e){
                alert( "注销登录认证失败!" );
            });
        }
    }
}
 官方相关查阅地址://www.html5plus.org/doc/zh_cn/oauth.html
在hbuilder中运行会发现可以调起微信授权,且可以获取用户信息,如下图:
点击确认登录后,返回用户信息和unionid等信息,如下图:
但是打包后会一直提示登录认证失败,无法授权,也没有调起微信授权的页面,主要有以下两个错误:
一、报错 code = -2,用户取消
解决办法:研究了很久,发现主要是两个原因:1.使用了网站的appid和appsecret,应该是申请的app应用的appid和appsecret,2.应该使用自有证书
依旧还是报错 code = -2,检查是否在线上运行,即在开放平台绑定的域名必须与该项目的域名一致,即我们常说的,微信分享、微信登录必须在线上测试
二、报错 code = -100如下图:
问题1:检查应用签名是否错误
问题2:检查开放平台的配置授权回调域名是否配置,且是否配置正确(www.baidu.com格式)
解决办法:
微信开放平台移动应用中的应用签名错误,若申请应用时开发信息中数据填写错误,直接修改,已审核通过的不需要重写审核。
应用签名的要求:
1.MD5格式 2.签名为小写;3.去除冒号。都为必须条件。
在Hbuilder中配置时,签名也必须是修改后的格式(md5、小写、去冒号)。
Hbuilder中配置应用签名时,打开manifest.json文件,打开“源码视图”(基础配置,图标配置,启动图配置,SDK配置,模块权限配置中都是没有应用签名配置的,所以很容易遗漏修改它的值),找到 plus --> signature,修改signature的值为符合条件的值即可
 
以上打包之后,不在报错,但是还有一个问题,在app中点击微信授权后,除了首次会调起微信授权手动授权的界面,再次授权时直接就弹出了用户信息,即直接执行了,缺少用户在终端确认的请求授权过程
alert( "登录认证成功:"+JSON.stringify(result) );
这是因为,授权的微信号只有首次授权时才会调起微信授权的页面,当退出微信授权再次进入时,点击授权会跳转之后再跳回来,自动获取到用户信息。
打包app,微信授权登录常遇到的问题总结:
1.使用了网站的appid和appsecret,应该是申请的app应用的appid和appsecret
2.应该使用自有证书
3.微信开放平台移动应用中的应用签名错误,必须满足3点:1.MD5格式 2.签名为小写;3.去除冒号。都为必须条件。
4.(网站或打包app)微信授权登录,必须在开放平台配置授权回调域名,且必须是www形式的,如www.baidu.com,否则授权登录一直报错
5.开发微信分享、微信登录等微信相关的功能,在开放平台或者公众平台绑定的域名必须与该项目的域名一致,即我们常说的,微信分享、微信登录必须在线上测试    

本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 1 不喜欢 | 0
看完这篇文章有何感觉?已经有1人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程