DCloud_App_Array
DCloud_App_Array
  • 发布:2015-04-01 12:11
  • 更新:2020-08-01 16:28
  • 阅读:139990

授权登录插件配置

分类:HTML5+

云端打包登录鉴权功能需要到第三方开发平台申请应用后获取相关配置参数,目前支持的平台包括:

  1. 微信:微信开放平台
  2. QQ:腾讯开放平台
  3. 微博:新浪微博开放平台
  4. 苹果登录:iOS 苹果授权登录(Sign in with Apple)教程

配置参数需要提交云端打包后才能生效,如果需要真机运行生效请使用自定义基座

HBuilderX中配置登录鉴权

从微信/QQ/微博开放平台申请获取配置参数后,需在HBuilderX中配置并提交云端打包才能生效。
老版本HBuilder配置界面有差异,逻辑是一样的,建议更新使用HBuilderX

配置使用登录鉴权模块

打开应用的manifest.json文件,在“模块权限配置”项中勾选“OAuth(登录鉴权)”:

配置登录鉴权参数

  • 微信
    在应用manifest.json文件的“SDK配置”页面,勾选“微信登录”项,并输入从微信开放平台申请的参数:


    appid:微信开放平台申请应用的AppID值;
    appSecret:微信开放平台申请应用的AppSecret值;
    UniversalLinks:iOS平台通用链接,必须与微信开放平台配置的一致,参考iOS平台微信SDK配置通用链接(Universal Links)

  • QQ
    在应用manifest.json文件的“SDK配置”页面,勾选“QQ登录”项,并输入从腾讯QQ开放平台申请的参数:


    appid:腾讯QQ开放平台申请应用的AppID值。

  • 微博
    在应用manifest.json文件的“SDK配置”页面,勾选“新浪微博登录”项,并输入从新浪微博开放平台申请的参数:


    "appkey": "新浪微博平台应用appkey";
    "appsecret": "新浪微博平台应用appsecret";
    "redirect_uri": "新浪微博平台应用授权回调页地址"。

配置完成后Ctrl+S保存提交App云端打包生效。

配置参数安全性问题

在HBuilder|HBuilderX中配置的参数云端打包后会保存在apk/ipa中,对于安全性要求高的开发者可能担心存在参数泄露的风险,可以采取以下方式处理。

  • JS代码中动态传参数
    如登录服务AuthService的请求授权认证方法authorize,可以通过第三个参数options动态传入appid、appSecret等。
    这些参数可以加密保存到js代码中或连网从服务器获取(避免保存在本地引起泄露风险,当然需要考虑网络传输过程的安全问题)。

  • 通过服务器完成授权认证
    根据OAuth规范,实际客户端授权只是为了获取授权临时票据(code),这时候可以仅在客户端配置appid参数调用登录服务AuthService的请求授权认证方法authorize获取临时票据,将票据提交到服务器完成后续的操作。
    这种情况授权的参数(如appsecret)仅保存服务器即可,安全性更高。
    在服务器的对接流程需要根据各开放平台的规范要求进行处理,如微信参考:授权后接口调用

这时在HBuilder|HBuilderX中可以填入任意值提交云端打包

7 关注 分享
野蛮人 可可西里 Trust huaguojun123@163.com withdisease 我们都是倒霉熊 挨踢小子

要回复文章请先登录注册

mengzhenhua@126.com

mengzhenhua@126.com

回复 15927027721@163.com :
可以了,感谢大佬对菜鸟的照顾!
2020-08-01 16:28
15927027721@163.com

15927027721@163.com

回复 mengzhenhua@126.com :
```html
<button class="co-btn login_btn" @tap="weixinLogin">微信登录</button>
```
```javascript
function wxLogin() {
plus.oauth.getServices(function(servies){
console.log(servies)
// auths = servies;
// var s = auths[0];
let s = servies[0]
// console.log(222)
if( !s.authResult ){

console.log(s.authResult)
s.authorize(function(e){
console.log('获取code!' + JSON.stringify(e));

}
}
}
}
```
2020-07-31 14:26
15927027721@163.com

15927027721@163.com

回复 mengzhenhua@126.com :
已经上线使用了,真机和打包都没问题
2020-07-31 14:24
mengzhenhua@126.com

