Vue 3 Vite and ZoomSDK - vue.js

I’m having problems implement the zoom meetings sdk with vue 3 and vite. This is a boiler plate init of vue 3 project using the vue-create cli
I’ve also resisted my add with zoom and the my sdk key and sdk secret.
Following the steps in the zoom dev site I’ve installed the zoom meeting sdk with
npm install #zoomus/websdk --save
Following various example from the zoom dev site and zoom git I added this import to a the base HelloWord.vue component. This first error it get is
import { ZoomMtg } from "#zoomus/websdk";
Error
Uncaught TypeError: c2 is not a function
After seachinig for Similar problems I found a solution to this and change the import to this which gave no errors
import ZoomMtg from "#zoomus/websdk/dist/zoomus-websdk-embedded.umd.min.js";
The next bit of code I got from the zoom meet sdk vue 2 example
ZoomMtg.setZoomJSLib('https://source.zoom.us/2.8.0/lib', '/av');
However this produced another error
Uncaught TypeError: ZoomMtg.checkSystemRequirements is not a function
At this point I’m stuck.
I’m trying to create a zoom component that can be used on multiple pages however I can’t seem to get passed this early stage.
Help would be much appreciated.

As you wish you can create client view using embedded.
you can import ZoomMtgEmbedded from '#zoomus/websdk/embedded';
import ZoomMtgEmbedded from '#zoomus/websdk/embedded';
export default {
created () {
},
data () {
return {
client: ZoomMtgEmbedded.createClient(),
// This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
sdkKey: "",
meetingNumber: "123456789",
passWord: "",
role: 0,
signatureEndpoint: "",
userEmail: "",
userName: "Vue.js",
// pass in the registrant's token if your meeting or webinar requires registration. More info here:
// Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/meetings#join-registered
// Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/webinars#join-registered
registrantToken: ''
}
}
}
here is full example updated recently.
If you would like to use component view, you should add lodash
script in index.html.

Related

Problem with deep linking when published with Expo

can you please give me a hand with Deep Linking. When I work in a development environment it works for me with the URL: exp://192.168.100.4:19000/--/resetPassword/rzBsP3tJ, however, when I publish it, I open it with the URL: exp://exp.host/#user/#nameApp/--/resetPassword/rzBsP3tJ?release-channel=testing, it just opens the app, but it doesn't redirect me to the screen I want. What I can do?
An assumption here: you talk about screens so assuming you are using react-navigation and making use of LinkingOptions.
The issue is caused by a mismatch between how Expo defines a linking URL and how react-navigation defines LinkingOptions. LinkingOptions is in terms of a path, not a URL that has any query params. In development there are no query params, but an app that is is published to a channel has the 'release-channel' query param so this will never match in react-navigation's LinkingOptions.
The solution is just to remove the release-channel query param from the URL returned by Linking.createURL:
import * as Linking from 'expo-linking';
import { URL } from 'react-native-url-polyfill';
const urlWithReleaseChannel = Linking.createURL('/')
const parsedUrl = new URL(urlWithReleaseChannel)
parsedUrl.searchParams.delete("release-channel")
export const resetLinkingOptions = {
prefixes: [parsedUrl.toString()],
config: {
screens: {
ResetPassword: {
path: 'resetPassword/:id'
}
}
}
}
This works for both development and deployed apps: if present, release-channel then behaves as a regular query param. Note that react-native-url-polyfill is required as a project dependency as out of the box the RN URL is not fully featured and lacks in this case the ability to delete a query param.

"next-auth/react" module not found when making custom email sign in page in next-auth

