快應用之受權登陸

快應用的受權要區分多種狀況，華爲、魅族不支持微信帳戶受權，因此，華爲要走華爲的帳號，魅族走魅族的帳號，及打開網頁和網頁與快應用進行通訊，最理想的登陸就是手機驗證碼登陸了

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.使用手機號加驗證碼登陸