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