目前，華為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