I'm using ReactJs on the frontend, I just tried to generate a cloudfront signed url through AWS.CLOUDFRONT.SIGNER class using getSignedUrl() method, but it says "createSign is not implemented in the browser".
Please tell me if this is the right approach to do so, I want to stream a video from Aws in my React app, Thanks.
The createSign is not implemented in the browser is correct. This is an operation that requires authentication, so if your credentials (such as your access key) is in your web application, then that key will be exposed to any client that loads the page.
You should create a back-end service that conceals this key, and then expose endpoints on that service to create and return the signed URL.
See this similar question and answer.
(client) (backend service) (aws)
| POST /create-signed-url | |
|===============================>>| |
| | aws-sdk getSignedUrl() |
| |=========================>>|
| | |
| | new signed url |
| |<<=========================|
| signed url | |
|<<===============================| |
| | |
Related
Our requirement is to set up auth through ADFS.
The IdentityServer is for logging in.
We need the ADFS because we a SharePoint and we have multiple Claim Providers.
What we try to do:
SPA <--> ADFS <--> IdentityServer
URLS
SPA: https://example.com/app
ADFS: http://fedsrv.example.com/adfs
ID: https://idp.example.com/spa
ADFS
In ADFS we set up an application Group: OIDC_SPA with a native application Portal and a Web API Portal.
The native app does have a client ID: example and a redirect URI:
https://example.com/app
The Web API does have a Relying party identifiers: example,
has Permit everyone policy
and a transform rule PT all : x:[] => issue(claim = x);
and Client Permission allatclaims, opened and profile
The Claims Provider Trust is configured as following:
CP Federation metadata URL: https://idp.example.com/spa/wsfed/FederationMetadata/2007-06/FederationMetadata.xml
The CP identifier is https://idp.example.com/spa
WS-Fed Passive Endpoints is: https://idp.example.com/spa/wsfed
we also set the AnchorClaimType:
set-adfsclaimsprovidertrust -targetidentifier https://idp.example.com/spa -AnchorClaimType http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name
and for home realm mapping:
Set-AdfsWebApiApplication -TargetName OIDC_SPA -ClaimsProviderName "<CP name>"
IdentityServer
We added a client with ClientID http://fedsrv.example.com/adfs/services/trust
ProtocolTyp: wsfed
RelyingParties:
| Field | Value |
|--------------------------|--------|
| Realm | http://fedsrv.example.com/adfs/services/trust |
| TokenType | urn:oasis:names:tc:SAML:2.0:assertion |
| SignatureAlgorithm | http://www.w3.org/2001/04/xmldsig-more#rsa-sha256 |
| DigestAlgorithm | http://www.w3.org/2001/04/xmlenc#sha256 |
| SamlNameIdentifierFormat | urn:oasis:names:tc:SAML:1.1:nameid-format:unspecified |
IdentityResources
There is opened and profile configured.
did we forget something or did we configure something wrong?
the problem was, that the claims were not correctly mapped in the Application Group and Claims Provider trust.
How does the flow of data takes place between Reactjs , Apollo Server , Graphql and GRPC backend . I have to implement all this tech stack can't figure out , how the communication or the data flow happens from UI to backend using Apollo server where backend(GOlang) is using GRPC . And UI is on ReactJS ? And also how it gets connected to db ?
Typically, you'd use ReactJS with Apollo client to connect to an Apollo Server. The Apollo Client will talk to the Apollo Server using GraphQL queries and mutations.
Not sure where the gRPC back-end would sit in this case. But you would typically put the Apollo Server between your client and other external services/databases. Same goes for the database.
------------------------------------------
| ReactJS with Apollo Client (front-end) |
------------------------------------------
|
GraphQL
|
----------------------------
| Apollo Server (back-end) |
----------------------------
| |
DB connector gRPC connector
| |
------------ -----------------
| Database | | gRPC back-end |
------------ -----------------
I'm trying to create a platform using angularjs (web), ionic (mobile) and expressjs (backend), the communication through REST. Angular and Node has differents servers.
.-----------. .----------. .-----------.
| SERVER A | | | | SERVER B |
| ANGULAR | <--> | REST | <--> | NODE |
| PORT 3300 | | | | PORT 3000 |
'-----------' '----------' '-----------'
The problem for me, is how to integrate socket.io in angular (or ionic) to communicate with the backend (for the chat part).
All examples that i see, they return an html page in the response. for example:
app.get('/', function(req, res){
res.sendfile('index.html');
});
What I want exactly, is how to send a messages from front to backend (for example to localhost:3000/users/chat knowing that i'm runing my angular project on localhost:3300), how to handle that messages from server, and how to response to them using socket.io
Background:
You have an email mime that has this structure -
_multipart/mixed______________________
| |_ multipart/alternative
| | |_ content-type: text/plain
| | |_ content-type: text/html
| | |_ content-type: text/calendar
| |
| |_ content-type: application/ics : Here the same ics file is added as
| an attachment with base64 encoding.
|_______________________________________
The above mime is same as google calendar's event invitation email.
Problem:
Now, if you try sending this mime programatically via GMAIL's REST api, then on the recipient's end, the mime received does not have the text/calendar part in it. As a result of this issue, the recipient's client will not be able show special event action buttons (yes, no & maybe).
Few Observations:
1) If you check the mime of the same email from your sent folder, then you will get the text/calendar part in it.
2) If you do this whole experiment (having the same mime) via google's SMTP protocol, then everything will work fine.
What steps will reproduce the problem?
1) Create a google calendar event from account A and invite account B
1.1) Send the invitation email to B
2) Open B's email account and check for the invitation email
2.1) Download the invite.ics attachment from it.
3) Now, try composing programatically an email with the same mime structure that B got from google and use the above invite.ics.
4) Try sending it from A's account to B via REST api.
At B's side, if you open the email ("show original" part), then the text/calendar will be missing now. Now, if you do the same thing via SMTP, then you will not face this issue.
What is the expected output? What do you see instead?
Expected: The mime should have been intact and should have the text/calendar part in it.
Reality: The text/calendar part was missing.
I mean to say how the flow should be between my client and server and github server. Starting in OAuth only I am not getting it and also I am stuck in an error for making get request. From where should I make the get request, client or server for OAuth. What is a better practice?
First take a look at this diagram (Made by me with draw.io).
Diagram explained:
As you can see there is no reference to MEAN stack in this diagram because this doesn't have anything to do with language preferences you choose.
Your client could be Angularjs | jQuery | ReactJS | ember | knockout | backbone | iOS |
Android| ....
Your server could be : node.js | php | python | java | ruby|.... .
Your database could be : mongodb | mysql | postgresql | couchdb|....
Understanding OAuth API:
OAuth API allow users to simply login from one app to another with the same credentials based on one place.
Furthermore it allows Single Sign On easily on different client apps.
The basic behind OAuth relies on one sign up and many log-ins.
Couple years ago, when you wanted to login to an app or a service you would have to sign-up.
then if you wanted login to a different service you would have to sign up again with obviously the same details ( Email, Birthdate, Username, Password, Photo, Gender... ) just to a different service.
That is madness, and made us as users impatient, writing those details every single time.
That was long time ago and now:
You sign up once to Facebook | Google Plus | GitHub | Twitter , and you can simply login to a different app or a service with those credentials powered by those companies, in return those companies will supply you as a software provider those details ( Email, Photo, Gender, Username, Friends, Followers ) which is a lot of data in less effort for the user himself.
After you have basic understanding of OAuth: Lets move on to the FLOW:
I'm going to write the flow by phases:
First Action:
User opens your app.
Second Action:
User can pick log-in with GitHub | Most likely you would also offer him to sign-up with his email.
Third Action:
User picks github login -> a popup by github is opened.
Three possibilities:
A) User has an account and logged in.
-> Simply press accept, GitHub returns a callback with Access Token, and generic data about the user.
B) User has an account and not logged in.
-> Simply enters login credentials (Email | Username & Password) -> Phase A.
C) User doesn't have an account.
-> User sign up to Git Hub -> Phase B -> Phase A.
Now: you have couple of actions needs to be taken:
In GitHub you have to supply information about -> Successful Login Redirect.
That means: URL to redirect after successful login.
When you fill that url in the settings, after the user has logged in, he will be automatically be redirected to that URL and with that request will be sent his details.
As soon as you get the details from GitHub API, you would want to save the user into the database on your server.
Why?
So the actions made by the user on your app will be saved.
Basically, I save everything: Data and Access Token.
Why do I need access token?
If you ever wanted to make actions on his GitHub profile, for example fork new repos, or follow other members, you would have to use this access token.
If I left anything unclear, I'd be more than happy to explain more.
#linial