This demo application demonstrates the usage of AGC Auth Cordova plugin.
Before you get started, you must register as a HUAWEI Developer and complete identity verification on the HUAWEI Developer website. For details, please refer to Register a HUAWEI ID.
Creating an app in AppGallery Connect is required in order to communicate with the Huawei services. To create an app, perform the following steps:
- Sign in to AppGallery Connect and select My projects.
- Select your project from the project list or create a new one by clicking the Add Project button.
- Go to Project settings > General information, and click Add app. If an app exists in the project and you need to add a new one, expand the app selection area on the top of the page and click Add app.
- On the Add app page, enter the app information, and click OK.
-
Sign in to AppGallery Connect and select your project from My Projects. Then go to Project settings > General information. In the App information field,
- If platform is Android, click agconnect-services.json button to download the configuration file.
- If platform is iOS, click agconnect-services.plist button to download the configuration file.
-
Install Cordova CLI.
npm install -g cordova
-
Set preference in your Ionic project config.xml.
<!--<platform name="ios">--> <preference name="deployment-target" value="11.0" /> <preference name="SwiftVersion" value="5" />
-
Update the widget
idproperty which is specified in theconfig.xmlfile. It must be same with client > package_name value of theagconnect-services.jsonandagconnect-services.plistfiles. -
Add the Android or iOS platform to the project if haven't done before.
cordova platform add [email protected]
cordova platform add ios
-
Install
AGC Auth Cordova Pluginto the project.-
Run the following command in the root directory of your project to install it through npm.
cordova plugin add @cordova-plugin-agconnect/auth
-
-
Add
agconnect-services.plistfile to the app's root directory of your Xcode project. -
Check Signing & Capabilities tab page of your Xcode project.
-
Run the application.
cordova run ios --device
-
Copy
agconnect-services.jsonfile to<project_root>/platforms/android/appdirectory your Android project. -
Run the application.
cordova run android --device
For using login with twitter functionality of example app. You will need:
- A Twitter Developer Account If you need one, click Apply for Twitter Developer Account
- An API Key and API Secret Key for Your App. Twitter will provide these after an application created on twitter developer platform.
Step 1: Sign in to AppGallery Connect and click My projects.
Step 2: Find your app project and click the app.
Step 3: On left menu go to build > Auth Service
Step 4: Click enable on Twitter Authentication Mode.
Step 5: Enter Twitter API Key and API Secret Key, then click OK
- Obtain auth token and auth token secret from twitter authorization by official plugin or third party plugins.
- Call signIn function and pass provider type and credential object as parameter.
AGCAuthPlugin.signIn(AGCAuthPlugin.Provider.Twitter_Provider, {
token: "Obtain from Twitter authorization token",
secret: "Obtain from Twitter authorization secret",
autoCreateUser: true,
})
.then((result) => {
console.log("logInWithTwitterLogIn :: Success");
$("main").style.display = "none";
$("userProfileScreen").style.display = "block";
updateUserProfileLayout();
})
.catch((error) =>
alert("logInWithTwitterLogIn :: Error! " + JSON.stringify(error, null, 1))
);For using login with WeChat functionality of example app. You will need:
- A WeChat Developer Account If you need one, click here and create account.
- An App Id and App Secret for Your App. After an application created on WeChat platform, WeChat will provide an app id and app secret.
Step 1: Sign in to AppGallery Connect and click My projects.
Step 2: Find your app project and click the app.
Step 3: On left menu go to build > Auth Service
Step 4: Click enable on WeChat Authentication Mode.
Step 5: Enter WeChat App Id and App Secret, then click OK
- Obtain auth access token and open id from wechat authorization by official plugin or third party plugins.
- Call signIn function and provider type and pass credential object as parameter.
AGCAuthPlugin.signIn(AGCAuthPlugin.Provider.WeiXin_Provider, {
token: "Obtain from WeChat authorization token",
openId: "Obtain from WeChat authorization secret",
autoCreateUser: true,
})
.then((result) => {
console.log("logInWithWeChatLogIn :: Success");
$("main").style.display = "none";
$("userProfileScreen").style.display = "block";
updateUserProfileLayout();
})
.catch((error) =>
alert("logInWithWeChatLogIn :: Error! " + JSON.stringify(error, null, 1))
);For using login with QQ functionality of example app. You will need:
- A QQ for Developers Account If you need one, click Tencent Open Platform and create account.
- An App ID and App key for Your App. After an application created on QQ platform, QQ will provide an App Id and App Key.
Step 1: Sign in to AppGallery Connect and click My projects.
Step 2: Find your app project and click the app.
Step 3: On left menu go to build > Auth Service
Step 4: Click enable on QQ Authentication Mode.
Step 5: Enter QQ App ID and App Key, then click OK
- Obtain auth access token and open id from QQ authorization by official plugin or third party plugins.
- Call signIn function and provider type and pass credential object as parameter.
AGCAuthPlugin.signIn(AGCAuthPlugin.Provider.QQ_Provider, {
token: "Obtain from QQ authorization token",
openId: "Obtain from QQ authorization openId",
autoCreateUser: true,
})
.then((result) => {
console.log("logInWithQQLogIn :: Success");
$("main").style.display = "none";
$("userProfileScreen").style.display = "block";
updateUserProfileLayout();
})
.catch((error) =>
alert("logInWithQQLogIn :: Error! " + JSON.stringify(error, null, 1))
);For using login with Weibo functionality of example app. You will need:
- A Weibo for Developers Account If you need one, click Tencent Open Platform and create account.
- An App Key and App Secret for Your App. After an application created on Weibo platform, Weibo will provide an App Key and App Secret.
Step 1: Sign in to AppGallery Connect and click My projects.
Step 2: Find your app project and click the app.
Step 3: On left menu go to build > Auth Service
Step 4: Click enable on Weibo Authentication Mode.
Step 5: Enter Weibo App Key and App Secret, then click OK
- Obtain auth token and uid from Weibo authorization by official plugin or third party plugins.
- Call signIn function and provider type and pass credential object as parameter.
AGCAuthPlugin.signIn(AGCAuthPlugin.Provider.WeiBo_Provider, {
token: "Obtain from WeiBo authorization token",
uid: "Obtain from WeiBo authorization uid",
autoCreateUser: true,
}).then((result) => {
console.log("logInWithWeiBoLogIn :: Success");
$("main").style.display = "none";
$("userProfileScreen").style.display = "block";
updateUserProfileLayout();
}).catch((error) => alert("logInWithWeiBoLogIn :: Error! " + JSON.stringify(error, null, 1)));For using login with facebook functionality of example app. You will need:
- A Facebook for Developers Account If you need one, click Create a Facebook for Developers Accont
- An App ID for Your App. Get an App ID for your app
Step 1: Sign in to AppGallery Connect and click My projects.
Step 2: Find your app project and click the app.
Step 3: On left menu go to build > Auth Service
Step 4: Click enable on Facebook Authentication Mode.
Step 5: Enter Facebook App ID and App Secret, then click OK
- Obtain auth token from Facebook authorization by official plugin or third party plugins.
- Call signIn function and provider type and pass credential object as parameter.
AGCAuthPlugin.signIn(AGCAuthPlugin.Provider.Facebook_Provider, {
token: "Obtain from Facebook authorization token",
autoCreateUser: true,
})
.then((result) => {
console.log("logInWithFacebookLogIn :: Success");
$("main").style.display = "none";
$("userProfileScreen").style.display = "block";
updateUserProfileLayout();
})
.catch((error) =>
alert("logInWithFacebookLogIn :: Error! " + JSON.stringify(error, null, 1))
);Login With Apple Account only supports iOS platform.
For using login with Apple functionality of example app. You will need:
- An Apple for Developers Account If you need one, click Create a Apple for Developers Accont
Step 1: Sign in to AppGallery Connect and click My projects.
Step 2: Find your app project and click the app.
Step 3: On left menu go to build > Auth Service
Step 4: Click enable on Apple Account Authentication Mode.
- Obtain auth identity token and nonce Apple authorization by official plugin or third party plugins.
- Call signIn function and provider type and pass credential object as parameter.
/// Generates a cryptographically secure random nonce, to be included in a '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._'
/// for AppGallery Connect to perform sign-in authentication: a random character string 'rawNonce'
/// Generate 'nonce'
///add a random character string to the authentication request and encrypt it using the SHA-256 algorithm. A String value used to associate a client session and the identity token. nonce required when logging Apple authorization by official plugin or third party plugins.
AGCAuthPlugin.signIn(AGCAuthPlugin.Provider.Apple_Provider, {
identityToken: "Obtain from Apple authorization identityToken",
nonce: "sha256 nonce",
autoCreateUser: true,
}).then((result) => {
console.log("logInWithAppleLogIn :: Success");
$("main").style.display = "none";
$("userProfileScreen").style.display = "block";
updateUserProfileLayout();
}).catch((error) => alert("logInWithAppleLogIn :: Error! " + JSON.stringify(error, null, 1)));Step 1: Open terminal, change /path/to/my/keystore.jks with your keystore file's absolute path and run the command below.
keytool -keystore /path/to/my/keystore.jks -list -vStep 2: Obtain SHA256 finger print from the result.
Step 3: Sign in to AppGallery Connect and click My projects.
Step 4: Find your app project and click the app.
Step 5: Go to Project Settings > General Information > App Information and enter SHA-256 certificate fingerprint.
Step 1: Sign in to AppGallery Connect and click My projects.
Step 2: Find your app project and click the app.
Step 3: You can find your App ID and App Secret on Project Settings > General Information > App Information
Step 4: On left menu go to build > Auth Service
Step 5: Click enable on Huawei Account Authentication Mode.
Step 6: Enter Huawei App ID and App Secret, then click OK
cordova plugin add @hmscore/cordova-plugin-hms-accountStep 1: Open terminal, change /path/to/my/keystore.jks with your keystore file's absolute path and run the command below.
keytool -keystore /path/to/my/keystore.jks -list -vStep 2: Obtain SHA256 finger print from the result.
Step 3: Sign in to AppGallery Connect and click My projects.
Step 4: Find your app project and click the app.
Step 5: Go to Project Settings > General Information > App Information and enter SHA-256 certificate fingerprint.
Step 1: Sign in to AppGallery Connect and click My projects.
Step 2: Find your app project and click the app.
Step 3: You can find your App ID and App Secret on Project Settings > General Information > App Information
Step 4: On left menu go to build > Auth Service
Step 5: Go to Build > Game Service and query the game public key and private key.
Step 6: Click enable on Huawei Game Service Authentication Mode.
Step 7: Enter Huawei game public key and game private key, then click OK
cordova plugin add @hmscore/hms-js-gameserviceFor using Log in with Google functionality you will need a Firebase app. Log in to Firebase Console and create an app.
Step 1: Sign in to AppGallery Connect and click My projects.
Step 2: Find your app project and click the app.
Step 3: On left menu go to build > Auth Service
Step 4: Click enable on Google Authentication Mode.
Step 5: Set Client ID and Client Secret to the values of Client ID and Client secret under Credentials > OAuth 2.0 client IDs > Web client (Auto-created for Google Sign-in) page at Google API Console.
- Obtain auth token from Google authorization by official plugin or third party plugins.
- Call signIn function and provider type and pass credential object as parameter.
AGCAuthPlugin.signIn(AGCAuthPlugin.Provider.Google_Provider, {
idToken: "Obtain from Google authorization idToken",
autoCreateUser: true,
})
.then((result) => {
console.log("logInWithGoogleLogIn :: Success");
$("main").style.display = "none";
$("userProfileScreen").style.display = "block";
updateUserProfileLayout();
})
.catch((error) =>
alert("logInWithGoogleLogIn :: Error! " + JSON.stringify(error, null, 1))
);For using Log in with Google functionality you will need a Firebase app. Log in to Firebase Console and create an app.
Step 1: Sign in to AppGallery Connect and click My projects.
Step 2: Find your app project and click the app.
Step 3: On left menu go to build > Auth Service
Step 4: Click enable on Google Play Games Authentication Mode.
Step 5: Set Client ID and Client Secret to the values of Client ID and Client secret under Credentials > OAuth 2.0 client IDs > Web client (Auto-created for Google Sign-in) page at Google API Console.
- Obtain auth token from Google Game authorization by official plugin or third party plugins.
- Call signIn function and provider type and pass credential object as parameter.
AGCAuthPlugin.signIn(AGCAuthPlugin.Provider.GoogleGame_Provider, {
idToken: "Obtain from Google Game authorization idToken",
autoCreateUser: true,
})
.then((result) => {
console.log("logInWithGoogleGameLogIn :: Success");
$("main").style.display = "none";
$("userProfileScreen").style.display = "block";
updateUserProfileLayout();
})
.catch((error) =>
alert(
"logInWithGoogleGameLogIn :: Error! " + JSON.stringify(error, null, 1)
)
);If you have built an authentication system by yourself, you can connect this system to Auth Service to allow your users to use accounts provided by your authentication system for sign-in.
Step 1: Sign in to AppGallery Connect and click My projects.
Step 2: Find your app project and click the app.
Step 3: On left menu go to build > Auth Service
Step 4: Click enable on Your own account system Authentication Mode.
Step 5: Set Signature public key to the values of interconnect with your account system to provide complete data security management for your users.
- Obtain auth token from self build authorization.
- Call signIn function and provider type and pass credential object as parameter.
AGCAuthPlugin.signIn(AGCAuthPlugin.Provider.SelfBuild_Provider, {
token: "Obtain from Your Own Account System",
autoCreateUser: true,
})
.then((result) => {
console.log("logInWithSelfBuildLogIn :: Success");
$("main").style.display = "none";
$("userProfileScreen").style.display = "block";
updateUserProfileLayout();
})
.catch((error) =>
alert("logInWithSelfBuildLogIn :: Error! " + JSON.stringify(error, null, 1));
);- Obtain auth token from third party authorization by official plugin or third party plugins.
- Call link function and provider type and pass credential object as parameter.
AGCAuthPlugin.getCurrentUser().then((currentUser) => {
let twitterCredential = {
token: "Obtain from Twitter authorization token",,
secret: "Obtain from Twitter authorization secret",,
autoCreateUser: true
}
currentUser.link(AGCAuthPlugin.Provider.Twitter_Provider, twitterCredential).then(() => {
alert('Succesfully linked account.');
}).catch((error) => alert("currentUser.link :: Error! " + JSON.stringify(error, null, 1)));
}).catch((error) => alert("getCurrentUser :: Error! " + JSON.stringify(error, null, 1)));AGC Auth Cordova Plugin is licensed under the Apache 2.0 license.