Web | 快速集成华为AGC认证服务

目前，华为AGC认证服务已经支持Web平台了，我这边按照官方文档进行了如下集成，有需要的小伙伴可以参考，也可以自行下载Demo研究。

集成步骤

1. 开通服务

a) 在AGC创建JS应用

 

 

 

b)  开通认证服务

 

 

 

c)  开通匿名账号，电话以及邮箱认证

 

 

 

2. 集成SDK

a) 将配置代码放入login.vue文件中

b) 在IDE的terminal中进入项目路径，执行命令安装AGC JS SDK到项目中，导入认证组件

3. 接入功能

a) 匿名帐号

 

 

 

点击匿名登录按钮，绑定逻辑代码如下：

1 2 3 4 5 6 7 8 9 10 11 12

loginAnonymously() {    console.log("JS-SDK login anonymously!");    agconnect.auth().signInAnonymously().then(user => {    //登录成功    alert("匿名登录成功");    this.getUserInfo();    }).catch(error => {    //登录失败    alert(error)    });     },

 

 

 

匿名登录成功后展示UID：

 

 

 

b)         手机号码与邮箱认证（密码方式）：

 

 

 

输入手机号/邮箱和密码进行登录：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

loginByPwd() {    console.log("JS-SDK auth(): login...")       let credential = null;       if (this.dataForm_sdk.password == '') {      alert("Please typein password!");      return;    }       switch (this.provider) {      case 'phone':      credential = agconnect.auth.PhoneAuthProvider.credentialWithPassword('86', this.dataForm_sdk.account, this.dataForm_sdk.password);        break;      case 'email':      credential = agconnect.auth.EmailAuthProvider.credentialWithVerifyCode(this.dataForm_sdk.account, this.dataForm_sdk.password);        break;      default:        break;    }    if (credential == null) {      console.log("credential null!");      return;    }    agconnect.auth().signIn(credential).then(res => {    alert("登录成功");    this.getUserInfo();    }).catch(err => {    alert(err);    });  },

c)  手机号码与邮箱认证（验证码方式）：

 

 

 

输入手机号/邮箱后点击获取验证码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

getVerifyCode() {    console.log("request for email verifycode...")    this.dataForm_sdk.verifyCode = '';    switch (this.provider) {      case 'phone':      //获取验证码      agconnect.auth.PhoneAuthProvider.requestVerifyCode('86', this.dataForm_sdk.account,agconnect.auth.Action.ACTION_REGISTER_LOGIN, 'zh_CN', 90).then(ret => {      //验证码申请成功      alert("获取验证码成功");      }).catch(error => {      //验证码申请失败      alert("获取验证码失败");      });        break;      case 'email':      agconnect.auth.EmailAuthProvider.requestVerifyCode(this.dataForm_sdk.account, agconnect.auth.Action.ACTION_REGISTER_LOGIN, 'zh_CN', 120).then(ret => {               //验证码申请成功           alert("获取成功");          }).catch(error => {              //验证码申请失败              alert(error)          });           break;      default:        break;    }  },

获取验证码后进行登录：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

loginByVerifyCode() {    if (this.dataForm_sdk.verifyCode == '') {      alert("Please typein verifycode!");      return;    }       let credential = null;       switch (this.provider) {      case 'phone':      credential = agconnect.auth.PhoneAuthProvider.credentialWithVerifyCode('86', this.dataForm_sdk.account, this.dataForm_sdk.password, this.dataForm_sdk.verifyCode);        break;      case 'email':      credential = agconnect.auth.EmailAuthProvider.credentialWithVerifyCode(this.dataForm_sdk.account, this.dataForm_sdk.password, this.dataForm_sdk.verifyCode);        break;      case 'QQ':        break;      case 'weChat':        break;      default:        break;    }       if (credential == null) {      console.log("credential null!")      return;    }    agconnect.auth().signIn(credential).then(res => {    alert("登录成功");    this.getUserInfo();    }).catch(err => {    alert(err);    });  },

 

总结：

华为AGC认证服务支持的认证方式还是比较全的，整个认证过程也不复杂，对于开发者比较友好。

 

欲了解更多详情，请参见：

华为AGC认证服务-Demo：https://github.com/AppGalleryConnect/agc-web-demos/tree/master/agc-authservice-demo-javascript

 

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0202441157943300413?fid=0101271690375130218

原作者：Mayism