I'm making a NextJs application with next-auth for the authentication part.
Email Sign In is successfully implemented using next-auth's own default pages.
But now I would like to have a custom sign in page. I followed the documentation for this, and added
pages: { signIn: '/auth/signin' } in my [...nextauth].js file. Then, I added the given Email Sign In code in pages/auth/signin.js.
But upon running yarn dev, I get this module not found error:
error - ./pages/api/auth/signin.js:1:0
Module not found: Package path ./react is not exported from package C:\...\node_modules\next-auth (see exports field in C:\...\node_modules\next-auth\package.json)
> 1 | import { getCsrfToken } from "next-auth/react"
2 |
3 | export default function SignIn({ csrfToken }) {
4 | return (
Import trace for requested module:
https://nextjs.org/docs/messages/module-not-found
And I couldn't find any module named 'next-auth/react' in npm or yarn websites.
Even in next-auth folder in node_modules, there is no 'react' named file...
How can I solve this? And am I doing anything wrong here?
I faced the same issue and realised the docs are for v4 where next-auth/react is used.
You are probably on v3 where next-auth/client is used instead.
To use the beta version, do:
➜ npm i next-auth#beta
You can now run npm install next-auth or yarn add next-auth. This will update the version of next-auth to version 4 in which you import SessionProvider as follows (within _app.tsx) :
import { SessionProvider } from "next-auth/react"
I think it should be imported from client and not react
try this : import { getCsrfToken } from "next-auth/client"
Also,
(just sharing an alternate solution), you need not define the custom pages in next auth. you can have your own login page and there just call next-auth's signin method, by passing the type like email or google.
and if email, then pass the email as well. eg:
const handleSubmit = (event) => {
event.preventDefault();
signIn("email", { email, callbackUrl: `${process.env.VERCEL_URL}/` });
};
I was facing this issue. I was using the "next-auth": "^4.18.7" version. my node version was 14.0.0. when I update this version to 18.12.1 then the issue is resolved.

Expo App with Google Login is not redirecting to app

I having a problem with my Google Sign In, I'm Currently using EXPO app I wish at all cost not to eject / opt out of Expo, the problem is that when I click on the Button to log in with Google in my App it does take me to the login page for me inside the browser, but once I put my Google credentials, it just lands inside the Google.com page.
I checked a lot of posts but still I'm unable to get it to come back to the app.
My app Code to log in is:
//import de Google en Expo
import * as Google from 'expo-google-app-auth';
import * as AppAuth from 'expo-app-auth';
export const googleLogin = () => {
console.log('***Entro en Google***');
return async dispatch => {
try {
const result = await Google.logInAsync({
androidClientId: '***my ID Censored***',
scopes: ['profile', 'email'],
behavior: 'web',
redirectUrl: `${AppAuth.OAuthRedirect}:/oauthredirect`
});
console.log('***Hizo Consulta***');
if (result.type === 'success') {
console.log(result.accessToken);
} else {
return { cancelled: true };
}
} catch (e) {
return { error: true };
}
}
};
I checked on many posts that the issue was the redirect URL and I tried setting 4 options:
${AppAuth.OAuthRedirect}:/oauthredirect
${AppAuth.OAuthRedirect}:/oauthredirect/google
'host.exp.exponent:/oauth2redirect/google'
'host.exp.exponent:/oauth2redirect/'
None of them worked, I did the last 2 of host.exp.exponent as that is the Bundle Identifier used by Expo on their documentation:
https://docs.expo.io/versions/latest/sdk/google/
Create an Android OAuth Client ID
Select "Android Application" as the Application Type. Give it a name
if you want (maybe "Android Development").
Run openssl rand -base64
32 | openssl sha1 -c in your terminal, it will output a string that
looks like A1:B2:C3 but longer. Copy the output to your clipboard.
Paste the output from the previous step into the
"Signing-certificate fingerprint" text field.
Use host.exp.exponent as the "Package name".
4.Click "Create"
You will now see a modal with the Client ID.
The client ID is used in the androidClientId option for Google.loginAsync (see code example below).
I did just that, and now it always gets stuck in the google.com page, any Ideas or recommendations?
Kind Regards
What have you added to your bundle id (e.g "Apple bundle ID")?
Take into account that there is a difference between production and development.
In development, you should use the default expo apple bundle id so you will be allowed to use the google login (and you won't get redirect_fail).
The default apple bundle id for development using expo is: host.exp.exponent
In production, you should have your own bundle id.
Please write up a follow-up message if any extra help is needed.
In app.json,
package name as to be all in small letters like com.app.cloneapp

How can i check app installed in react native code

i tried to check other app install in my react native project, I'm used module like: https://www.npmjs.com/package/react-native-check-app-install
But always got this error:
Cannot read property 'pkgName' of undefined
Here is my code:
AppInstalledChecker
.isAppInstalledAndroid('com.skype.raider')
.then((isInstalled) => {
// isInstalled is true if the app is installed or false if not
console.log('App Skype status: ', isInstalled);
});
Anyone can suggest me one way so check app install in react native (both: iOS/android)
install this
https://github.com/KjellConnelly/react-native-shared-group-preferences
and
async check() {
try {
await SharedGroupPreferences.isAppInstalledAndroid("com.farsitel.bazaar")
// IF IS INSTALL
} catch (e) {
// IF IS NOT INSTALL
}
}
Google Play considers the list of installed apps to be personal and sensitive user data.
As we are using
AppInstalledChecker
.isAppInstalledAndroid()
method for checking app installed check, for that we have to white-list the queries in manifest.xml
Reference : https://developer.android.com/training/package-visibility
<queries>
<package android:name="com.instagram.android"/>
…
</queries>
For adding Queries need to upgrade build gradle version:
new default settings and features for package visibility in Android 11 that need to add  you must update your android gradle plugin version
Reference: How to fix "unexpected element <queries> found in <manifest>" error?
I have updated from 3.5.2 to 4.0.2
Now react-native-check-app-install module working as expected
Hope this is resolved!
Android
I. For app's which has deep links like 'waze://', 'mapsme://' you can use:
import { Linking } from 'react-native'
...
Linking.canOpenURL('waze://ul?ll=${latitude},${longitude}&navigate=yes')
OR
II. You can use for absolutely all apps (for example with deep links like "https://...")
https://github.com/KjellConnelly/react-native-shared-group-preferences
iOS
import { Linking } from 'react-native'
...
Linking.canOpenURL(iOS_app_URL_Scheme)
...
where iOS_app_URL_Scheme you can find via Google for each separate app. Like "waze://", "comgooglemaps://", "osmandmaps://" etc

How do I share an action using react-native-fbsdk?

We're doing this in the web version of our react application and our native Android app so our setup and everything is working fine. I'm trying to implement sharing an action in react-native using react-native-fbsdk. I'm following the Android code because it looks the closest to the react-native-fbsdk code.
Should I be using ShareApi.share or something else?
I tried creating an instance of ShareOpenGraphContent to use with ShareApi.share, but there's no constructor.
I wish they would provide more thorough documentation :s
Based on the code my colleague used for the ShareApi on Android it seems like react-native-fbsdk is missing a few things related to sharing actions.
ShareOpenGraphContent isn't directly exported from react-native-fbsdk so this
import { ShareOpenGraphContent } from 'react-native-fbsdk';
Actually doesn't work. There must be some way to use the ShareApi in react-native-fbsdk to share an action...I'm just missing something.
Someone help...please.
Thanks!!
I figured it out! I had to manually create an instance of the ShareOpenGraphContent object which has 3 mandatory properties: contentType, action and previewPropertyName. The react-native-fbsdk doesn't currently have a constructor for this object type.
ShareApi.canShare isn't mandatory, but it checks to ensure you have the correct permissions before trying to share. This would allow you to get the user logged in before trying in case their token expired, or the user hasn't agreed to the needed permissions yet.
const ogAction = new ShareOpenGraphAction('<your_facebook_namespace>' + ':' + '<your_facebook_action>');
ogAction.putString('song', 'https://<url_to_your_song_app_etc>');
ogAction.putString('place', '<fbPlacePageID>'');
ogAction.putNumber('fb:explicitly_shared', 1); // Normally this is a boolean, but putNumber with a value of 1 works
// Manually create an instance of ShareOpenGraphContent (no constructor in the API)
const ogContent = {
contentType: 'open-graph',
action: ogAction,
previewPropertyName: 'song',
};
ShareApi.canShare(ogContent).then((canShare) => {
if (canShare)
return ShareApi.share(ogContent, '/me');
}).then(
function(result) {
// Shared successfully
},
function(error) {
// Failed to share
}
);