天天看點
傳回

#夏日挑戰賽#【FFH】JS實作華為賬号授權服務，一鍵登入！

[本文正在參加星光計劃3.0-夏日挑戰賽]

本文将介紹如何在HarmonyOS上內建HMS華為賬号登入服務。

0.效果

#夏日挑戰賽#【FFH】JS實作華為賬号授權服務，一鍵登入！

1.內建HMS服務

1.1 建立項目工程

建立項目所設定的包名就是後面在AGC建立項目所用到的包名

1.2 添加依賴

1.2.1 項目級build.gradle 

dependencies {
        /*工程自帶*/
        classpath 'com.huawei.ohos:hap:3.0.5.11'
        classpath 'com.huawei.ohos:decctest:1.2.7.9'
        classpath 'com.huawei.ohos:hap:2.4.4.2'
        
        /*要添加的項目： 添加agconnect服務依賴*/ 
        classpath 'com.huawei.agconnect:agcp-harmony:1.0.0.300'
    }

1.2.2 應用級build.gradle

添加

apply plugin: 'com.huawei.agconnect'
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
    testImplementation 'junit:junit:4.13.1'
    ohosTestImplementation 'com.huawei.ohos.testkit:runner:2.0.0.200'
    
    /*要添加的項目内容*/
    implementation 'com.huawei.hms:jsb-ohos-adapter:5.3.0.303'
    implementation 'com.huawei.agconnect:agconnect-core-harmony:1.0.0.300'
}

1.3 下載下傳HMS CORE SDK

利用指令行視窗進入到項目工程的entry目錄下

輸入以下指令進行安裝

npm install @hw-hmscore/hms-js-base
npm install @hmscore/hms-jsb-account

1.4 在AGC控制台建立項目

AGC控制台

  • 建立項目，注意包名一緻，并且建立應用，進入項目界面，找到應用資訊欄。

  • SHA256證書指紋

    這裡我們采用的是自動簽名方式，打開工程項目進行自動簽名。

    點選第一行最右側的指紋按鍵可以獲得SHA246證書指紋

    #夏日挑戰賽#【FFH】JS實作華為賬号授權服務，一鍵登入！

  • 補充證書指紋

    進入到剛剛建立好的項目界面，找到應用資訊的位置，補充證書指紋。

    #夏日挑戰賽#【FFH】JS實作華為賬号授權服務，一鍵登入！
    同時記錄這裡的Client ID（綠色框）

1.5 配置config.json

1.5.1 module節點

在module節點下增加以下内容，這裡的ClientID就是不久前記錄下的應用的ClientID。

"metaData": {
      "customizeData": [
        {
          "name": "com.huawei.hms.client.appid",
           //value的值就是前文獲得到的ClientID
          "value": "106712139"
        }
      ]
    },

1.5.2 補充deviceConfig 

"deviceConfig": {
    "default": {
      "allowComponentsProxy": true
    }
  },

1.5.3 添權重限

這裡的權限不是內建HMS服務必備的，友善後續的案例實作。

"reqPermissions": [
      {
        "name": "ohos.permission.GET_WIFI_INFO"
      },
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.INTERNET"
      },{
        "name": "ohos.permission.SET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.LOCATION"
      },
      {
        "name": "ohos.permission.LOCATION_IN_BACKGROUND"
      },
      {
        "name": "ohos.permission.READ_MEDIA"
      }
    ]

1.6 初始化

  • 在MainApplication中添加如下代碼 
package com.yzj.account;

import com.huawei.hms.jsb.adapter.har.bridge.HmsBridge;
import ohos.aafwk.ability.AbilityPackage;

public class MyApplication extends AbilityPackage {
    private HmsBridge mHmsBridge;
    @Override
    public void onInitialize() {
        mHmsBridge = HmsBridge.getInstance();
        mHmsBridge.initBridge(this);
        super.onInitialize();
    }
    @Override
    public void onEnd() {
        // 結束JSB
        mHmsBridge.destoryBridge();
        super.onEnd();
    }
}
重新編譯工程項目，至此，HMS賬号認證服務以及內建完畢。

2. 編寫案例

2.1 界面

華為賬号服務提供了幾個重要的功能，賬号授權，退出賬号，取消授權。

這裡簡單設定一個頭像框，昵稱，以及三個按鍵。

#夏日挑戰賽#【FFH】JS實作華為賬号授權服務，一鍵登入！

2.2 CSS and HML 

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #fff2f2f2;
}

.title {
    font-size: 40px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}
