Developers
andrew_taft
—
2016-04-05T12:58:56-04:00 —
#1
Is there any way to configure a Playlyfe Client to bypass the login process completely in a front-end only javascript app? I don't want users to have to set up Playlyfe accounts, but I also don't have access to write server-side code for the JWT. I read the "Create users manually" post, which covers the covers the need for not having to have Playlyfe accounts, but I don't see any way around the JWT. This is in a secured intranet environment, so I'm not worried about someone hacking or ripping off the Client ID in order to become a Jedi-level master of the app.
khs
—
2016-04-06T15:03:33-04:00 —
#2
Hi Andrew, Welcome to Playlyfe.
Although I'd still not recommend it, there might be a way to do this by using a re-purposed nodejs sdk and using webpack or browserify to package it for front-end. You might need to make a few changes to the sdk though:
-
request-promise
library can be replaced with a fetch
/jquery
or any other ajax library,
- remove dependencies on
-
Promise
(optional - only required if you use promises)
-
jwt
(which you won't even need)
Hope it helps...
andrew_taft
—
2016-04-06T20:01:55-04:00 —
#3
I understand that many people need security and can see why it's not always a "recommended" practice. On the other hand, I can imagine a lot of applications for this that don't really require security. Unfortunately, this is a requirement for my company and we can't take the recommended workaround right now. Thanks so much for your help! If anything changes, then we'd love to use the API.
peter_john
—
2016-04-07T02:07:10-04:00 —
#4
Hi Andrew,
You can bypass login from front-end app easily using the JWT flow. You don't even need a server for this. What our JWT flow normally does is it generates an new JWT token in the backend and sends it to the frontend and then the frontend makes requests to our servers using that token and using playlyfe-js-sdk. What you need to do is the part where we generate the token on our server side you can do it in the frontend side since there is going to be no security issues.
According to this doc https://github.com/playlyfe/playlyfe-node-sdk#3-custom-login-flow-using-jwtjson-web-token.
This is our code for generating a new JWT token which can be understood by our servers,
But it has only access to player.runtime scopes so you wont be able to create a user/player.
If this doesn't work for you then you can directly use our client credentials flow when you directly embed the client_id and client_secret in your frontend js code and make a post request to our auth endpoint to get the token and use that in subsequent requests and you need cache this token in your localStorage or cookie and refresh it manually when it expires.
andrew_taft
—
2016-04-07T13:59:09-04:00 —
#5
It doesn't look like I can createJWT on the frontend because it requires the jsonwebtoken nodejs package: https://github.com/playlyfe/playlyfe-node-sdk/blob/master/lib/playlyfe.js#L60
I'm not familiar with re-purposing nodejs on the frontend. Plus, if there's no way to create a user, then it's a moot point anyhow. What I want to do is automatically create a user if they're not already a user. Thus, the client credentials flow is also not possible because the users would balk at having to create an account. Please let me know if I'm missing anything here.
It appears that we'll have to have a server if we want to use this API. It's a really great looking API, so we might just do that, but it's above my level so I'm going to have to pass this onto a more skilled developer if we can get the time/money for that.
Thanks so much!
andrew_taft
—
2016-04-07T19:32:11-04:00 —
#6
OK, I have a nodejs server and am successfully passing a token to the frontend and am able to use the runtime api.
How can I use the "admin" route? I keep getting an access denied message with every client I try. When I create a Client on the Playlyfe website, all 4 types have the "Game Admin" scope X'd out for both Read and Write. I've tried the Client Credential Flow on the backend and JSON WebTokens on the frontend
For the JWT token, I've tried the following with or without player_id AND with different scopes:
var token = Playlyfe.createJWT({
client_id: client_id,
client_secret: client_secret,
player_id: player_id, // The player id associated with your user
scopes: [/*'player.runtime.read', 'player.runtime.write'*/], // The scopes the player has access to
expires: 3600 // 1 hour
});
What are the available scopes anyhow? Is one of them 'admin.something' (I tried a bunch)?
peter_john
—
2016-04-08T01:24:23-04:00 —
#7
Hi Andrew,
Since you want to be able to create users you can just forget about the jwt flow. You need to use client_credentials flow and you can do it completely from the front-end code (or since you setup a server already from the backend also). When you create a new client with the client credentials flow click on all the game admin scopes (on the 'x' marks and it would become activated 'tick' marks) that means now your client can use the admin routes to create the player.
Then you need to make a ajax request from the frontend like this,
curl -H "Content-Type: application/json" -X POST -d '{"client_id":"your client id","client_secret":"your client secret", "grant_type": "client_credentials"}' https://playlyfe.com/auth/token
and you will get a response like this,
{"access_token":"token","expires_in":86400,"token_type":"Bearer"}
and if you don't have curl you can try it with this tool or jquery with the respective oauth params
andrew_taft
—
2016-04-08T15:34:24-04:00 —
#8
Aha, you can change the client scopes, thanks!
The ajax requests work in curl/hurl, but I believe that there are CORS issues with using client-side libraries like jquery, which is what I'm using. I get the following error:
XMLHttpRequest cannot load https://playlyfe.com/auth/token. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mycomputer' is therefore not allowed access.
Here is the code I'm using:
function setHeader(xhr) {
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
xhr.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type');
xhr.setRequestHeader('withCredentials', 'false');
xhr.setRequestHeader('Access-Control-Allow-Credentials', 'false');
}
var options = {
client_id: 'xxx',
client_secret: 'xxx',
grant_type: 'client_credentials'
};
$.ajax('https://playlyfe.com/auth/token', {
type: 'post',
data: options,
contentType : 'application/json',
crossDomain: true,
beforeSend: setHeader,
success: function(token) {
console.log('token',token);
},
error: function(jqXHR, text) {
console.log(jqXHR.responseText);
}
});
peter_john
—
2016-04-11T04:10:20-04:00 —
#9
Hi Andrew,
I forgot that curl does not have a browser context so allows you to make a request like this and browsers don't allow you to do this. So the only way right now for you to do this is make a backend route in nodejs
and use the playlyfe-node-sdk and get the access token token using that and send it back to the frontend.
Your ajax request will hit your local server like localhost:3000/get_token and then use that token.
andrew_taft
—
2016-04-11T16:33:01-04:00 —
#10
Great, thanks for all your help with this!
I set up a backend client for handling admin tasks (create user/team) and a frontend client for creating a JWT to pass to the frontend for runtime tasks. This way I can use all the standard API routes and don't have to use "https://playlyfe.com/auth/token".
peter_john
—
2016-04-12T00:25:30-04:00 —
#11
Great!
Good to see your moving ahead with your project since it took 6 days to get started.