目前，华为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

Web | 快速集成华为AGC认证服务相关推荐

  1. 快速集成华为AGC云存储服务-Web

    华为AppGallery Connect提供了一个云存储(CloudStorage)的服务,号称提供了一个便捷的云端存储服务,应用开发者使用的时候,可以不用关注服务器的部署,直接使用就行. 这个服务近 ...

  2. Unity平台 | 快速集成华为AGC云数据库服务

    1.环境与应用信息 版本名称 集成环境 测试设备 agconnect-database:1.2.3.301 Unity 2019.4.17f1c1 荣耀magic2 OPPO Reno2 AGC地址: ...

  3. Unity | 快速集成华为AGC云存储服务

    华为AppGallery Connect提供了一个云存储(CloudStorage)的服务,号称提供了一个便捷的云端存储服务,应用开发者使用的时候,可以不用关注服务器的部署,直接使用就行. 目前这个功 ...

  4. 在快应用中集成华为AGC云存储服务

    目前华为AGC云存储服务已经支持在快应用中集成了,你可以使用云存储服务存储图片.视频.音频等,集成的Demo可以参考Github. 1.安装Node.js环境: 1.下载Node.js安装包:http ...

  5. 美颜神器——快速集成华为HMS ML Kit人脸检测实现大眼瘦脸

    前言 生活中遇到难忘美好的瞬间,小编总是忍不住用拍照的方式来留住它,相信大家也和我一样.但我们大多数人都不是专业的摄影师或者模特,光线没选好.角度不对等等原因,导致对照片的自己不满意,该怎么办呢?这时 ...

  6. 如何快速集成Android版AGConnect认证服务-VK篇

    简介 大部分的应用都需要对用户的业务访问进行身份认证,以便为用户提供个性化体验.但是端到端完整构建一套用户认证系统会面临很多挑战.认证服务可以为应用快速构建安全可靠的用户认证系统,开发者只需在应用中访 ...

  7. 【2021环信IM快速集成指南】PC Web、Uni-App、小程序集成都在这里了

    本文将直白且详细的描述一下如何集成环信web端的IM SDK,(小程序.Uni-app通用).这是一篇快速集成攻略,其中更多的是对于官网文档的一篇注释说明,相信很多的小伙伴在准备将环信的IM即时通讯能 ...

  8. 友盟集成小米华为（快速集成和厂商通道集成）

    友盟集成小米华为(快速集成和厂商通道集成) 内含很多本人遇到的坑 (上) 快速集成 如果您已经弄好了快速集成,想看厂商通道集成,请直接看下篇 快速集成 首先,毋庸置疑,实在友盟官方平台注册账号 链接: ...

  9. Spring快速集成Web环境

    Spring快速集成Web环境 这篇内容比较简单,话不多说,直接上代码 学习内容 1.新建一个Maven Module,并为其添加Web结构,在pom.XML中导入servlet坐标 pom.XML中 ...

最新文章

  1. Boost C++ 库
  2. 更新 Ubuntu 系统，避免报错「校验和不符」
  3. mysql运用与实践_MySQL开发与实践 PDF 下载
  4. java质数判断程序_java判断一个数是否为素数/质数
  5. 代码中大量的if/else，你有什么优化方案?
  6. 【初/中级前端面经】中小型公司面试时都会问些什么?
  7. HC74h595 串行输出再进行串口输出（串行通信嵌套）已测试成功。
  8. 产品经理负责制的诱惑与窘迫
  9. Android apk安全监测及加固方案
  10. KP700 comfort 精致面板与西门子1200CPU进行时钟同步
  11. 如何自定义排序 aAbBcC 即Excel中的排序，AaBbCc
  12. rasa算法_【RASA系列】语义理解（上）
  13. php feff,php编程中要留意的那些坑~
  14. 浙北山村“洋家乐”：中西结合乡村旅游成脱贫新产业
  15. 双斜齿轮-市场现状及未来发展趋势
  16. 如何将谷歌分析代码放入react项目中？
  17. 提取微课商城的课程种类和课程名称
  18. RabbitMq 测试报错channel error(reply-code=405
  19. 医疗器械实验室设计基本要求SICOLAB
  20. 视频片头片尾处理器免费体验

热门文章

  1. 2017第121届中国进出口商品交易会(广交会)-第二期会刊（参展商名录）
  2. R语言p值校正函数p.adjust
  3. 计算机毕业设计SSM高考志愿智能填报系统【附源码数据库】
  4. excel基础知识概括
  5. kettle Spoon.bat闪退解决办法
  6. 安装计算机一级出现appcrash,appcrash错误如何解决
  7. 记住我remember-me功能的几种实现方式
  8. C++:algorithm常用函数
  9. LoveChat独立部署即时通讯IM 私人部署 完善的售后体系
  10. 简易特性测试仪实验方案策划