@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}
@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}
@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}
.account{
    background-image: url('common/btn_hw+text_singin_light_normal.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

           
<div class="container">
    <image id="header" shareid="img"  style="width: 100px;height: 100px;border-radius: 50px ;background-color: aqua;">

    </image>
    <text style="font-size: 32px;">
        {{name}}

    </text>
    <text style="font-size: 32px;">
       姓氏: {{fname}}

    </text>
    <text style="font-size: 32px;">
        名字:{{rname}}

    </text>
    <text style="font-size: 32px;">
        郵箱: {{mail}}

    </text>
    <button class="account" style="width: 60%;height: 7%;margin-top: 20px;" onclick="signin">

        
    </button>
    <button onclick="logout"type="capsule" style="width: 60%;height: 5%;margin-top: 20px">
        登出

    </button>
    <button onclick="cancelauthorization"type="capsule" style="width: 60%;height: 5%;margin-top: 20px">
        取消授權

    </button>

</div>

2.3 JS側

2.3.1 賬号授權登入

result中有以下方法，注意到這裡能夠傳回頭像的下載下傳連結，我們将其下載下傳下來。

getDisplayName() 擷取使用者昵稱。
getEmail() 擷取使用者的郵箱位址。
getGivenName() 擷取使用者的名字。
getFamilyName() 擷取使用者的姓氏。
getAvatarUri() 擷取使用者頭像的URI位址 
signin(){
       var signInOption = new HuaweiIdAuthParamsHelper().setId().setProfile().setAuthorizationCode().build();
        HuaweiIdAuthManager.getAuthApi().getSignInIntent(signInOption).then((result)=>{
            // 登入成功，擷取使用者的華為帳号資訊
            console.info(this.TAG+"登入成功");
            console.info(this.TAG+JSON.stringify(result));
            console.info(this.TAG+"賬号名稱: " + result.getDisplayName());
            console.info(this.TAG+"頭像: " + result.getAvatarUri());
            console.info(this.TAG+"姓"+result.getFamilyName());
            console.info(this.TAG+"名字"+result.getGivenName());
            console.info(this.TAG+"郵箱:"+result.getEmail());

            this.name=result.getDisplayName();
            this.fname=result.getFamilyName();
            this.rname=result.getGivenName()
            this.mail=JSON.stringify(result.getEmail());
            this.download(result.getAvatarUri());
            }).catch((error)=>{
            // 登入失敗
            console.error(this.TAG+"登入失敗");
            console.error(this.TAG+JSON.stringify(error));
           });
    },

2.3.2 下載下傳頭像

路徑下載下傳到應用沙盒中，由于檔案管理API暫未完全開放，還不能夠直接将下載下傳的頭像設定進來，暫且用來判斷是否擷取成功。

download(add){
        let downloadTask;
        request.download({ url: add ,filepath:"/data/data/com.yzj.account/files/head.jpg"}).then((data) => {
            downloadTask = data;
            console.info(this.TAG+"正在下載下傳"+JSON.stringify(data))
        }).catch((err) => {
            console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
        })
    },

2.3.3 登出 

logout(){
        HuaweiIdAuthManager.getAuthApi().signOut().then((result)=>{
            //帳号退出成功
            console.info(this.TAG+"退出成功");
            console.info(this.TAG+JSON.stringify(result));
        }).catch((error) => {
            //帳号退出失敗
            console.error(this.TAG+"退出失敗");
            console.error(this.TAG+JSON.stringify(error));
        });

    },

2.3.4 取消授權 

cancelauthorization()
    {
        HuaweiIdAuthManager.getAuthApi().cancelAuthorization().then((result)=>{
            // 帳号取消授權成功
            console.info(this.TAG+"取消授權成功");
            console.info(this.TAG+JSON.stringify(result));
        }).catch((error) => {
            // 帳号取消授權失敗
            console.error(this.TAG+"取消授權失敗");
            console.error(this.TAG+JSON.stringify(error));
        });
    },

3.測試

3.1 賬号授權

#夏日挑戰賽#【FFH】JS實作華為賬号授權服務，一鍵登入！
#夏日挑戰賽#【FFH】JS實作華為賬号授權服務，一鍵登入！
可以看到，賬号名稱，姓名，頭像等資訊均已擷取到。

3.2 登出

退出成功

#夏日挑戰賽#【FFH】JS實作華為賬号授權服務，一鍵登入！

3.3 取消授權

#夏日挑戰賽#【FFH】JS實作華為賬号授權服務，一鍵登入！

4. 結語

賬号授權，便于在實際開發中提供便捷的登入方式。礙于目前API功能未完全開放，否則可以直接生成賬号界面。期待HarmonyOS3.0的到來。

附件連結：https://ost.51cto.com/resource/2187

json javascript 建立項目
上一篇: 人因夢想而偉大 因行動而成功
下一篇: #夏日挑戰賽#【FFH】DevEcoDeviceTool實戰源碼擷取到HelloWorld【FFH】DevEco Device Tool 實戰從源碼擷取到Hello World（輕量系統）

繼續閱讀