快應用之授權登錄

快應用的授權要區分多種情況，華爲、魅族不支持微信賬戶授權，所以，華爲要走華爲的賬號，魅族走魅族的賬號，及打開網頁和網頁與快應用進行通信，最理想的登錄就是手機驗證碼登錄了

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