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

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

集成步骤

1. 开通服务

a) 在AGC创建JS应用

b) 开通认证服务

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

2. 集成SDK

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

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

3. 接入功能

a) 匿名帐号

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

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

匿名登录成功后展示UID：

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

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

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

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

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

获取验证码后进行登录：

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/AppGallery...

原文链接：https://developer.huawei.com/...
原作者：Mayism