快应用之授权登录

快应用的授权要区分多种情况,华为、魅族不支持微信账户授权,所以,华为要走华为的账号,魅族走魅族的账号,及打开网页和网页与快应用进行通信,最理想的登录就是手机验证码登录了1.华为账号授权先要在华为快应用网站上先创建一个快应用,这个快应用的名字等信息要和你即将要开发的快应用名字一样获取appid方法的链接证书指纹必须在华为ide上才能获取获取授权的接口文档也应该查看华为的开发文档,并且在调试的时候,必须使用华为ide来测试授权,如果使用快应用官方的,则授权返回的数据都是一些模拟的数据在生成指纹证书后,在sign文件夹中会有release文件夹,且生成pem后缀的文件,要将release中的文件复制到debug文件夹下,最好是将debug里面的文件删除,然后再粘贴到文件夹中,替换可能会出现问题首先用接口获取手机机型/* 如:华为则返回HUAWEI,华为荣耀也是返回HUAWEI */device.getInfo({ success: res => { this.deviceName = res.manufacturer; }})然后使用授权接口获取accessToken,这里华为提供的api和快应用官网提供的字段有些不同并且,华为文档中使用一个api就能够获得到用户的相关信息,但是快应用官网上的文档则需使用两个api来获取用户的基本信息/* 华为账号授权 */account.authorize({ appid: '', /* 华为文档提供的字段及华为快应用才有的appid */ state: '1', /* state可以指定任意值,认证服务器会原封不动地返回这个值 */ type: 'token', /* 设置type为获取token */ scope: 'scope.baseProfile', /* 设置为scope.baseProfile则获取用户的基本信息 */ success: auth => { /* 华为文档中使用authorize就能够获取用户的基本信息,包括昵称头像及openid和unionid,但是快应用官方文档则写的是要使用下面这个接口来返回用户的信息 */ account.getProfile({ appid: '', token: auth.accessToken, success: data => { let userInfo = {}; /* 因为文档中有写用户的相关信息都可能为空,如果你要用户头像,要判断下,不知华为测试放是否是使用测试账号,没有头像啥的,如果你直接赋值为data.avatar.default,则会报错,但是你用自己账号测试不会出现头像报错的现象 */ if(data.nickname) { userInfo.nickname = data.nickname; } else { userInfo.nickname = '小九'; } if(data.avatar.default) { userInfo.avatar = data.avatar.default; } else { userInfo.avatar = 'defaultimg.png'; } }, fail: () => { prompt.showToast({ message: '授权失败' }) } }) }, fail: () => { prompt.showToast({ message: '授权失败' }) }})因快应用官方文档和华为文档都写了用户的信息均可能为空,所以,走授权这条路不是很现实2.微信账号授权微信账号授权也有很多坑,微信账号的那个签名要在开发工具中的hap中点击生成MD5,然后你在测试的时候,上面的忘了讲了,你生成证书时会生成一个sign文件夹,即使你的项目还没有完全完成,你也要先生成正式的证书,然后将release里的两个证书文件复制到debug里面,最好是先删除debug文件夹中的文件然后直接粘贴到debug中,如果你的sign中只有release文件夹,可以自己新建一个debug文件夹微信授权你要先判断一下用户的手机中是否有微信或者用户的微信版本是否满足快应用授权/* 返回NONE 表示当前微信登录不可用,微信未安装或者手机系统不支持 */if(wxaccount.getType() == 'NONE') { prompt.showToast({ message: '手机系统不支持快应用,请升级后重试' }) this.showLogin = false;} 然后再进行授权wxaccount.authorize({ scope: 'snsapi_userinfo', /* snsapi_userinfo为授权用户基本信息 */ state: 'randomString', /* 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止 csrf 攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加 session 进行校验 */ success: data => { console.log(data) /* 获取code */ console.log(data.code) }, fail: () => { prompt.showToast({ message: '授权失败' }) },})3.魅族授权魅族的授权是使用网页端,这里又学了一招新的东西,就是网页与快应用进行通信/* 前端代码 */<template> <web id="web" trustedurl="{{trustedurl}}" @message="handleMessage" src="https://open-api.flyme.cn/oauth/authorize?response_type=token&scope=uc_basic_info"></web></template><script> import router from '@system.router'; import prompt from '@system.prompt'; export default { data() { return { /* 网页往快应用中发消息必须加上这个字段,就是你要进行通信的链接,最好进行转义 */ trustedurl: [/^https:\/\/baidu.com/] } }, /* 接收网页端返回的消息 */ handleMessage(msg) { /* 网页端往快应用发送消息无法直接发送对象,但是可以发送json字符串 */ /* 这个msg是我这边后端进行了一些数据的格式化 */ let message = JSON.parse(msg.message); console.log(message) } }</script>后端链接返回处理system.postMessage('hello')/* 文档是这样写的,但是呢,在html中直接这样写是不行的,应该是下面这样写 */window.system.postMessage('hello')4.使用手机号加验证码登录

