乐趣区

快应用之授权登录

jiezi

快应用的授权要区分多种情况，华为、魅族不支持微信账户授权，所以，华为要走华为的账号，魅族走魅族的账号，及打开网页和网页与快应用进行通信，最理想的登录就是手机验证码登录了

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. 使用手机号加验证码登录

退出移动版