我对如何使用弹出窗口 (window.open) 在 React 中实现 OAuth 很感兴趣.
例如我有:
主要问题是如何在 window.open (弹出窗口)和 window.opener 之间创建连接(众所周知,window.opener 由于交叉而为空)域安全,因此我们不能再使用它了).
⇑ window.opener 每当您导航到不同的主机时都会被删除(出于安全原因),没有办法绕过它.如果可能的话,唯一的选择应该是在一个框架内付款.顶部文档需要保留在同一主机上.
方案:
可能的解决方案:
代码:
oauth-popup.tsx:
import React, {PureComponent, ReactChild} from 'react'类型道具 = {宽度:数字,高度:数字,网址:字符串,标题:字符串,onClose: () =>任何,onCode: (params: any) =>任何,孩子?:ReactChild,}导出默认类 OauthPopup 扩展 PureComponent;{静态 defaultProps = {onClose: () =>{},宽度:500,身高:500,网址:",标题: ""};外部窗口:任何;代码检查:任何;组件WillUnmount() {如果(this.externalWindow){this.externalWindow.close();}}createPopup = () =>{常量 {url, 标题, 宽度, 高度, onCode} = this.props;const left = window.screenX + (window.outerWidth - width)/2;常量顶部 = window.screenY + (window.outerHeight - 高度)/2.5;const windowFeatures = `toolbar=0,scrollbars=1,status=1,resizable=0,location=1,menuBar=0,width=${width},height=${height},top=${top},left=${左}`;this.externalWindow = window.open(网址,标题,窗口特点);常量 storageListener = () =>{尝试 {if (localStorage.getItem('code')) {onCode(localStorage.getItem('code'));this.externalWindow.close();window.removeEventListener('storage', storageListener);}} 抓住 (e) {window.removeEventListener('storage', storageListener);}}window.addEventListener('storage', storageListener);this.externalWindow.addEventListener('beforeunload', () => {this.props.onClose()}, 错误的);};使成为() {返回 (<div onClick={this.createPopup)}>{this.props.children}</div>);}}app.tsx
import React, {FC} from 'react'const onCode = async (): Promise<undefined>=>{尝试 {const res = await <your_fetch>} 抓住 (e) {控制台.错误(e);} 最后 {window.localStorage.removeItem('code');//从localStorage中删除代码}}const App: FC = () =>;(I'm interested in how to implement OAuth in React using popup (window.open).
For example I have:
The main question is how to create connection between window.open (popup) and window.opener (as it's known the window.opener is null due to cross-domain security therefore we can't use it anymore).
⇑ window.opener is removed whenever you navigate to a different host (for security reasons), there is no way around it. The only option should be doing the payment in a frame if it is possible. The top document needs to stay on the same host.
Scheme:
Possible solutions:
So what's the best recommended approach in 2019?
Wrapper for React - github/Ramshackle-Jamathon/react-oauth-popup
解决方案
Suggested by Khanh TO. OAuth popup with localStorage. Based on react-oauth-popup.
Scheme:
Code:
oauth-popup.tsx:
import React, {PureComponent, ReactChild} from 'react' type Props = { width: number, height: number, url: string, title: string, onClose: () => any, onCode: (params: any) => any, children?: ReactChild, } export default class OauthPopup extends PureComponent<Props> { static defaultProps = { onClose: () => {}, width: 500, height: 500, url: "", title: "" }; externalWindow: any; codeCheck: any; componentWillUnmount() { if (this.externalWindow) { this.externalWindow.close(); } } createPopup = () => { const {url, title, width, height, onCode} = this.props; const left = window.screenX + (window.outerWidth - width) / 2; const top = window.screenY + (window.outerHeight - height) / 2.5; const windowFeatures = `toolbar=0,scrollbars=1,status=1,resizable=0,location=1,menuBar=0,width=${width},height=${height},top=${top},left=${left}`; this.externalWindow = window.open( url, title, windowFeatures ); const storageListener = () => { try { if (localStorage.getItem('code')) { onCode(localStorage.getItem('code')); this.externalWindow.close(); window.removeEventListener('storage', storageListener); } } catch (e) { window.removeEventListener('storage', storageListener); } } window.addEventListener('storage', storageListener); this.externalWindow.addEventListener('beforeunload', () => { this.props.onClose() }, false); }; render() { return ( <div onClick={this.createPopup)}> {this.props.children} </div> ); } }app.tsx
import React, {FC} from 'react' const onCode = async (): Promise<undefined> => { try { const res = await <your_fetch> } catch (e) { console.error(e); } finally { window.localStorage.removeItem('code'); //remove code from localStorage } } const App: FC = () => ( <OAuthPopup url={<your_url>} onCode={onCode} onClose={() => console.log('closed')} title="<your_title>"> <button type="button">Enter</button> </OAuthPopup> ); export default App;
更多推荐
OAuth 弹窗跨域安全 React.js
发布评论