October 17, 2019 · 1 min · jiezi

微信小程序授权登录取消授权重新授权处理方法-附可用代码

微信小程序授权登录基本是小程序的标配了,但是官方的demo,取消授权后,就不能再重新点击登录,除非重新加载小程序才可以,这下怎么办? 我们可以先在首页引导用户点击,然后跳转到一个新的页面,在新的页面进行授权,然后新的页面授权成功,立马跳回首页,显示用户信息。 话不多说,直接上代码代码结构: index是首页login是授权页 首页代码index.wxml <!-- 未授权,只显示一个授权按钮 --><view wx:if="{{result==false}}"> <button bindtap="getinfo" class="loginbtn"> 授权登录 </button></view><!-- 授权后只显示头像和昵称 --><view elif="{{result==true}}" class="info"> <image src="{{head}}" class="headimg"></image> <text class="nickname">{{name}}</text></view>index.wxss /**index.wxss**/.loginbtn{ width: 150px; height: 45px; background: #06C05F; margin:100px auto 0; line-height: 45px; font-size: 15px; color: #fff;}.info{ width: 80px; height: 100px; margin:50px auto 0;}.info .headimg{ width: 80px; height: 80px; border-radius: 100%;}.info .nickname{ text-align: center;}index.js //index.jsPage({ data: { userInfo: {}, hasUserInfo: false }, //事件处理函数 getinfo: function () { wx.navigateTo({ url: '../login/index' }) }, onLoad: function (e) { let that = this; // 获取用户信息 wx.getSetting({ success(res) { // console.log("res", res) if (res.authSetting['scope.userInfo']) { console.log("已授权") // 已经授权,可以直接调用 getUserInfo 获取头像昵称 wx.getUserInfo({ success(res) { console.log("获取用户信息成功", res) that.setData({ name: res.userInfo.nickName, head: res.userInfo.avatarUrl, result: true }) }, fail(res) { console.log("获取用户信息失败", res) that.setData({ result: "取消授权" }) } }) } else { console.log("未授权") that.setData({ result: false }) } } }) }})授权页代码index.wxml ...

October 17, 2019 · 1 min · jiezi

Laravel-Authorization支持-ACLRBACABAC-等模型的授权库

Laravel Authorization 基于 Casbin ,是一个支持访问多种访问控制模型(如ACL,RBAC,ABAC等)的授权库。在这之前,你需要先了解 Casbin 。 安装使用 Composer 安装: composer require casbin/laravel-authzLauthz\LauthzServiceProvider 是 auto-discovered 的,并且默认情况下已注册,但是如果您想自己注册,可以在 config/app.php 中添加 ServiceProvider: 'providers' => [ /* * Package Service Providers... */ Lauthz\LauthzServiceProvider::class,]Enforcer facade 也是 auto-discovered,但是如果您想手动添加它,在 config/app.php添加: 'aliases' => [ // ... 'Enforcer' => Lauthz\Facades\Enforcer::class,]要发布配置,请运行 vendor:publish 命令: php artisan vendor:publish这就自动创建 Model 配置文件 config/lauthz-rbac-model.conf 和 一个新的 Lauthz 配置文件 config/lauthz.php。 要迁移迁移,请运行migrate命令: php artisan migrate这将创建一个 rules 数据表。 用法快速开始安装后,您可以执行以下操作: use Enforcer;// adds permissions to a userEnforcer::addPermissionForUser('eve', 'articles', 'read');// adds a role for a user.Enforcer::addRoleForUser('eve', 'writer');// adds permissions to a ruleEnforcer::addPolicy('writer', 'articles','edit');您可以校验用户的权限,如下: ...

October 14, 2019 · 2 min · jiezi

小程序位置授权处理

这两天在做小程序调取地图的时候遇到一个问题,如果用户第一次拒绝了位置权限请求。那么就不会再次唤起授权弹出。需要我们引导用户去开启。 具体做法如下。在 aap.json中加入授权配置 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }在 page页面中使用,需要有几个注意的地方,初次使用的时候,去申请权限。这里我是放在onShow 方法里面。 onShow: function () { //初始获取定位权限 wx.authorize({ scope: 'scope.userLocation', success: (res) => { }, }) },然后在调用地图地位。或者获取用户权限的函数去判断是否有定位权限,如果没有那么引导用户开启权限。如下:我有一个Input去触发选择地图事件。 <input bindfocus="openMap" value='{{address}}' placeholder="点击选择详细地址"></input>事件处理 openMap:function(e){ var that = this wx.getSetting({ success(res){ //这里判断是否有地位权限 if (!res.authSetting['scope.userLocation']) { wx.showModal({ title: '提示', content: '请求获取位置权限', success:function(res){ if(res.confirm==false){ return false; } wx.openSetting({ success(res) { //如果再次拒绝则返回页面并提示 if (!res.authSetting['scope.userLocation']) { wx.showToast({ title: '此功能需获取位置信息,请重新设置', duration: 3000, icon: 'none' }) } else { //允许授权,调用地图 that.chooseMap() } } }) } }) } else { //如果有定位权限,调用地图 that.chooseMap() } } }) }, chooseMap(){ var that = this wx.chooseLocation({ success: function (res) { that.setData({ address: res.address, latitude: res.latitude, longitude: res.longitude }) }, fail: function (res) { console.log(res) } }) },原文地址 ...

June 11, 2019 · 1 min · jiezi

企业微信登陆

引言用户登陆时,原设计是使用工号加密码进行登陆,只是工号不好记,为了推广,设计了企业微信登陆。 企业微信中可以设置自建应用,其实就是内嵌了一个Chrome,点击左侧的自建应用,会在右侧浏览器显示相关应用,所有工作都放在企业微信中,需实现当前企业微信账号自动登陆系统。 开发的过程很坎坷。让微信折腾的一点脾气都没有。 当时不会调试,因为企业微信中的自建应用要求设置成线上地址,写好了,打包,传给服务器,然后再测试。 五点,觉得还有十分钟就写完了,写完了就去吃饭。 六点、八点,改到九点半,都要改哭了,还是不好使,最后放弃了。 后来邢彦年师兄帮我梳理流程,潘老师教我调试方法,才完成这个功能。 感谢邢彦年师兄和潘老师。 实现文档找文档一定要找对地方,两个API,一个服务端,一个客户端。 最开始我以为是使用客户端的API呢?点进去学了学,企业微信小程序可用的API接口,这个用不了,此应用不是小程序。然后JS-SDK不支持登陆授权。 相关文档在服务端API中的身份认证一节中。 OAuth 2.0当我们用微信登陆某个网站时,会出现类似这样的授权页面。 点击确认登陆,该应用就能获取到用户相关的信息。 用户通过用户名和密码的方式进行微信的使用,第三方应用想获取微信用户信息,不是通过用户名密码,而是微信提供的令牌,这就是OAuth 2.0,既可以让应用获取不敏感的信息,又可以保证账户的安全性。 更多内容可学习阮一峰的博客,写得非常好:OAuth 2.0 的一个简单解释 - 阮一峰的网络日志 登陆流程用户点开应用,实际上是访问当前系统微信授权的入口 微信网页授权地址:https://open.weixin.qq.com/connect/oauth2/authorize 参数说明appid企业的CorpIDredirect_uri授权后的回调地址,需使用urlencode处理response_type回调数据返回类型scope应用授权作用域。企业自建应用固定填写:snsapi_basestate回调时额外的参数,非必选#wechat_redirect终端使用此参数判断是否需要带上身份信息看这个表格也是在无聊,下面是我配置好的微信授权链接,大家只需将相应参数改写即可。注:回调的url一定要使用encodeURIComponent处理! https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxxx&redirect_uri=https%3A%2F%2Falice.dgitc.net%2Fsetup%2Fwechat&response_type=code&scope=snsapi_base#wechat_redirect用户静默授权成功,跳转到回调地址用户授权成功后,会带着code参数重定向到回调地址。 类似这样: https://alice.dgitc.net/setup/wechat?code=xxxxxx前台的组件就通过路由获取到了code,然后通过code去进一步获取用户信息。 const code = this.route.snapshot.queryParamMap.get('code');this.userService.enterpriseWeChatLogin(code).subscribe(...);后台通过code找微信后台获取用户信息这个是分成两次获取,先获取access_token,再通过access_token和code获取用户信息。 GET请求 https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRET这个是获取access_token的地址,获取access_token的过程是重点! 上面传的参数名是corpid和corpsecret,企业id和密钥。 这是企业微信的设计,企业id是一个,标识这个企业,每一个功能模块都有相应的secret。 然后企业id和secret配对,获取到只能访问这个功能模块的一个access_token。 就拿当前Alice系统来举例,自建应用Alice存在secret,通过此secret和corpid获取到access_token,即相当于拿到了受保护API的访问权限。 因为这个access_token是通过Alice应用的secret获取到的,所以再用它访问其他的功能,是不合法的。 access_token有访问频率限制,所以设计了一套缓存方案。 @Overridepublic String getAccessTokenBySecret(String secret) { logger.debug("从缓存中获取令牌"); String access_token = this.cacheService.get(secret); logger.debug("如果获取到了,直接返回"); if (null != access_token) { return access_token; } logger.debug("否则,发起HTTP请求"); logger.debug("获取企业验证信息"); String url = enterpriseInformation.getAccessTokenUrl(); String corpId = enterpriseInformation.getCorpid(); logger.debug("获取认证令牌"); ResponseEntity<EnterpriseAuth> responseEntity = restTemplate.getForEntity(url + "?corpid=" + corpId + "&corpsecret=" + secret, EnterpriseAuth.class); logger.debug("如果请求成功"); if (responseEntity.getStatusCode().is2xxSuccessful()) { logger.debug("获取响应体"); EnterpriseAuth enterpriseAuth = responseEntity.getBody(); Assert.notNull(enterpriseAuth, "微信令牌为空"); logger.debug("如果微信请求成功"); if (enterpriseAuth.successed()) { logger.debug("存储缓存,返回令牌"); access_token = enterpriseAuth.getAccessToken(); this.cacheService.put(secret, access_token, enterpriseAuth.getExpiresIn(), TimeUnit.SECONDS); return access_token; } } logger.debug("请求失败,返回空令牌"); return "";}缓存是通过把Redis工具类包装了一下实现的,很简单。 ...

May 29, 2019 · 2 min · jiezi