OAuth পপআপ ক্রস-ডোমেন সুরক্ষা React.js

Question

আমি কীভাবে পপআপ ( window.open) ব্যবহার করে প্রতিক্রিয়াতে OAuth প্রয়োগ করতে আগ্রহী ।

উদাহরণস্বরূপ আমার আছে:

1. mysite.com - আমি এখানে পপআপ খুলি।
2. passport.mysite.com/oauth/authorize - পপআপ

মূল প্রশ্নটি কীভাবে window.open(পপআপ) এবং window.opener(যেমন এটি উইন্ডোটিপেনার হিসাবে পরিচিত তা ক্রস-ডোমেন সুরক্ষার কারণে বাতিল হয়ে যায় তাই আমরা আর এটি ব্যবহার করতে পারি না)।

Whenever window.openerসরানো হয় যখনই আপনি অন্য হোস্টে যান (নিরাপত্তার কারণে), এর আশেপাশে কোনও উপায় নেই। যদি সম্ভব হয় তবে একমাত্র বিকল্পটি কোনও ফ্রেমে অর্থ প্রদান করা উচিত। শীর্ষ নথির একই হোস্টে থাকা দরকার।

পরিকল্পনা:

সম্ভাব্য সমাধান:

1. এখানেsetInterval বর্ণিত ব্যবহার করে একটি খোলা উইন্ডো চেক করুন ।
2. ক্রস-স্টোরেজ ব্যবহার করা (এটি ইমোয়ের পক্ষে উপযুক্ত নয়)।

---

তাহলে 2019 এর সেরা প্রস্তাবিত পদ্ধতির কী?

প্রতিক্রিয়াটির জন্য মোড়ক - https://github.com/Ramshackle- জামাথন /react-oauth-popup

Comments

2019 সালে লোকালস্টোরেশন সমর্থনটি আরও ভাল। আমি localStorage পদ্ধতির (বর্ণিত সঙ্গে যেতে হবে stackoverflow.com/questions/18625733/... ) হিসেবে এটা অনেক একটি ওয়ার্কঅ্যারাউন্ড মত মনে হচ্ছে না। সন্তানের উইন্ডোর স্থিতি পরীক্ষা করার জন্য প্যারেন্ট উইন্ডোকে পর্যায়ক্রমে প্রয়োজন হয় না। setIntervalলোকালস্টোরেজের জন্য ফ্যালব্যাক হিসাবে ব্যবহার করা যেতে পারে

— থেকে

@ খানটটো, হ্যাঁ, আমি আপনার সাথে সম্পূর্ণরূপে একমত localStorage, তবে এটি কেবল একই ডোমেনের জন্য কাজ করে তাই এটি আমার অবস্থাতে কাজ করে না

— আর্থার

ওআউথ দিয়ে শেষ করার পরে, শিশু উইন্ডোটি আপনার ডোমেনে পুনঃনির্দেশিত করা হয়েছে, আপনি এখন পিতামাতার সাথে একই ডোমেইনে

— খান টু

@ খানহটো, এইচএম, এটি দুর্দান্ত ধারণা! আমার জানা উচিত ছিল ..

— আর্থার

এটি আরও ভাল হবে যদি ব্রাউজারটি window.openerআমাদের ডোমেনে পুনঃনির্দেশের পরে পুনরুদ্ধার করে , তবে এটি হয় না

— খান টু

Answer 1

পরামর্শ দিয়েছেন খান টো । লোকালস্টোরেশনের সাথে ওআউথ পপআপ। প্রতিক্রিয়া-ওউথ-পপআপ উপর ভিত্তি করে ।

পরিকল্পনা:

কোড:

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;

Answer 2

আমি একবার আমার ওআউথ লগইন প্রবাহে উইন্ডোজ.ওপেন / উইন্ডো.ওপেনার বাগের সাথে এমএস-এজ এ সমস্যার মুখোমুখি হই

এই ইস্যুটির আগে আমার প্রবাহ ছিল

• লগইন বোতামে একটি পপআপ খুলুন ক্লিক করুন
• সফল লগইন করার পরে ওউথ অ্যাপ্লিকেশনটি আমার ডোমেনের পৃষ্ঠাতে পুনর্নির্দেশ করুন
• তারপরে আমি পপআপ (উইন্ডো.ওপেনার.ফএন) এর সাথে ওউথ প্রতিক্রিয়া এবং প্যারেন্ট উইন্ডোতে ডেটা সহ প্যারেন্ট উইন্ডোটির একটি ফাংশন বলি এবং তারপরে শিশু পপআপ উইন্ডোটি বন্ধ করে দিন

এই সমস্যাটির পরে আমার প্রবাহ ছিল

• লগইন বোতামে একটি পপআপ খুলুন ক্লিক করুন
• ক্ষেত্রে একটি সেটিনটারওয়াল তৈরি করুন (উইন্ডো.পেনার অপরিজ্ঞাত)
• সফল লগইন করার পরে ওউথ অ্যাপ্লিকেশনটি আমার ডোমেনের পৃষ্ঠাতে পুনর্নির্দেশ করুন
• উইন্ডো.পেনার পাওয়া যায় কিনা তা পরীক্ষা করে দেখুন উপরের প্রবাহ এবং ক্লিয়ারইন্টারভাল থেকে # 3 করুন
• যদি উইন্ডো.পেনারটি উপলভ্য না থাকে তবে আমি যেহেতু আমার ডোমেন পৃষ্ঠাগুলিতে আছি সেহেতু আমি স্থানীয় স্টোরেজ সেট করার চেষ্টা করি এবং প্যারেন্ট উইন্ডোতে সেটআইন্টারভাল ফাংশনটির ভিতরে থেকে লোকালস্টোরেজটি পড়ার চেষ্টা করি তবে লোকাল স্টোরেজ এবং সেটআইন্টারভালটি সাফ করে এগিয়ে যেতে হবে।
• (পিছনে সামঞ্জস্যের জন্য) যদি স্থানীয় স্টোরেজগুলিও উপলভ্য না থাকে তবে একটি ক্লায়েন্ট সাইড কুকি একটি সংক্ষিপ্ত মেয়াদোত্তীকরণ (5-10 সেকেন্ড) সময় সহ ডেটা সহ সেট করুন এবং প্যারেন্ট উইন্ডোতে সেটআইন্টারভাল ফাংশনের ভিতরে কুকি (ডকুমেন্ট.কুকি) পড়ার চেষ্টা করুন এবং এগিয়ে যান।