mengzhenhua@126.com

回复 15927027721@163.com :
你好,我这还是无法进入成功,或者失败回调,请问你是打包查看的还是真机模拟测试?
2020-07-31 09:49
15927027721@163.com

15927027721@163.com

回复 mengzhenhua@126.com :
我的解决了,plus.oauth.getServices(function(servies){
console.log(servies)
// auths = servies;
// var s = auths[0];
let s = servies[0]
// console.log(222)
if( !s.authResult ){

console.log(s.authResult)
s.authorize(function(e){
console.log('获取code!' + JSON.stringify(e));
// uni.showModal({ title: '用户信息',content: e.code,});
uni.showLoading({
title:'加载中',
mask:true
})

_this.requestAjax({ //登录
url: '/api/auth/login/doAppWxLogin.do',
data: {
code: e.code,

},
success:function(res){
uni.hideLoading()
if(res.data.success) {
service.addUser({
token:res.data.data,
time:new Date().getTime()
})
uni.showToast({
icon: 'none',
title: '登录成功',
});
_this.getIdentity()
phone.setUserPhone(_this.account)
}
else {
uni.showToast({
icon: 'none',
title: res.data.errMsg,
});
uni.navigateTo({
url:"/pages/market/loginPage/weixin/weixin"
})
}

}
})



}, function(e){
console.log('登陆认证失败!');
uni.showModal({ title: '认证失败1',content: JSON.stringify(e),});
}, {scope:'snsapi_userinfo',state:'123',appid:'wx53015b8719bf8272'});

}else{
console.log('已经登陆认证');

}

}, function(e){
console.log("获取服务列表失败:"+JSON.stringify(e));
})
2020-07-29 21:15
mengzhenhua@126.com

mengzhenhua@126.com

回复 test23py1 :
请问参考后的代码能进入回调么?我遇到了和他相同的问题
2020-07-29 14:04
mengzhenhua@126.com

mengzhenhua@126.com

回复 15927027721@163.com :
请问你的问题解决了么
2020-07-29 14:03
test23py1

test23py1

回复 15927027721@163.com :
感谢代码分享。It works!
2020-07-28 11:43
15927027721@163.com

15927027721@163.com

微信使用我使用h5+的api,前端获取code的。有的问题是只有第一个登录能跳转到微信登录授权页,后面在点击就没反应,但是整个app触发了onHide事件.页面没反应,authorize既没有进入成功回调,页没有进入失败回调。请问这个是什么问题
```javascript
weixinLogin() {
initLogin(){
let _this = this;

plus.oauth.getServices(function(services) {
let auths = services;
let aweixin = auths[0];
// console.log(aweixin)
if (!aweixin.authResult) {

// console.log(aweixin.authorize)

// aweixin.logout(function(e){
// plus.nativeUI.alert("注销登录认证成功!");
// }, function(e){
// plus.nativeUI.alert("注销登录认证失败: "+JSON.stringify(e));
// });
// debugger
// aweixin.login(function(e){
// console.log(e)
// }, function(e){
// console.log(e)
// } );
aweixin.authorize(function(e) {
console.log(e.code);//app端获取到的code
let code = e.code
_this.getWxUserInfo(code)

},function(e) {
console.log(e)
uni.showToast({
title: '微信授权失败',
icon: 'none'
})
}, {
scope: 'snsapi_userinfo',
state: 'wechat_sdk' ,
appid: '11'
});
}
else {
uni.showToast({
title: '已授权',
icon: 'none'
})
}
}, function(e) {
console.log(e)
uni.showToast({
title: '获取登录授权服务列表失败',
icon: 'none'
})
});

},
getWxUserInfo(code) {
let _this = this
uni.showLoading({
title:'登录中',
mask:true
})
_this.requestAjax({
url: '/api/auth/login/doAppWxLogin.do',
data: {
code:code
},
success: (res) => {
uni.hideLoading()
console.log(e)
},
fail:(res) => {
uni.hideLoading()
uni.showToast({
icon: 'none',
title: res.errMsg,
duration: 2000
});

},
})
},

```
2020-04-11 21:42
hugetiny@hotmail.com

hugetiny@hotmail.com

请问没有那种跳转到第三方app.然后登录的方式吗
2020-04-10 21:39