Ad-hoc dashboard Answered
Hey everyone! π
I'm building an ad-hoc dashboard where users will display only data relative to their own member_id.
For this implementation I do use a front-end code in JS that calls a PHP script to retrieve data. Now, for security reason I would like the PHP to retrieve the memberstack member_id before responding with the data. Do you have any recommendation on the best way to acheive that?
I thought that I could pass the member_id with the JS function that calls the PHP script, but isn't there a risk that anyone could alter their own member_id and retrieve data of other members? I would like to avoid that.
Thank you in advance for any tip or info! π
I think I got how to do it by asking ChatGPT, but in order to test if that's safe. Is there a way I, as a user, can print the member_id in the console? π
Comments
18 comments
Hi Luc,
The script below prints member_id of a logged-in user in the console:
I took out a line of code that wasn't necessary from the code snippet, kindly use the updated code. Β Luca De Angelis
To make sure your server only responds to the user that's actually logged in, I'd recommend you to use JWT tokens.
You can obtain the token by using window.$memberstackDom.getMemberToken() , then you send it as a authentication header in your request to the backend. Your PHP can verify and decode the token to obtain the memberId the user send by using this REST service
You can learn more about tokens in this simple article
https://jujuontheweb.medium.com/simple-introduction-to-jwt-tokens-3f8d1a7ba880
Thank you Raquel Lopez! Chukwudi Onyekwere π Very helpful!
From the docs I don't fully understand where i should pass the token string in the PHP request. Maybe I miss it π
Because is a GET, try sending it as a queryParam in the url
Thank you! Raquel Lopez I tried to use the window.$memberstackDom.getMemberToken() in the code and in the console and it gives me the error window.$memberstackDom.getMemberToken is not a function. Could you share please how can I retrieve the token for a member?
Ah my bad, here's the correct fn $memberstackDom.getMemberCookie()
That works. Thank you! π For the REST API I just use Member stack API credentials from the devtools sections right?
Oh, I am afraid I misunderstood. I thought the API call would be launched from the PHP script, instead what you shared is for the front end...
The frontend sends the token to the backend. The backend decodes the token, process the data and returns the response to the frontend with the correct information.
So the browser would use this $memberstackDom.getMemberCookie()
And the backend would process the token internally with the verify token service
When Memberstack generates the token after login, the token gets stored in a cookie in the browser. So you need to send the request FROM the browser
Thank you Raquel Lopez. I m trying to run the code in js but it gives a few errors:
<script src="
https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
"></script>
Β but it still gives error. When removing the statement then it gives an error with regards to API_KEY = process.env.MEMBERSTACK_SECRET_KEY; =?Uncaught ReferenceError: process is not definedAny idea by chance on this? π Thank you so much for your support! I feel I am soooo close!
Well, basically the errors are clear. You need to look where the require and process are being used. process and require are methods that you use in a NodeJS environment.
I'm not sure if axios can be run in php, I gave you that example so you could translate it to your http client of your php server
You should be doing the request as php indicates like https://reintech.io/blog/php-curl-making-http-requests-in-php
Ahhh ok. Then the code was just an example. Actually my API request needs to be sent by my server inPHP. All clear! π
And you need to use your secret API key found in the Memberstack dashboard to be able to use the admin API.
Alright, I managed to send a POST API call with my admin private key.
I use the following endpoint = "https://admin.memberstack.com/members/verify-token?token=member_cookie" where the member_cookie is the cookie passed from the front end. But I get an object with {"data": null} .
Is it possible that I need to pass the token in another way other than in the url or that needs to be called differently?
Even if I pass it has header it won't work. It seems that the problem is the token, the API doesn't find any data for the provided token. I checked and the token is exactly the result of window.$memberstackDom.getMemberCookie();
I just checked here, but it's not very clear to me how should I pass the token in the call. But is it possible also that the cookie that I am passing is actually not the same thing as the token that is needed here?
You need to do a GET, not a POST. The token is stored in a Cookie, (localstorage or cookie). The method that I gave you would get it to you no matter where is stored in your browser. JWT tokens start with ey as your cookie should.
Remember that tokens expire, use a fresh token that's currently logged in in your MS app. If you log out you'll need to login again to insert a new token.
The only variables that you need to use to verify the token are the TOKEN, sending it as a url param and the SECRET API KEY sending it as header with the prop x-api-key. Is a GET method.
Hi Raquel Lopez I do use a fresh token (I take it directly after the log in) and encode it into the endpoint ( "https://admin.memberstack.com/members/verify-token?token=eyJhbGciOiJSUzI1NiIsInR5cCI6Ik....." => I checked and this works well). Then run a GET request with the secret api key (which works for the identifiaction) and get back still {"data": null} .
The code is very simple, but maybe is there something wrong? It seems the problem it's that the token that I send is not matching any member in the API call:
Hi Tyler Bell Chukwudi Onyekwere could please you check the REST endpoint for /verify-token? The documentation is not very clear and is not returning the member data π€
For those that find this thread later π
We improved the docs for verifying tokens here.
Thanks for updating the docs! π«Ά
Please sign in to leave a comment.