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

集成步骤

1. 开通服务

a) 在AGC创建JS应用

 

 

 

b)  开通认证服务

 

 

 

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

 

 

 

2. 集成SDK

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

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

3. 接入功能

a) 匿名帐号

 

 

 

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

123456789101112

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

 

 

 

匿名登录成功后展示UID：

 

 

 

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

 

 

 

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

12345678910111213141516171819202122232425262728293031

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)  手机号码与邮箱认证（验证码方式）：

 

 

 

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

12345678910111213141516171819202122232425262728

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;   } },

获取验证码后进行登录：

12345678910111213141516171819202122232425262728293031323334

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