快应用之受权登陆

快应用的受权要区分多种状况，华为、魅族不支持微信帐户受权，因此，华为要走华为的帐号，魅族走魅族的帐号，及打开网页和网页与快应用进行通讯，最理想的登陆就是手机验证码登陆了

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