https://github.com/ngthucdotcom/react-zalo-auth-kit
React components kit for Zalo Auth
https://github.com/ngthucdotcom/react-zalo-auth-kit
Last synced: 6 days ago
JSON representation
React components kit for Zalo Auth
- Host: GitHub
- URL: https://github.com/ngthucdotcom/react-zalo-auth-kit
- Owner: ngthucdotcom
- License: mit
- Created: 2022-10-27T17:04:51.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-15T02:02:15.000Z (over 3 years ago)
- Last Synced: 2025-01-10T16:13:54.738Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-zalo-auth-kit
- Size: 5.54 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Zalo Account Kit
## Description
| Develop | Mapped | User Identity | Mapped | Business |
|:-----------:|:---------------------:|:-------------:|:-------------------------:|:--------:|
| Zalo App ID | User ID by App | Zalo ID | Follower ID User ID by OA | OA ID |
| | User identify for App | | As a sender or recipient | |
## Usage
### 1. Read the [Zalo Developers](https://developers.zalo.me/docs/api/social-api-4) document to understand the principles of the API.
### 2. Register your app and set up the callback URL
2.0. Requires a Zalo account before starting. Sign up
via [Zalo App](https://id.zalo.me/account/static/zalo-register.html)
2.1. Register your app: [https://developers.zalo.me/createapp](https://developers.zalo.me/createapp)
2.2. Verify your domain: [https://developers.zalo.me/app/your-app-id/verify-domain](https://developers.zalo.me/app/your-app-id/verify-domain)
2.3. Set up the callback URL: [https://developers.zalo.me/app/your-app-id/login](https://developers.zalo.me/app/your-app-id/login)
2.3.1. Note: turn off the "Check the secret key when calling API to get the access token" option if you want to use
client side, code challenge and code verifier is required.
2.4. Activate the app: [https://developers.zalo.me/app/your-app-id/settings](https://developers.zalo.me/app/your-app-id/settings)
### 3. Install and import the ZaloAccountKit package
* Install the package
```bash
npm i react-zalo-auth-kit
```
* Import the package
```js
// the simple method to use a basic kit
import {useZaloAuthKit} from "react-zalo-auth-kit";
// create a popup window to get the oauth code
import ZaloLoginPopup from "react-zalo-auth-kit/ZaloLoginPopup";
// styled button easy to use
import ZaloStyledButton from "react-zalo-auth-kit/ZaloStyledButton";
or
// kit with styled button and basic auth
import ZaloLoginButton from "react-zalo-auth-kit/ZaloLoginButton";
```
### 4. Use templates
* Kit for Zalo Auth use Styled Button and Basic Auth
```js
import React, {useState} from 'react';
import ZaloLoginButton from "react-zalo-auth-kit/ZaloLoginButton";
function App() {
const [userInfo, setUserInfo] = useState(null);
const defaultCallback = (credential) => {
console.log('defaultCallback', credential);
setUserInfo(credential['user']);
}
if (userInfo) {
return (
Login Success
{userInfo.displayName} ({userInfo.uid})
);
}
return (
Login Kit
);
}
export default App;
```
* ZaloStyledButton
```js
import React, {useEffect, useState} from 'react';
import ZaloStyledButton from "react-zalo-auth-kit/ZaloStyledButton";
function App() {
const [isClicked, setIsClicked] = useState(false);
useEffect(() => {
const toggle = setTimeout(() => {
setIsClicked(false);
}, 3000);
return () => clearTimeout(toggle);
}, [isClicked]);
return (
Styled Button
Action: {isClicked ? "Button pressed" : "Button unpressed"}
setIsClicked(true)}/>
);
}
export default App;
```
* Basic Auth without Styled Button
```js
import React, {useEffect, useState} from 'react';
import {useZaloAuthKit} from "react-zalo-auth-kit";
import ZaloLoginPopup from "react-zalo-auth-kit/ZaloLoginPopup";
function App() {
const ZaloKit = useZaloAuthKit({
appId: 'your-app-id',
redirectUri: window.location.origin,
permissions: ['id', 'name', 'picture'],
});
const [codeVerifier, setCodeVerifier] = useState("");
const [authCodeUrl, setAuthCodeUrl] = useState("");
const [openPopup, setOpenPopup] = useState(false);
const [userInfo, setUserInfo] = useState(null);
const handleLogin = () => {
const [codeVerifier, codeChallenge] = ZaloKit.pkceCode().generate(43);
setAuthCodeUrl(ZaloKit.oauthRequest('basic_auth', codeChallenge));
setCodeVerifier(codeVerifier);
setOpenPopup(true);
};
const handleAuthCode = () => {
setOpenPopup(false);
};
const handleLoginSuccess = (credential) => {
console.log('handleLoginSuccess', credential);
setUserInfo(credential['user']);
};
window.handleSignInWithZalo = (eventEmitter) => {
return ZaloKit.login(eventEmitter, codeVerifier).then(handleLoginSuccess);
}
const oauthCodeAndAuthProcess = () => {
if (ZaloKit.hasParamsToProcess(window.location.search) && window.location.search.includes('basic_auth')) {
window.opener.handleSignInWithZalo(window.location.search);
setOpenPopup(false);
window.close();
}
};
useEffect(() => {
const checkingAuthCode = setInterval(() => {
oauthCodeAndAuthProcess();
}, 1000);
return () => clearInterval(checkingAuthCode);
})
return (
Basic Auth
{
userInfo &&
{userInfo.displayName} ({userInfo.uid})
}
Login
);
}
export default App;
```
* Basic Auth with Styled Button
```js
import React, {useEffect, useState} from 'react';
import {useZaloAuthKit} from "react-zalo-auth-kit";
import ZaloLoginPopup from "react-zalo-auth-kit/ZaloLoginPopup";
import ZaloStyledButton from "react-zalo-auth-kit/ZaloStyledButton";
function App() {
const ZaloKit = useZaloAuthKit({
appId: 'your-app-id',
redirectUri: window.location.origin,
permissions: ['id', 'name', 'picture'],
});
const [codeVerifier, setCodeVerifier] = useState("");
const [authCodeUrl, setAuthCodeUrl] = useState('');
const [openPopup, setOpenPopup] = useState(false);
const [userInfo, setUserInfo] = useState(null);
const handleLogin = () => {
const [codeVerifier, codeChallenge] = ZaloKit.pkceCode().generate(43);
setAuthCodeUrl(ZaloKit.oauthRequest('styled_auth', codeChallenge));
setCodeVerifier(codeVerifier);
setOpenPopup(true);
};
const handleAuthCode = () => {
setOpenPopup(false);
};
const handleLoginSuccess = (credential) => {
console.log('handleLoginSuccess', credential);
setUserInfo(credential['user']);
};
window.handleSignInWithZaloUseStyledButton = (eventEmitter) => {
return ZaloKit.login(eventEmitter, codeVerifier).then(handleLoginSuccess);
}
const oauthCodeAndAuthProcess = () => {
if (ZaloKit.hasParamsToProcess(window.location.search) && window.location.search.includes('styled_auth')) {
window.opener.handleSignInWithZaloUseStyledButton(window.location.search);
setOpenPopup(false);
window.close();
}
};
useEffect(() => {
const checkingAuthCode = setInterval(() => {
oauthCodeAndAuthProcess();
}, 1000);
return () => clearInterval(checkingAuthCode);
})
return (
Styled Auth
{
userInfo &&
{userInfo.displayName} ({userInfo.uid})
}
);
}
export default App;
```