Open React Component into Personal Tab - reactjs

I created a custom team app, this app is split into 2 parts, one is a personal tab and the other is a messaging extension.
How can I open a React component of my app from a messaging extension Adaptive Card action?
I tried Action.OpenUrl but I have to pass some data from the messaging to the personal card and inside it retrieve the authentication token with the received data and it works but is not strongly authenticated by the browser.
With the link everyone can open and view the item and that's not what I have to do.
I thought about using Action.Submit and passing some data (token or data to get it) into it,
but I don't know how to retrieve the data passed from sending the messages and then pass them to the personal card with http post (if possible) or how to pass the token to the tab.
I think this flow is safer. Can someone help me?

Currently Teams does not support passing parameters without using query parameters.
Could you please raise a user voice.

Related

I want to make a User to User Private Live Chat App with React & Django

I'm really confused about that. I want to make a user to user chat app on my project with Django and React. I've tried create a model and fetch messages with Rest Framework API. But that's not what i need.
I need to live chat between just two users. When a user send a message to me i want to display that instantly (without click anywhere) like Whatsapp. When i try this with DRF i can get messages and save them inside to useState. But i must to refresh page for display new messages. I don't want to this. I don't want to refresh to page.
How can i do that? I saw Django Channel but i don't know can i use this for just between two user's private messaging. Also i don't know how to set this on React JS.
Can anyone help me? I just need your opinions. I can try your opinion. You don't have to write code for me.
You have to use web sockets if you want to display data live.
So, for example, someone sent a message to the server and the server instantly send it to the socket target.
Here is the simple chat application wrote with socketio, you just have to follow it step by step https://socket.io/get-started/chat

How to pass query string from Shopify to an embedded app?

I'm building a Shopify app with Next.js and I need to grab the query string so I can check in getServerSideProps the identity of the merchant (bear in mind that Cookies are not recommended for Shopify apps)
When visiting some apps I noticed some of them are getting the query string passed down from Shopify in each request.
This image shows how it should look on each request
This image shows how my app behaves
In this image you can see that when you hover the routes no query strings are present, meaning that are passed somehow by the parent app.
As of right now I'm using a Cookie to pass the shopOrigin but I feel like it's not necessary if somehow I'm able to get the query string in each request, also with the HMAC I will be able to verify that the requests are coming from Shopify.
Any calls to your App originating from Shopify properly provide the shop parameter when they make requests. In your own App calls to itself, you would also likely be using the shop name as a query string value.
Note that you are still able to validate your sessions internally using a cookie, you just don't do it via the third-party route, outside the iframe, like we used to. Shopify has plenty of documentation on how to properly authenticate, and construct Apps, check them out. They even give you a working Node App to play with, so you can ensure you get it right.
The solution was pretty straightforward.
Shopify provides a TitleBar AppBridge component that you can use to to handle the App's navigation. What it does is that on each route change it reloads the iframe and the hmac, shop, code and timestamp are coming in the request. It's a tad slower then client side routing but it works as expected.
In order to use it you just need to go to:
Partner's dashboard / Your App / Extensions / Embedded App (click Manage) / Navigation (click Configure) and add navigation links, then you just need to import TitleBar from app-bridge-react and put it in index.js

Rendering a React Widget on third party site

i'm looking for some advice on how I should go about creating my next project. I would like to create an app that allows users to embed widgets on their own personal sites. An example would be, the user could create events on my app, and then copy code to embed on their site that would display the events.
My hope was that I would be able to give them a minfied/uglified script that would handle fetching their data from my app's api, and even possibly allowing someone using the widget to post data to my app. Is that feasible?
What I am really unsure of :
1) How would I handle fetching data from my server? Are there CORS/other concerns I need to handle when fetching it?
2) I dont want users to have to go to a url to render my code, I just want to provide the minfied/uglified/compiled to es5 code to them. How do I go about doing that?

Rendering Just one module/state of Angular app

I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.

How to provide WebView of React-Native-app with user authentication data?

I’m currently developing a web app using ReactJS and Firebase, it is going to be some kind of a forum.
Despite minor bugs, the ReactJS-part is done and works.
Currently, to provide a better user experience, I am working on hybrid apps with React-Native and implement OneSignal as a way to send push notifications everytime a user opens up a new thread or his/her own thread is commented.
My question;
is there a way to save time and 'recycle' my ReactJS-WebApp when loading it inside a React-Native WebView BUT providing the WebView with the user authentication data from the React-Native-login?
What I want to accomplish is being able to recieve push notifications (which needs the user to be logged into the app) without having him to login a second time inside the WebView.
[I read about those mixed hybrid apps when getting familiar with PhoneGap and how the folks at Basecamp thought about it, but I have no idea how to accomplish it. I think about the need of building a middleware/adapter/magic-thing to load different scenarios of my ReactJS-app depending on the request coming from an ordinary browser or an React-Native-app.] Thank you so much in advance!

Resources