I need to implement the Slient-Renew Token using oidc-client or redux-oidc - npm node module.
I'm using Identity Server Version 3.0 and Javascript ReactJs Client UI Application (Webpack Version 2).
I'm having a simple Javascript application download from github, the Slient Renew HTML file is
<!DOCTYPE html>
<html>
<head>
<title>Silent Renew</title>
<meta charset="utf-8" />
</head>
<body>
<script src="./oidc-client.js"></script>
<script>
new Oidc.UserManager().signinSilentCallback();
</script>
</body>
</html>
Currently I created a Route
<Route exact path='/SilentRenew' component={SilentRenew} />
The Component code is
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import UserManager from 'oidc-client';
/**
* <p>.</p>
* #extends Component
*/
class SilentRenew extends React.Component {
constructor(props) {
super(props);
alert('Hai');
const userManager = UserManager();
userManager.signinSilentCallback();
}
render() {
return (
<div>Silent Renew</div>
);
}
}
export default SilentRenew;
I'm getting error
Kindly assist me how to call the signinSilentCallback method.
I'd put the code
const userManager = UserManager();
userManager.signinSilentCallback();
inside componentDidMount() instead of constructor().
Check React Component lifecycle methods...
Related
I am trying to use Tau-Prolog with Node.js and React.
At the step:
session.consult(program);
I get this error message:
TypeError: fs.existsSync is not a function
Here is the code to reproduce on the problem:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
// These alternatives makes no difference:
var pl = require('tau-prolog');
// var pl = require('./tau-prolog/modules/core.js');
// var pl = require('./tau-prolog.js');
class App extends React.Component {
componentDidMount() {
let program = 'fruit(apple). fruit(banana).';
let session = pl.create();
// Until here, it's ok. I get Session {rules: {…}, src_predicates: {…},
// The trouble is at this step:
session.consult(program);
////////
//////// TypeError: fs.existsSync is not a function
////////
}
render() {
return <div>Hello world</div>;
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Thanks for your help!
You don't require it on server side, except if you want to evaluate the prolog program on server side and request the result.
If you just want to use it with react in the frontend, you can simply load it like any other frontend library by adding it to your html
<script type="text/javascript" src="tau-prolog.js"></script>
<script type="text/javascript" src="tau-prolog/core.js"></script>
<script type="text/javascript" src="tau-prolog/lists.js"></script>
and then either fetch an external .pl file which contains the Prolog code, or use it inline like in the examples or in react.
I created one simple angular application.
Webpack compiled successfully. localhost:4200 opened my application. Cool.
To host it on firebase, I tried to install firebase#4.2.0 and angularfire2#4.0.0-rc.1 but I got a self signed certificate error since I'm behind my org firewall.
After this, my app stopped working and I don't see any error on browser too. It just doesn't load. How do I debug this? Not just this app, my other angular apps also stopped working. I even tried creating a new app and it doesn't load as well. All of them compile successfully when I run ng serve command.
My main.ts file:
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
My index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SampleApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app component:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
I guess that some libraries were corrupted after firebase installation attempt and need to be reinstalled/repaired.
Please suggest how to get to the root cause and fix it.
new to React development.
I am building an API client for the BitTrex Exchange API, using their node.js wrapper: node.bittrex.api
With the objective of simply testing the websocket subscription for orderbook updates within the ReactJS framework, here are the steps I have taken:
-Used create-react-app to create the app.
-used npm to install the node.bittrex.api
-added the bittrex client object to the top of the default App.js component and configured options with proper API keys
-added a button (with handler, binded to the button according to React docs) to the default App.js main component,
-inside the handler function, initiated the websocket subscription according to the example code in the node.bittrex.api docs.
The app comes up, but when I press the button, I get an error saying that TypeError Websocketclient() is not a constructor, in the line inside the SignalR.js that creates the websocket connection:
Now I suspect that there is just something specific with the React framework that is screwing this up. Can anyone please help me understand the intricacies? Thanks. Here is my App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
var bittrex = require('../node_modules/node.bittrex.api/node.bittrex.api.js');
bittrex.options({
'apikey' : process.env.REACT_APP_BTREX_API_KEY,
'apisecret' : process.env.REACT_APP_BTREX_SECRET_KEY,
'verbose' : true,
'cleartext' : false,
'baseUrl' : 'https://bittrex.com/api/v1.1'
});
class App extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
bittrex.websockets.subscribe(['BTC-ETH','BTC-ANS','BTC-GNT'], function(data) {
if (data.M === 'updateExchangeState') {
data.A.forEach(function(data_for) {
console.log('Market Update for '+ data_for.MarketName, data_for);
});
}
});
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<br/>
<button onClick={this.handleClick}>Start WS Sub</button>
</div>
);
}
}
export default App;
I'm going to make GUI scraper with Electron & Nightmare.
However when I use just plain html/js as described in Electron quickstart, all works well.
But I'd like to make Electron app nicely by using Anugular2(angular-cli webpack).
I created project ng new Scraper then made some routes for components e.g. HomeComponent, SettingsComponent.
I installed nightmare in angular project folder by npm install --save nightmare
and I would like import it in SettingsComponent like:
import {Nightmare} from 'nightmare';
and use it like:
ngOnInit{
this.nightmare = new Nightmare({
show: true,
electronPath: require('node_modules/electron')
})
}
What have I tryied:
in index.html including
<script src="node_modules/nightmare/lib/nightmare.js"></script>
then in my component
declare var Nightmare: any;
ngOnInit(){
this.nightmare = new Nightmare({})
Gettings errors about missing other js files inside node_modules/nightmare/lib/*.js
CODE:
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scrape</title>
<base href="/">
<link rel="stylesheet" href="assets/semantic.min.css">
<script src="assets/require.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
component:
import { Component, OnInit } from '#angular/core';
declare var require: any;
var Nightmare = require('nightmare');
#Component({
selector: 'app-work',
templateUrl: './work.component.html',
styleUrls: ['./work.component.css']
})
export class WorkComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
error:
Failed to compile.
./~/nightmare/lib/nightmare.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\admin\Desktop\Scrape\node_modules\nightmare\lib'
# ./~/nightmare/lib/nightmare.js 18:11-35
# ./src/app/work/work.component.ts
# ./src/app/app.module.ts
# ./src/main.ts
# multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
It is possible to interact with Angular2/Nightmare inside Electron App?
I'm using the react engine react-engine on GitHub to create a node, express app with react for the views.
For the most part, my app is rendered on the server. However, on one page/express route I require the view to be rendered server-side and then for the React to be fully interactive on the client.
So far I've got the view rendering server-side and then being re-loaded/re-mounted by React on the client.
My problem is that I'm now getting the following error:
bundle.js:357 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <section data-reactroot="" data-reactid
(server) <section cl
Here's what my code looks like:
class FormCreate extends React.Component {
render() {
return (
<ReactBlank title="Create new application form" messages={this.props.messages} authUser={this.props.authUser}>
<script dangerouslySetInnerHTML={{
__html: 'window.PROPS=' + JSON.stringify(this.props)
}} />
<div id="app-content">
<Main {...this.props}/>
</div>
</ReactBlank>
);
}
}
FormCreate.propTypes = {
messages: React.PropTypes.array,
authUser: React.PropTypes.object,
form: React.PropTypes.object
};
module.exports = FormCreate;
The above is initially rendered on the server and then the following re-mounts it on the client:
var React = require('react');
var ReactDOM = require('react-dom');
var Main = require('./app/views/shared/builder/Main.jsx');
document.addEventListener('DOMContentLoaded', function onLoad() {
const propScript = document.getElementById('react-engine-props');
const props = window.PROPS;
ReactDOM.render(
<Main {...props} />,
document.getElementById('app-content')
);
});
Can anyone see a problem here?