zoomsdk react and node integration always ends up with an error - javascript

I have been trying to integrate zoomsdk in my react app and also followed every step metioned here. Backend part is working fine and I am getting back the signature response. But when I try to run the frontend part, it throws this error:
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/react-scripts/scripts/start.js:19
throw err;
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:417:16)
at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:452:10
at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:323:13
at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/babel-loader/lib/index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
The methods I have tried,
updating the current project webpack(v4.44.2) to latest one which is v5.75.0.
Tried updating my node js version to latest.
Neither of them worked in my case, I am still getting the same error.
Here is my app.js file code:
import React from "react";
import "./App.css";
import { ZoomMtg } from "#zoomus/websdk";
ZoomMtg.setZoomJSLib("https://source.zoom.us/2.9.7/lib", "/av");
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
// loads language files, also passes any error messages to the ui
ZoomMtg.i18n.load("en-US");
ZoomMtg.i18n.reload("en-US");
function App() {
// setup your signature endpoint here: https://github.com/zoom/meetingsdk-sample-signature-node.js
var signatureEndpoint = "http://localhost:4000";
// This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
var sdkKey = "nMYXtjORjReaes6NpngNPakcKP3CiFdIfN7D";
var meetingNumber = "85433353829";
var role = 0;
var leaveUrl = "http://localhost:3000";
var userName = "React";
var userEmail = "vickbishnoi#gmail.com";
var passWord = "000000";
// 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/client-view/meetings#join-registered
// Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/webinars#join-registered
var registrantToken = "";
function getSignature(e) {
e.preventDefault();
fetch(signatureEndpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
meetingNumber: meetingNumber,
role: role,
}),
})
.then((res) => res.json())
.then((response) => {
startMeeting(response.signature);
})
.catch((error) => {
console.error(error);
});
}
function startMeeting(signature) {
document.getElementById("zmmtg-root").style.display =
"block";
ZoomMtg.init({
leaveUrl: leaveUrl,
success: (success) => {
console.log(success);
ZoomMtg.join({
signature: signature,
meetingNumber: meetingNumber,
userName: userName,
sdkKey: sdkKey,
userEmail: userEmail,
passWord: passWord,
tk: registrantToken,
success: (success) => {
console.log(success);
},
error: (error) => {
console.log(error);
},
});
},
error: (error) => {
console.log(error);
},
});
}
return (
<div className="App">
<main>
<h1>Zoom Meeting SDK Sample React</h1>
<button onClick={getSignature}>Join Meeting</button>
</main>
</div>
);
}
export default App;
On the screen, I get this error:
It has been 3-4 days since I have trying different approaches to integrate zoom in my react app but none of them are working.
It is very important to me as it is part of an assignment given to me by one of the companies I interviewed in. In this part, I am required to build a screen where there is a create meeting button which should be able to create a zoom meeting and after that, we should be able to share the meeting link to other people and when any individual clicks on the link, they should first be brought to that page and then there should be a join meeting button which takes them to the meeting. After the meeting ends, we should be able to take the meeting attendees to a feedback screen where they should be able to share their experience.
If I am able to pull this thing off, they are going to offer me a position and being a self taught developer without a cs degree, it really is a golden opportunity for me, so any help from you guys would be incredibly helpful for me.

Please watch the Zoom WebSDK Integration using ReactJS -> Here.

Related

View calls work for the deployer account, but do not work for other accounts

