目前，华为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/AppGalleryConnect/agc-web-demos/tree/master/agc-authservice-demo-javascript

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

原作者：Mayism