近期華為 AppGallary Connect 的認證服務 SDK 新增了支援微信小程式的功能。今天就來教大家如何在微信小程式中整合認證服務的手機號碼認證方式

1、安裝微信小程式環境

首先進入微信小程式官網根據自己需要下載微信開發者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2、在AGC頁面開通認證服務

具體建立與配置驟可以參考認證服務官方文件：https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-auth-android-getstarted-0000001053053922

3、建立微信小程式工程

點選“+”號新增新的工程

輸入專案資訊即可，這裡我們不需要用到微信的雲服務，所以選擇不使用雲服務

4、整合認證服務SDK

輸入指令將認證服務sdk下載到專案中

當介面出現 run 'npm fund' for details，輸入以下命令

npm install @agconnect/auth

5、新增配置檔案

在應用啟動的時候新增agconnect.instance().configInstance()，將配置檔案的json程式碼塊加入到入參中。

下面就進入功能接入步驟了：

5.1 獲取驗證碼

function getPhoneVerifyCode(account: string, sendInterval = 30) {
  return agconnect.auth.PhoneAuthProvider.requestVerifyCode('86', account, agconnect.auth.Action.ACTION_REGISTER_LOGIN, 'zh_CN', sendInterval,)
    .then((res: any) => {
      console.log('getPhoneVerifyCode res:', res);
      return Promise.resolve(res);
    }).catch((err: any) => {
      console.log('getPhoneVerifyCode err:', err);
      return Promise.reject(err);
    });
}
 

5.2 註冊新使用者

function createPhoneUser(account: string, password: string, verifyCode: string) {
  return agconnect.auth().createPhoneUser(new agconnect.auth.PhoneUser('86', account, password, verifyCode))
    .then((res: any) => {
      console.log('createPhoneUser res:', res);
      return Promise.resolve(res);
    }).catch((err: any) => {
      console.log('createPhoneUser err:', err);
      return Promise.reject(err);
    });
}
 

5.3 登入

function loginWithPhone(account: string, password: string, verifyCode?: string) {
  let credential;
  if (verifyCode) {
    credential = agconnect.auth.PhoneAuthProvider.credentialWithVerifyCode('86', account, password, verifyCode);
  } else {
    credential = agconnect.auth.PhoneAuthProvider.credentialWithPassword('86', account, password);
  }
  if (!credential) {
    return Promise.reject('credential is undefined');
  }
  return agconnect
    .auth()
    .signIn(credential)
    .then((res: any) => {
        console.log('login res:', res);
        return Promise.resolve(res);
    }).catch((err: any) => {
        console.log('login err:', err);
        return Promise.reject(err);
    });
}

以上我們就成功接入了微信小程式版本認證服務中的手機賬號認證。如果覺得簡單那就趕快行動起來試試吧。