I am experiencing a very strange issue. I have developed an app via [useDapp][1] and in the app I have many view calls. It works perfectly when I connect my account (which is the Deployer/Creator), but produces 32000 error for all the calls when I connect another Metamask account. Also transactions work perfectly, but view functions revert...
The network is Binance Smartchain Testnet.
Here is one of the smart contracts
https://testnet.bscscan.com/address/0x6ae13e6B49Ab13d6D51060008d586aF48DE59b97#code
The chain definition
export const BSCTestnetChain: Chain = {
chainId: 97,
chainName: 'BSC Testnet',
isTestChain: true,
isLocalChain: false,
multicallAddress: '0xae11C5B5f29A6a25e955F0CB8ddCc416f522AF5C',
getExplorerAddressLink: (address: string) =>
`https://testnet.bscscan.com/address/${address}`,
getExplorerTransactionLink: (transactionHash: string) =>
`https://testnet.bscscan.com/tx/${transactionHash}`,
// Optional parameters:
rpcUrl: 'https://data-seed-prebsc-2-s3.binance.org:8545/',
blockExplorerUrl: 'https://testnet.bscscan.io',
nativeCurrency: {
name: 'BNB',
symbol: 'BNB',
decimals: 18,
},
};
The example of a call:
export function useX11Ballance(address: string | Falsy) {
const { value, error } =
useCall({
contract: x11Contract, // instance of called contract
method: 'balanceOf', // Method to be called
args: [address], // Method arguments - address to be checked for balance
}) ?? {};
if (error) {
console.error(error.message);
return undefined;
}
return value?.[0];
}
Example of an error:
react_devtools_backend.js:4026 processing response error (body="{\"jsonrpc\":\"2.0\",\"id\":96,\"error\":{\"code\":-32000,\"message\":\"execution reverted\"}}\n", error={"code":-32000}, requestBody="{\"method\":\"eth_call\",\"params\":[{\"to\":\"0xae11c5b5f29a6a25e955f0cb8ddcc416f522af5c\",\"data\":\"0x252dba4200000000000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000009000000000000000000000000000000000000000000000000000000000000012000000000000000000000000000000000000000000000000000000000000001c00000000000000000000000000000000000000000000000000000000000000260000000000000000000000000000000000000000000000000000000000000030000000000000000000000000000000000000000000000000000000000000003a0000000000000000000000000000000000000000000000000000000000000044000000000000000000000000000000000000000000000000000000000000004e000000000000000000000000000000000000000000000000000000000000005a00000000000000000000000000000000000000000000000000000000000000660000000000000000000000000f555f02220d22cea9aefbe569181de30256d2f18000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000248f03e382000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000ced4de7c1a8f19a5666fcb3609668992f0670983000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000243f2c00fc000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000ced4de7c1a8f19a5666fcb3609668992f06709830000000000000000000000000000000000000000000000000000000000000040000000000000000000000000000000000000000000000000000000000000002416353e0c000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000ced4de7c1a8f19a5666fcb3609668992f0670983000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000242f380b350000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000006ae13e6b49ab13d6d51060008d586af48de59b970000000000000000000000000000000000000000000000000000000000000040000000000000000000000000000000000000000000000000000000000000002470a08231000000000000000000000000ca04e3ff4bfc69c02f6dae8b21ff2c045312941a0000000000000000000000000000000000000000000000000000000000000000000000000000000052dda844620da41a61459448cb0c15ee4bae9cd50000000000000000000000000000000000000000000000000000000000000040000000000000000000000000000000000000000000000000000000000000002470a08231000000000000000000000000ca04e3ff4bfc69c02f6dae8b21ff2c045312941a00000000000000000000000000000000000000000000000000000000000000000000000000000000f555f02220d22cea9aefbe569181de30256d2f18000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000442f745c59000000000000000000000000ca04e3ff4bfc69c02f6dae8b21ff2c045312941a000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000ced4de7c1a8f19a5666fcb3609668992f0670983000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000445a4988c50000000000000000000000000000000000000000000000000000000000000000000000000000000000000000ca04e3ff4bfc69c02f6dae8b21ff2c045312941a000000000000000000000000000000000000000000000000000000000000000000000000000000006ae13e6b49ab13d6d51060008d586af48de59b9700000000000000000000000000000000000000000000000000000000000000400000000000000000000000000000000000000000000000000000000000000044dd62ed3e000000000000000000000000ca04e3ff4bfc69c02f6dae8b21ff2c045312941a000000000000000000000000ced4de7c1a8f19a5666fcb3609668992f067098300000000000000000000000000000000000000000000000000000000\"},\"0x14ca18e\"],\"id\":96,\"jsonrpc\":\"2.0\"}", requestMethod="POST", url="https://data-seed-prebsc-2-s3.binance.org:8545/", code=SERVER_ERROR, version=web/5.6.1)
at ContinueBlock (http://localhost:3000/static/js/bundle.js:7411:5)
at div
at div
at div
at PollPage (http://localhost:3000/static/js/bundle.js:12023:67)
at Routes (http://localhost:3000/static/js/bundle.js:94629:5)
at div
at App
at UIProvider (http://localhost:3000/static/js/bundle.js:12408:5)
at PoolProvider (http://localhost:3000/static/js/bundle.js:12289:5)
at Router (http://localhost:3000/static/js/bundle.js:94562:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:93371:5)
at TransactionProvider (http://localhost:3000/static/js/bundle.js:42263:5)
at NotificationsProvider (http://localhost:3000/static/js/bundle.js:42078:5)
at MultiChainStateProvider (http://localhost:3000/static/js/bundle.js:41325:5)
at LocalMulticallProvider (http://localhost:3000/static/js/bundle.js:40505:5)
at BlockNumbersProvider (http://localhost:3000/static/js/bundle.js:40723:5)
at BlockNumberProvider (http://localhost:3000/static/js/bundle.js:40654:5)
at NetworkProvider (http://localhost:3000/static/js/bundle.js:41666:5)
at ReadonlyNetworksProvider (http://localhost:3000/static/js/bundle.js:41919:5)
at WindowProvider (http://localhost:3000/static/js/bundle.js:42488:5)
at DAppProviderWithConfig (http://localhost:3000/static/js/bundle.js:40428:5)
at ConfigProvider (http://localhost:3000/static/js/bundle.js:41486:5)
at DAppProvider (http://localhost:3000/static/js/bundle.js:40398:5)
Would be grateful for any kind of help or hint.
[1]: https://usedapp.io

React Admin parseResponse doesn't trigger when query returns error

I'm using React Admin and ra-data-graphQl, when I update something in my UserEdit component all works perfect, BUT, when I need to handle the error message from the API, I don't know where catch it.
This is my Update query:
case 'UPDATE': {
const updateParams = { ...params };
return {
query: gql`mutation updateUser($id: ID!, $data: UpdateUser!) {
data: updateUser(id: $id,input:$data) {
${buildFieldsGraphQL(updateFields)}
}
}`,
variables: {
...updateParams,
id: updateParams.data.uuid,
data: {
...updateParams.data,
},
},
parseResponse: (response) => {
console.log('tr response: ', response);
},
};
}
When the API returns an error, it never reach the console.log.
I was searching a list with options here (https://github.com/marmelab/react-admin/tree/master/packages/ra-data-graphql#options) searching something like "parseError", but I did not find nothing similar.
I need to catch the error and show a message in the UserEdit form.
Reading the link that I share in this post, it say this:
but must return an object matching the options of the ApolloClient query method with an additional parseResponse function.
I understand that I should go to the link in the word "query" and check if there is something like "parserError", but the link is broken:
https://www.apollographql.com/docs/react/reference/index.html#ApolloClient.query
Any help?
Ok, its easier. By adding the onFailure function I can handle the error.

Imagepicker React Native crashes on iOS but works fine on Android

I am currently using imagepicker on react native. When I use android to pick image it works fine. However when I use iOS it crashes when I choose a photo.
This is the error it shows in xcode debugger:
2020-04-03 11:54:27.802434+0800 app[7218:1993193] -[NSURLResponse allHeaderFields]: unrecognized selector sent to instance 0x28281aba0
2020-04-03 11:54:27.802766+0800 app[7218:1993193] * Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSURLResponse allHeaderFields]: unrecognized selector sent to instance 0x28281aba0'
* First throw call stack:
(0x19d01c164 0x19cd30c1c 0x19cf1a7e0 0x19d02085c 0x19d022b60 0x102b27bc8 0x102b27a90 0x102b01ce0 0x1059f5d10 0x1059f718c 0x1059fe968 0x1059ff580 0x105a0b0f0 0x19cd23714 0x19cd299c8)
libc++abi.dylib: terminating with uncaught exception of type NSException
and this is my code:
chooseImage = async (id) => {
//await this.askPermissionsAsync();
let options = {
title: 'Select Image',
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response.error);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
const source = { uri: response.uri };
// You can also display the image using data:
// const source = { uri: 'data:image/jpeg;base64,' + response.data };
// alert(JSON.stringify(response));
let file_data = [...this.state.fileData];
file_data[id] = response.data;
let file_uri = [...this.state.fileUri];
file_uri[id] = response.uri;
this.setState({filePath:response, fileData: file_data, fileUri: file_uri});
}
});
}
I have also added the permissions in info.plist:
<key>NSCameraUsageDescription</key>
<string></string>
<key>NSPhotoLibraryUsageDescription</key>
<string></string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string></string>
<key>NSDocumentsFolderUsageDescription</key>
<string></string>
but the problem still persist in ios.
The issue was
'data:image/jpeg;base64,' + this.state.fileData[id]
while rendering it on Image tag.
This issue is indicated here:
YellowBox Crash
Image Crash with data:image/png;base64
The solution I did was to add "noData: true" on option and access directly the URI file location in the image tag.
Hope this helps
react-native link did not link the library, so the mage picker lib did not build with the app. Thats why I as getting null pointer exception because there was no lib.
Or else manually add the library.
<key>NSCameraUsageDescription</key>
<string>Access to take a photo by camera</string>
<key>NSAppleMusicUsageDescription</key>
<string>Access to pick a photo</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Access to pick a photo</string>

Parse-server social login

I am developing application based on Parse-server and I want to offer social login. I found this guide in the documentation http://docs.parseplatform.org/js/guide/#linking-users.
I started to implement the social login by google. I did following steps:
1) I added following lines to the ParseServer settings
var api = new ParseServer({
...
auth:{
google: {}
},
...
});
2) I did the authentication by hello.js on the client side (call user._linkWith function on login)
hello.init({
google: 'My Google id'
});
hello.on('auth.login', function(auth) {
// Call user information, for the given network
hello(auth.network).api('me').then(function(r) {
const user = new Parse.User();
user._linkWith(auth.network, auth.authResponse).then(function(user){
console.log('You are logged in successfully.');
});
});
});
When I debugged it, I found that it fails in _linkWith() function, when provider object is preparing. Object AuthProviders, which should store all providers, is empty. Because of it the statement provider = authProviders['google']; leads to undefined. Invoking provider.authenticate(...); leads to error "Cannot read property 'authenticate' of undefined"
What am I missing or what am I doing wrong?
Thanks for all your answers.
Honza
Did you register the authenticationProvider? You can find examples in our unit tests on how to do so:
https://github.com/parse-community/parse-server/blob/5813fd0bf8350a97d529e5e608e7620b2b65fd0c/spec/AuthenticationAdapters.spec.js#L139
I also got this error and looked at the _linkWith(provider, options) source code. It checks if options has an authData field (which in turn should contain id and credentials). If so, it uses options.authData. Otherwise it falls back on looking up a previously registered authentication provider mentioned in the previous answer.
This is a fragment of the code I'm using:
const authData = {
"id": profile.getId(),
"id_token": id_token
}
const options = {
"authData": authData
}
const user = new Parse.User();
user._linkWith('google', options).then(function(user) {
console.log('Successful user._linkWith(). returned user=' + JSON.stringify(user))
}, function(error) {
console.log('Error linking/creating user: ' + error)
alert('Error linking/creating user: ' + error)
// TODO handle error
})

Cannot read user info - Adal error cannot login

I am trying to implement authentication with ADAL (Inside a react app), so I followed the example from Azure-Samples, and this is my code:
var AuthenticationContext = require('../../node_modules/adal-angular/lib/adal.js');
var adalInstance = new AuthenticationContext({
instance: 'https://login.microsoftonline.com/',
clientId: '9897809e-XXXX-XXXX-XXXX-3e6de068af92',
postLogoutRedirectUri: window.location.origin,
endpoints: {}
});
export function enter() {
adalInstance.login();
var isCallback = adalInstance.isCallback(window.location.hash);
adalInstance.handleWindowCallback();
if (isCallback && !adalInstance.getLoginError()) {
adalInstance.acquireToken(adalInstance.config.clientId, function (error, token) {
if (error || !token) {
console.log('ADAL Error Occurred: ' + error);
return;
}
});
}
var user = adalInstance.getCachedUser();
console.log(user);
}
export function logout() {
adalInstance.logout();
}
So I have the following messages:
ADAL Error Occurred: User login is required
and for user, I get null.
Currently I can go to the microsoft login page (called from the login component), login, and return to the app. I have the sessionStorage set:
Storage { adal.state.login: "73771340-XXXX-XXXX-XXXX-858c9edcba05", adal.nonce.idtoken: "20074445-XXXX-XXXX-XXXX-9f94c9b5cc31", adal.login.error: "", adal.error: "Invalid_state", adal.login.request: "http://localhost:3000/#id_token=eyJ…", adal.error.description: "Invalid_state. state: a2f210a5-e34b…", adal.token.renew.status: "Completed", length: 7 }
What I am doing wrong?
DATA: I am using adal.js library from the adal-angular package version: AdalJS v1.0.13
EDIT:
Now I am using an specific adal.js from here
I changed my code to:
var AuthenticationContext = require('./adal.js');
When I compiled it (using webpack with babel for transpiling es6 code), but gave me an error about logging is not defined, so I added:
var Logging = {
level: 3,
log: function (message) {
console.log(message);
}
}
to the adal library.
And now, I am getting in the browser(firefox, because chromes seems to not show any log I dont know why) console:
Wed, 18 Jan 2017 11:52:51 GMT:1.0.13-VERBOSE: State: d3c2bb0d-XXXX-XXXX-XXXX-e98a460572e2 bundle.js:74558:8
Wed, 18 Jan 2017 11:52:51 GMT:1.0.13-INFO: Returned from redirect url bundle.js:74558:8
Wed, 18 Jan 2017 11:52:51 GMT:1.0.13-INFO: State status:false; Request type:UNKNOWN bundle.js:74558:8
Wed, 18 Jan 2017 11:52:51 GMT:1.0.13-WARNING: User login is required bundle.js:74558:8
ADAL Error Occurred: User login is required bundle.js:74507:10
USER null bundle.js:74513:4
During integrating with PowerBi endpoint, I got a same error. After some research got this result. So the code below does auto login. Replace the method yourLogic to use the token for api request.
import AuthenticationContext from "adal-angular/lib/adal";
window.AuthenticationContext = AuthenticationContext;
let authenticationContext = new window.AuthenticationContext({
instance: "https://login.microsoftonline.com/",
clientId: "XXXXXXX",
postLogoutRedirectUri: window.location.origin,
cacheLocation: "localStorage", // enable this for IE, as sessionStorage does not work for localhost.
}),
resource = "https://analysis.windows.net/powerbi/api",
isCallback = authenticationContext.isCallback(window.location.hash);
authenticationContext.handleWindowCallback();
let user = authenticationContext.getCachedUser(),
token = authenticationContext.getCachedToken(resource),
loginActive = isCallback && user && !token,
renewActive = isCallback && user && !!token;
if (user) {
if (!renewActive) {
authenticationContext.acquireToken(resource, (errorDesc, token, error) => {
if (!error) {
yourLogic(token);
} else {
authenticationContext.error("Error when acquiring token for resource: " + resource, error);
}
});
}
} else {
authenticationContext.login();
}
Sorry for the characters limitation of comment, I write my troubleshooting suggestion as an answer here.
Actually, your code snippet works fine on my side. For troubleshooting and arrow down the issue, you can try the following options.
Currently, it seems that the javascript syntax on browser is not support export,require key words. So you can check the bundled script, whether there is anything wrong about the global variables. You can test your AAD application with plain javascript within adal.js, as the sample you are referring.
You can try to add global variable logging to track all the info during the authentication flow. E.G. add following code in js script.
Logging = {
level: 3,
log: function (message) {
console.log(message);
}
}

Categories

Resources