快应用之授权登录 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

快应用之授权登录

发表时间:2021-4-30

发布人:葵宇科技

浏览次数:121

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

相关案例查看更多