Zalo Authenticate through CapacitorJS
Currently, I don't plan for maintainance. Instead, mail to me ([email protected]) if need any help. Thanks for using my plugins!
npm install zalo-auth-capacitor-plugin
npx cap sync
Inside target 'App'
, append:
target 'App' do
capacitor_pods
# Add your Pods here
...
pod 'ZaloSDK'
...
end
- Add to import list:
import ZaloSDK
- Inside
AppDelegate
class, take changes in 2 methods below:
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
...
ZaloSDK.sharedInstance()?.initialize(withAppId: "APP_ID_FROM_ZALO_DEVELOPER");
...
return true
}
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
...
if CAPBridge.handleOpenUrl(url, options) {
if url.absoluteString.hasPrefix("zalo-APP_ID_FROM_ZALO_DEVELOPER") {
return ((ZDKApplicationDelegate.sharedInstance()?.application(app, open: url, options: options)) != nil);
}
}
...
return false;
}
Append or fill out these lines:
...
<key>CFBundleURLTypes</key>
<array>
...
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>zalo</string>
<key>CFBundleURLSchemes</key>
<array>
<string>zalo-APP_ID_FROM_ZALO_DEVELOPER</string>
</array>
</dict>
...
</array>
...
Inside dependencies { ... }
, append:
implementation "com.zing.zalo.zalosdk:core:+"
implementation "com.zing.zalo.zalosdk:auth:+"
implementation "com.zing.zalo.zalosdk:openapi:+"
- Import class.
import com.zing.zalo.zalosdk.oauth.ZaloSDK;
- In the callback of `this.init(savedInstanceState, ....), append:
add(com.rin.zaloauth.ZaloAuthCapacitorPlugin.class);
- In
onActivityResult
method, undersuper.onActivityResult(requestCode, resultCode, data);
append:ZaloSDK.Instance.onActivityResult(this, requestCode, resultCode, data);
Inside resources
, create Zalo App on Zalo Developer, get back APP_ID
(may be similar 42735613396xxxx150
):
<resources>
...
<string name="zalo_app_id">APP_ID_FROM_ZALO_DEVELOPER</string>
<string name="zalo_login_protocol_scheme">zalo-APP_ID_FROM_ZALO_DEVELOPER</string>
...
</resources>
- Add
name
attribute to your application.
<application
android:name="com.zing.zalo.zalosdk.oauth.ZaloSDKApplication"
...
>
...
<meta-data
android:name="com.zing.zalo.zalosdk.appID"
android:value="@string/zalo_app_id"
/>
<activity
android:name="com.zing.zalo.zalosdk.oauth.BrowserLoginActivity"
>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="@string/zalo_login_protocol_scheme" />
</intent-filter>
</activity>
...
</application>
import { Injectable } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { isPlatform } from '@ionic/angular';
import {
ShareInput,
ZaloAuthCapacitorPlugin,
ZaloAuthCapacitorPluginPlugin,
} from 'zalo-auth-capacitor-plugin';
@Injectable({ providedIn: 'root' })
export class LoginZaloService {
private _zaloLogin: ZaloAuthCapacitorPluginPlugin;
constructor() {
this._setupZaloLogin();
}
async login() {
return this._zaloLogin.login();
}
async getUserProfileFromZalo() {
return this._zaloLogin.getUserProfile();
}
logout() {
return this._zaloLogin.logout();
}
share(input: ShareInput) {
return this._zaloLogin.share(input);
}
private _setupZaloLogin() {
if (isPlatform('desktop')) {
this._zaloLogin = ZaloAuthCapacitorPlugin;
} else {
this._zaloLogin = Plugins.ZaloAuthCapacitorPlugin as ZaloAuthCapacitorPluginPlugin;
}
}
}
1. Register Callback URL in https://deverloper.zalo.me/app/YourAppID/login
appID = '*********************';
redirectURI = `Your Callback URL`;
zaloLogin = `https://oauth.zaloapp.com/v3/permission?app_id=${appID}&redirect_uri=${redirectURI}&state=${anything}`
const url = new URL(getURL);
const uid = url.searchParams.get("uid"); //ID of user
const code = url.searchParams.get("code"); //OAuthCode
const state = url.searchParams.get("state"); //state in step 2