我想了解如何使Hello.js与React.js一起工作,特别是自定义事件处理程序hello.on
由于我是React.js的新手,我不明白如何将非React事件绑定到app流程中.
我尝试将事件处理程序放在componentDidMount处理程序中
handleClick(){ hello('twitter').login(); } componentDidMount(){ hello.on('auth.login',function(auth) { // Call user information,for the given network hello(auth.network).api('/me').then(function(r) { console.log(r); }); }); hello.init({ 'twitter' : 'J1jqqO50tcLtLx8Js0VDitjZW' },{ redirect_uri:'/',oauth_proxy: 'https://auth-server.herokuapp.com/proxy' }); }
谢谢
解决方法
3年后:
您需要一个用于身份验证的类,例如:
import * as React from "react"; import * as hello from "hellojs"; import { Event } from "../interfaces/Event"; export class Authentication extends React.Component<{},{ sendEvent: boolean }> { constructor(public props,public context) { super(props,context); this.state = { sendEvent: true }; } public login(network) { hello.init({ aad: { name: "Azure Active Directory",oauth: { version: 2,auth: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",grant: "https://login.microsoftonline.com/common/oauth2/v2.0/token" },// Authorization scopes scope: { // you can add as many scopes to the mapping as you want here profile: "user.read",offline_access: "" },scope_delim: " ",login: p => { if (p.qs.response_type === "code") { // Let's set this to an offline access to return a refresh_token p.qs.access_type = "offline_access"; } },base: "https://www.graph.microsoft.com/v1.0/",get: { me: "me" },xhr: p => { if (p.method === "post" || p.method === "put") { JSON.parse(p); } else if (p.method === "patch") { hello.utils.extend(p.query,p.data); p.data = null; } return true; },// Don't even try submitting via form. // This means no POST operations in <=IE9 form: false } }); hello.init( { aad: "ClientID" },{ redirect_uri: "YOUR REDIRECT_URI",//redirect_uri: 'https://localhost:4321/temp/workbench.html',scope: "user.read" } ); // By defining response type to code,the OAuth flow that will return a refresh token to be used to refresh the access token // However this will require the oauth_proxy server hello(network) .login({ display: "none" }) .then( authInfo => { console.log(authInfo); localStorage.setItem("logged",authInfo.authResponse.access_token); },e => { console.error("Signin error: " + e.error.message); } ); } //when the component is mounted you check the localstorage //logged ==> undefined you call login and save a token in localstorage //logged ==> with a token -> setEvent call a function that use graph api public componentDidMount() { let logged = localStorage["logged"]; if (logged === undefined) this.login("aad"); else { if (this.state.sendEvent) { this.props.setEvent(null); this.props.setEvent(Event.GET_ALL_USERS); } } } public render() { return null; } }
文件名是auth.tsx,你可以在main react类中调用这个类:
export class mainClass extends React.Component{ ...... ...... private getEvent = (event) => { this.setState({ event: event }); //HERE YOU recive the event when auth is ready } public render(){ <Authentication setEvent={this.getEvent} /> } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。