At present, Huawei AGC certification service supports the Web platform. I have performed the following integration according to the official document. If you need it, you can refer to it or download a Demo for research.

The integration steps

1. Open the service

A) Create JS applications in AGC

B) Open certification service

C) Open an anonymous account, phone and email authentication

2. Integrate the SDK

A) Place the configuration code in the login.vue file

B) Enter the project path in IDE Terminal, run the command to install AGC JS SDK into the project, and import the authentication component

3. Access function

A) Anonymous accounts

Click the anonymous login button and the binding logic code is as follows:

loginAnonymously() { console.log("JS-SDK login anonymously!" ); Agconnect.auth ().signinanonymously ().then(user => {// successful login alert(" successful anonymous login "); this.getUserInfo(); }). Catch (error => {// login failed alert(error)}); },Copy the code

UID displayed after successful anonymous login:

B) Mobile phone number and email authentication (password mode) :

Enter your mobile phone number/email address and password to log in:

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(" login successful "); this.getUserInfo(); }).catch(err => { alert(err); }); },Copy the code

C) Mobile phone number and email authentication (verification code) :

Enter mobile phone number/email and click to obtain verification code:

getVerifyCode() { console.log("request for email verifycode..." ) this.dataForm_sdk.verifyCode = ''; switch (this.provider) { case 'phone': / / get captcha agconnect. Auth. PhoneAuthProvider. RequestVerifyCode (' 86 ', this.dataForm_sdk.account,agconnect.auth.Action.ACTION_REGISTER_LOGIN, 'zh_CN', 90). Then (ret => {// verification code request success alert(" verification code request success "); }). Catch (error => {// failed to apply for verification code alert(" failed to obtain verification code "); }); break; case 'email': agconnect.auth.EmailAuthProvider.requestVerifyCode(this.dataForm_sdk.account, Agconnect. Auth. Action. ACTION_REGISTER_LOGIN, 'zh_CN', 120). Then (ret = > {/ / verification code application is successful alert (" success "); }). Catch (error => {// verification code application failed alert(error)}); break; default: break; }},Copy the code

Login after obtaining the verification code:

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(" login successful "); this.getUserInfo(); }).catch(err => { alert(err); }); },Copy the code

Conclusion:

Huawei AGC authentication service supports comprehensive authentication modes. The entire authentication process is not complicated and is friendly to developers.

For more details, see:

Huawei AGC Authentication Service -Demo: github.com/AppGalleryC…

The original link: developer.huawei.com/consumer/cn…

Original author: Mayism