# PLYR\[CONNECT]

{% hint style="info" %}
UNDER DEVELOPMENT
{% endhint %}

The easiest way to authenticate users via Browser / In-App browser with various ways to give back authenticated data.

### Endpoint of PLYR\[CONNECT]

Mainnet : <https://connect.plyr.network/>

Testnet: <https://connect-testnet.plyr.network/>

### **The required params to send to endpoint**

**Example of Login**\
<https://connect-testnet.plyr.network/?action=manageIPP&requestData=eyJnYW1lSWQiOiJ0ZXN0ZXIiLCJtb2RlIjoicmVkaXJlY3QiLCJjYWxsYmFja1VybCI6Imh0dHBzOi8vY29ubmVjdC10ZXN0bmV0LnBseXIubmV0d29yay90ZXN0LyJ9>

| Parameter Name | Description                                             | Remark                                |
| -------------- | ------------------------------------------------------- | ------------------------------------- |
| action         | <p>login<br>approve<br>loginAndApprove<br>manageIPP</p> |                                       |
| requestData    | base64 encoded string of json.                          | Each action has itself json structure |

### The Action's requestData json structure

{% tabs %}
{% tab title="login" %}

```json
{
    "gameId": "tester",
    "expiresIn": "86400",
    "mode": "redirect",
    "callbackString": "callbackStringOfMyGame",
    "callbackUrl": "https://connect-testnet.plyr.network/test/"
}
```

{% endtab %}

{% tab title="approve" %}

<pre class="language-json"><code class="lang-json">{
    "gameId": "tester",
    "plyrId": "fennec2",
    "tokens": [
        "plyr",
        "gamr"
    ],
    "amounts": [
        "2222",
        "3333"
    ],
<strong>    "expiresIn": "86400",
</strong>    "mode": "redirect",
    "callbackString": "callbackStringOfMyGame",
    "callbackUrl": "https://connect-testnet.plyr.network/test/"
}
</code></pre>

{% endtab %}

{% tab title="loginAndApprove" %}

```json
{
    "gameId": "tester",
    "tokens": [
      "plyr",
      "gamr"
    ],
    "amounts": [
      "4444",
      "5555"
      ],
    "expiresIn": "86400",
    "mode": "redirect",
    "callbackString": "callbackStringOfMyGame",
    "callbackUrl": "https://connect-testnet.plyr.network/test/"
}
```

{% endtab %}

{% tab title="mangeIPP" %}

```json
{
    "gameId": "tester",
    "mode": "redirect",
    "callbackUrl": "https://connect-testnet.plyr.network/test/"
}
```

{% endtab %}
{% endtabs %}

### How to select Mode

**Redirect**&#x20;

Open a new tab of browser. After authenticated, it will redirect to "callbackUrl".

If you want to do a polling interval to wait user to authenticate themself. you can do it by adding an extra param "uid" and pass the random UUID or any. and callbackUrl can be "/over" to show that authentication is successful

and you can use /auth/read/\[uid] endpoint to check the result every interval you want. (recommended 2 - 5 seconds)

**Callback**&#x20;

Opena new tab of browser. After authenticated, it will callback (Server side to callbackUrl)

**Opener**&#x20;

You can do a popup browser window. It will use "window\.opener.postMessage" to callback the origin / opener.

It will do a postMessage with the following structure

```json
{ 
   "vendor": "plyrconnect",
   "action": "login", 
   "callbackString": "YouEnteredStringFromRequestData",
   "callbackData": "base64 encoded json data from PLYR API"
}   
```

After Authenticated you can addEventlistener('message') to capture the callbacked data

```javascript
window.addEventListener('message', (e: any) => {
   if (e.data.vendor === 'plyrconnect') {
      console.log('callbackString:',e.data.callbackString)
      console.log('callbackData:', JSON.parse(atob(e.data.callbackData)))
   }
});
```

**Iframe**&#x20;

You can do an iframe. It will use "window\.parent.postMessage" to callback the parent.

It will do a postMessage with the following structure

```json
{ 
   "vendor": "plyrconnect",
   "action": "login", 
   "callbackString": "YouEnteredStringFromRequestData",
   "callbackData": "base64 encoded json data from PLYR API"
}
```

After Authenticated you can addEventlistener('message') to capture the callbacked data

```javascript
window.addEventListener('message', (e: any) => {
   if (e.data.vendor === 'plyrconnect') {
      console.log('callbackString:',e.data.callbackString)
      console.log('callbackData:', JSON.parse(atob(e.data.callbackData)))
   }
});
```