Shopify non - embedded apps - javascript

I want to make Shopify non - embedded apps, I have installed the pre-built code which Shopify provides to build an embedded app. In the server.js file, after the user installs our app, it gets the access Token successfully. In order to make an API request to graphql server, it requires the access token to the headers. I am struggling with this point, I don't know how to get that access token from the backend and make API calls on the frontend, I want to use Apollo Client to show query data on the frontend, but I don't know how to use that accessToken after the merchants install the app, it has generated it in the server.js file, which is the backend. Are there any tutorials or docs on what I am trying to achieve.

It seems like this is going to apply for any type of front-end that you're using and isn't specific to Apollo, have you tried checking the related doc? If so, add the relevant code to your question 🤠

Related

Azure AD Authentication on React Frontend with Node.js Backend

I would like to add an Azure AD configuration to my React&Node.js project. What I want is to log in on Frontend using Azure AD and then send a request with f.e axios to my backend written in Node.js, so that Node.js knows that the user is logged in and can perform the request. I was reading tutorials/documentation on Microsoft site for all day, but I still don't know how and where to start. Basically, almost every Microsoft Tutorial is either to call a Microsoft Graph API from Node.js or from React.js. I completely do not want to use Microsoft Graph. I just want to have simple login on frontend and protected endpoints from un-logged user on backend. The other tutorials that I find are too complicated f.e https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/1-call-api . I understand the concept of App registration, client id, tenant id and etc. but I simply don't know how to write a code that: login, send the request with token - then is accepted/declined by Node.js .
If by any chance, somehow did an application like that, or can provide me a link to a well written tutorial, so I would understand and recreate it in my scenario, I would be grateful.

How to query GitHub api v4 from client side javascript?

I'd like to make a small web app using only client side javascript, that is publicly available on GitHub and hosted via GitHub Pages, that renders information about the different repositories of an organization on GitHub.
Is this possible to do in such a way that:
allows me to authenticate with GitHub without compromising a secret key,
allows me to query GitHub's new graphql api?
In both cases, the docs seem to suggest that the answer to my questions are "no" and "no":
for example, the authentication docs emphasize how to authenticate on the CLI, but I don't find anything on authenticating from a web page via javascript -- is there really no way to do this securely from only the client? Is a server required for this?
for example, the api v4 docs seem to only mention how to call the graphql endpoint via cURL or by using their GraphQL Explorer
I'm seeking guidance here in the hopes that I'm misreading the docs, and that there really is a way to:
build a static-site that authenticates with GitHub for the increased query rate limit size,
and that, when a user visits the page, queries the v4 api and displays the appropriate information about the current status of the various repos of an organization.
I ignored the documentation and just submitted a POST with a Basic Authorization header. It seemed to work. I found the other issue. Github wants a User-Agent header. If you are running in a browser that happens automatically, but if you are not you need to add it yourself. Github documents what should be in it, but apparently does not validate it.

Get access to DocumentDB with JS

I'm developing an app, which should connect to an external DocumentDB database (not mine). The app is build with Cordova/Ionic.
I founda JavaScript library from Microsoft Azure in order to ensure a DocumentDB database connection, but it is asking for some weird stuff like collection_rid and tokens.
I've got the following from the guys of the external DocumentDB database:
Endpoint: https://uiuiui.documents.azure.com:443/
Live DocumentDB API ReadOnly Key: P8riQBgFUH...VqFRaRA==
.Net Connection String: AccountEndpoint=https://uiuiui.documents.azure.com:443/;AccountKey=jl23...lk23==;
But how am I supposed to retrieve the collection_rid and token from this information?
Without row-level authorization, DocumentDB is designed to be accessed from a server-side app, not directly from javascript in the browser. When you give it the master token, you get full access which is generally not what you want for your end-user clients. Even the read-only key is usually not what you want to hand out to your clients. The Azure-provided javascript library is designed to be run from node.js as your server-side app.
That said, if you really want to access it from the browser without a proxy app running on a server, you can definitely do so using normal REST calls directly hitting the DocumentDB REST API. I do not think the Azure-provided SDK will run directly in the browser, but with help from Browserify and some manual tweaking (it's open source) you may be able to get it to run.
You can get the collection name from the same folks who provided you the connection string information and use name-based routing to access the collection. I'm not sure exactly what you mean by token but I'm guessing that you are referring to the session token (needed for session-level consistency). Look at the REST API specs if you want to know the details about how that token gets passed back and forth (in HTTP headers) but it's automatically taken care of by the SDKs if you go that route.
Please note that DocumentDB also provides support equivalent to row-level authorization by enabling you to create specific permissions on the desired entities. Once you have such a permission, you can retrieve the corresponding token, which is scoped to be valid for a certain time period. You would need to set up a mid-tier that can fetch these tokens and distribute to your user application. The user application can then use these tokens as bearer-tokens instead of using the master key.
You can find more details at https://msdn.microsoft.com/en-us/library/azure/dn783368.aspx
https://msdn.microsoft.com/en-us/library/azure/7298025b-bcf1-4fc7-9b54-6e7ca8c64f49

Implementing Facebook's Graph API without user authentication

I'm newbie to Facebook Graph API and Facebook JavaScript SDK but I'd like to know some things:
Is there any way to put my Access Token in a Open Source application without actually showing it? I'm using GitHub and for security purposes I'd like to make it private.
Can I show my user information without asking the users to Authenticate themselves?
Where in Facebook Developers App can I allow more "scopes" to share publicly? For example, user_photos, user_posts, user_likes, user_status, etc...
These "scopes" that Facebook allows by default are actually the information I'm getting from the user while I'm Authenticating them right?
Just to clarify what I'm trying to do, I want to share things about my Facebook Account through the Facebook Graph API in the gh-pages branch on GitHub, but I don't like the idea of having to authenticate every single user that has access to the page.
I'd like to make my user information public, but don't want to show my access token, because it's Open Source and it can get dangerous eventually.
If you'd like to see my repository and have a better understanding of the project. You can access https://github.com/iszwnc/rye
If I recap:
you don't want to share your app access token (good!),
you don't want your users to authenticate.
Basically, you can't hide your token and let your users query Facebook directly. You need some server-side code on a machine that would be the only one reaching Facebook. Your server would play the role of an interface between Facebook and your users. So you will have to:
do the API calls from a server using server-side code (i.e. Node.js),
save the information you want in a database. This is optional but better to avoid the same information to be retrieved multiple times, thus avoiding your future 100 users to (voluntarily or not) reach your app API limit.
let the users query your server using some client-side code (i.e. AngularJS) in order to retrieve what you and only you know (remember, you own the token).
About Github, don't share your token on it. People can generate their own token if they want to run your app. Here are several suggestions:
Add your token to an environment variable which you can set just before launching the app (don't forget to mention that in your README),
Add your token to a file:
Create a credentials.js file that contains an empty token:
// Please use your own token
var APP_TOKEN = '';
Commit the file to Github,
Have a .gitignore file that contains the credentials.js,
var APP_TOKEN = 'now-you-can-put-your-token-here';
Good luck with your project, it looks exciting :-)

MeteorJS with a custom OAuth2 provider

I have a custom OAuth2 server that I set up in Rails using Doorkeeper. It works great with my Rails apps and NodeJS/AngularJS apps. I pass an account ID and redirect URI to the server, it sends back a code, which I then send again to get a token with user information.
I am trying to find a guide or basic code I can alter to allow it to login with my own server. Unfortunately I can't find any guides for this or standalone OAuth2 packages for Meteor that have documentation.

Categories

Resources