From d99e0eccadff29e3568a8608970ab97e4413be10 Mon Sep 17 00:00:00 2001 From: cglatot Date: Thu, 8 Oct 2020 14:06:33 +0100 Subject: Initial commit for plex sign in --- index.html | 13 +++-- js/main.js | 164 +++++++++++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 134 insertions(+), 43 deletions(-) diff --git a/index.html b/index.html index 2c3c2f5..fd08f18 100644 --- a/index.html +++ b/index.html @@ -196,7 +196,7 @@
- +
-

Please go to https://www.plex.tv/pin and enter the following PIN:

-
+ +

You are authenticated via PIN. @@ -244,7 +244,7 @@

- +
@@ -320,7 +320,6 @@

Plex Libraries

- Choose only episodic content (TV Shows, Anime, etc). This does not work for Movies.
diff --git a/js/main.js b/js/main.js index 7d15050..388b9bb 100644 --- a/js/main.js +++ b/js/main.js @@ -1,7 +1,7 @@ // Variables for the Authorised Devices card var clientIdentifier; // UID for the device being used var plexProduct = "PASTA"; // X-Plex-Product - Application name -var pastaVersion = "1.4.1"; // X-Plex-Version - Application version +var pastaVersion = "1.5.0"; // X-Plex-Version - Application version var pastaPlatform; // X-Plex-Platform - Web Browser var pastaPlatformVersion; // X-Plex-Platform-Version - Web Browser version var deviceInfo; // X-Plex-Device - Operation system? @@ -44,7 +44,6 @@ $(document).ready(() => { // Check if they have permanently dismissed the Login Info alert if (localStorage.showLoginInfoAlert == 'false') { - console.log("infoalert is false"); } else { $("#loginInfoAlert").show(); @@ -52,7 +51,6 @@ $(document).ready(() => { // Override the close mechanism to not show the loginInfoAlert $("#loginInfoAlertClose").on("click", () => { - console.log('Entered the click for close'); hideLoginInfoAlertForever(); }); @@ -60,7 +58,7 @@ $(document).ready(() => { try { let browserInfo = getBrowser(); // Set the clientID, this might get overridden if one is saved to localstorage - clientIdentifier = `PASTA-cglatot-${Date.now()}-${Math.round(Math.random() * 1000)}`; + clientIdentifier = localStorage.clientIdentifier || `PASTA-cglatot-${Date.now()}-${Math.round(Math.random() * 1000)}`; // Set the OS deviceInfo = browserInfo.os || ""; // Set the web browser and version @@ -72,7 +70,7 @@ $(document).ready(() => { console.log(e); // Fallback values // Set the clientID, this might get overridden if one is saved to localstorage - clientIdentifier = `PASTA-cglatot-${Date.now()}-${Math.round(Math.random() * 1000)}`; + clientIdentifier = localStorage.clientIdentifier || `PASTA-cglatot-${Date.now()}-${Math.round(Math.random() * 1000)}`; // Set the OS deviceInfo = ""; // Set the web browser and version @@ -97,32 +95,22 @@ $(document).ready(() => { toggleAuthPages(this.value); }); + // Check whether they want to connect using a local IP or not if (localStorage.useLocalAddress == "true") { $('#connectViaLocalAddress').prop('checked', true); } else { $('#connectViaLocalAddress').prop('checked', false); } - if (!localStorage.isPinAuth) { - // Not using PIN auth, so must be using url / token - if (localStorage.plexUrl && localStorage.plexUrl !== "") { - plexUrl = localStorage.plexUrl; - $('#plexUrl').val(localStorage.plexUrl); - validateEnableConnectBtn('plexUrl'); - $('#forgetDivider, #forgetDetailsSection').show(); - } - if (localStorage.plexToken && localStorage.plexToken !== "") { - plexToken = localStorage.plexToken; - $('#plexToken').val(localStorage.plexToken); - validateEnableConnectBtn('plexToken'); - $('#forgetDivider, #forgetDetailsSection').show(); - } - - // Display a PIN code for that authentication as well + // Check if there is a stored Auth Token + if (localStorage.authToken) { + // Then check if the auth token is valid $.ajax({ - "url": `https://plex.tv/pins.xml`, + "url": `https://plex.tv/api/v2/user`, "headers": { + "accept": "application/json", "X-Plex-Client-Identifier": clientIdentifier, + "X-Plex-Token": localStorage.authToken, "X-Plex-Product": plexProduct, "X-Plex-Version": pastaVersion, "X-Plex-Platform": pastaPlatform, @@ -130,30 +118,134 @@ $(document).ready(() => { "X-Plex-Device": deviceInfo, "X-Plex-Device-Name": deviceName }, - "method": "POST", + "method": "GET", + "success": (data, statusText, xhr) => { + console.log(data); + console.log(xhr.status); + if (xhr.status == 401) { + // Token is no longer valid, show the button to login again + } else { + // Auth code is still valid + plexToken = localStorage.pinAuthToken; + getServers(); + } + }, + "error": (data) => { + console.log("ERROR L121"); + console.log(data); + } + }); + } + // Else heck if there is a generated PIN ID (This will occur after first using the Login with Plex button) + else if ((localStorage.generatedPinId)&&(localStorage.generatedPinCode)&&(localStorage.clientIdentifier)) { + // Check for an authToken + $.ajax({ + "url": `https://plex.tv/api/v2/pins/${localStorage.generatedPinId}`, + "headers": { + "accept": "application/json", + "code": localStorage.generatedPinCode, + "X-Plex-Client-Identifier": localStorage.clientIdentifier, + }, + "method": "GET", "success": (data) => { - let pinId = $(data).find('id')[0].innerHTML; - let pinCode = $(data).find('code')[0].innerHTML; - - $('#pin-code-holder').html(pinCode); - backOffTimer = Date.now(); - listenForValidPincode(pinId); + console.log(data); + localStorage.isPinAuth = true; + localStorage.pinAuthToken = data.authToken; + plexToken = data.authToken; + getServers(); }, "error": (data) => { console.log("ERROR L121"); console.log(data); } }); - } else { - $('#new-pin-container').hide(); - $('#authed-pin-container').show(); - // We are using Pin Auth - clientIdentifier = localStorage.clientIdentifier; - plexToken = localStorage.pinAuthToken; - getServers(); } + + // if (!localStorage.isPinAuth) { + // // Not using PIN auth, so must be using url / token + // if (localStorage.plexUrl && localStorage.plexUrl !== "") { + // plexUrl = localStorage.plexUrl; + // $('#plexUrl').val(localStorage.plexUrl); + // validateEnableConnectBtn('plexUrl'); + // $('#forgetDivider, #forgetDetailsSection').show(); + // } + // if (localStorage.plexToken && localStorage.plexToken !== "") { + // plexToken = localStorage.plexToken; + // $('#plexToken').val(localStorage.plexToken); + // validateEnableConnectBtn('plexToken'); + // $('#forgetDivider, #forgetDetailsSection').show(); + // } + + // // Display a PIN code for that authentication as well + // $.ajax({ + // "url": `https://plex.tv/pins.xml`, + // "headers": { + // "X-Plex-Client-Identifier": clientIdentifier, + // "X-Plex-Product": plexProduct, + // "X-Plex-Version": pastaVersion, + // "X-Plex-Platform": pastaPlatform, + // "X-Plex-Platform-Version": pastaPlatformVersion, + // "X-Plex-Device": deviceInfo, + // "X-Plex-Device-Name": deviceName + // }, + // "method": "POST", + // "success": (data) => { + // let pinId = $(data).find('id')[0].innerHTML; + // let pinCode = $(data).find('code')[0].innerHTML; + + // $('#pin-code-holder').html(pinCode); + // backOffTimer = Date.now(); + // listenForValidPincode(pinId); + // }, + // "error": (data) => { + // console.log("ERROR L121"); + // console.log(data); + // } + // }); + // } else { + // $('#new-pin-container').hide(); + // $('#authed-pin-container').show(); + // // We are using Pin Auth + // clientIdentifier = localStorage.clientIdentifier; + // plexToken = localStorage.pinAuthToken; + // getServers(); + // } }); +function authenticateWithPlex() { + // Generate a PIN code to get the URL + $.ajax({ + "url": `https://plex.tv/api/v2/pins`, + "headers": { + "accept": "application/json", + "strong": "true", + "X-Plex-Client-Identifier": clientIdentifier, + "X-Plex-Product": plexProduct, + "X-Plex-Version": pastaVersion, + "X-Plex-Platform": pastaPlatform, + "X-Plex-Platform-Version": pastaPlatformVersion, + "X-Plex-Device": deviceInfo, + "X-Plex-Device-Name": deviceName + }, + "method": "POST", + "success": (data) => { + console.log(data); + localStorage.generatedPinId = data.id; + localStorage.generatedPinCode = data.code; + localStorage.clientIdentifier = clientIdentifier; + // const forwardUrl = encodeURIComponent(window.location.href); + let plexProductTemp = encodeURIComponent("Plex Web"); + let forwardUrl = "https://www.pastatool.com" + let authAppUrl = `https://app.plex.tv/auth#?clientID=${clientIdentifier}&code=${data.code}&context%5Bdevice%5D%5Bproduct%5D=${plexProductTemp}&forwardUrl=${forwardUrl}` + window.location.href = authAppUrl; + }, + "error": (data) => { + console.log("ERROR L121"); + console.log(data); + } + }); +} + function toggleAuthPages(value) { if (value == 'showPinControls') { $('#pin-auth-over-container').show(); -- cgit v1.2.3 From 44898da825cf16985a88f3516df47453a6fdfed8 Mon Sep 17 00:00:00 2001 From: cglatot Date: Thu, 8 Oct 2020 16:26:15 +0100 Subject: Refine Plex Login Methods --- css/main.css | 8 ++ index.html | 17 ++-- js/main.js | 256 +++++++++++++++++++++-------------------------------------- 3 files changed, 105 insertions(+), 176 deletions(-) diff --git a/css/main.css b/css/main.css index aeffe1c..582e92c 100644 --- a/css/main.css +++ b/css/main.css @@ -70,6 +70,14 @@ label, p { display: none; } +#new-pin-container { + display: none; +} + +#waitOnPinAuth { + display: none; +} + /*========================== MODALS ==========================*/ diff --git a/index.html b/index.html index fd08f18..7af4bf6 100644 --- a/index.html +++ b/index.html @@ -217,18 +217,15 @@ -
-
- - +
+
+ +
-

You are authenticated via PIN. +

You are logged in as: - Click here to logout. + Click here to logout.

@@ -488,7 +485,7 @@
-

Baby Driver

+

diff --git a/js/main.js b/js/main.js index 388b9bb..2e741ea 100644 --- a/js/main.js +++ b/js/main.js @@ -28,23 +28,19 @@ $(document).ready(() => { // Enable Tooltips $('.helpButtons, #titleLogo').tooltip(); - // Enable history tracking for tabs $('a[data-toggle="tab"]').historyTabs(); // Check if the page was loaded locally or over http and warn them about the value of https if ((location.protocol == "http:") || (location.protocol == "file:")) { - if (localStorage.showHttpAlert == 'false') { - - } + if (localStorage.showHttpAlert == 'false') {} else { $("#insecureWarning").show(); } } // Check if they have permanently dismissed the Login Info alert - if (localStorage.showLoginInfoAlert == 'false') { - } + if (localStorage.showLoginInfoAlert == 'false') {} else { $("#loginInfoAlert").show(); } @@ -84,7 +80,6 @@ $(document).ready(() => { $('#plexUrl').on("input", () => { validateEnableConnectBtn('plexUrl'); }); - // Validation listeners on the Plex Token Input $('#plexToken').on("input", () => { validateEnableConnectBtn('plexToken'); @@ -103,115 +98,51 @@ $(document).ready(() => { } // Check if there is a stored Auth Token - if (localStorage.authToken) { - // Then check if the auth token is valid - $.ajax({ - "url": `https://plex.tv/api/v2/user`, - "headers": { - "accept": "application/json", - "X-Plex-Client-Identifier": clientIdentifier, - "X-Plex-Token": localStorage.authToken, - "X-Plex-Product": plexProduct, - "X-Plex-Version": pastaVersion, - "X-Plex-Platform": pastaPlatform, - "X-Plex-Platform-Version": pastaPlatformVersion, - "X-Plex-Device": deviceInfo, - "X-Plex-Device-Name": deviceName - }, - "method": "GET", - "success": (data, statusText, xhr) => { - console.log(data); - console.log(xhr.status); - if (xhr.status == 401) { - // Token is no longer valid, show the button to login again - } else { - // Auth code is still valid - plexToken = localStorage.pinAuthToken; - getServers(); - } - }, - "error": (data) => { - console.log("ERROR L121"); - console.log(data); - } - }); - } - // Else heck if there is a generated PIN ID (This will occur after first using the Login with Plex button) - else if ((localStorage.generatedPinId)&&(localStorage.generatedPinCode)&&(localStorage.clientIdentifier)) { - // Check for an authToken - $.ajax({ - "url": `https://plex.tv/api/v2/pins/${localStorage.generatedPinId}`, - "headers": { - "accept": "application/json", - "code": localStorage.generatedPinCode, - "X-Plex-Client-Identifier": localStorage.clientIdentifier, - }, - "method": "GET", - "success": (data) => { - console.log(data); - localStorage.isPinAuth = true; - localStorage.pinAuthToken = data.authToken; - plexToken = data.authToken; - getServers(); - }, - "error": (data) => { - console.log("ERROR L121"); - console.log(data); - } - }); + if (localStorage.pinAuthToken) { + checkIfAuthTokenIsValid(); + } else { + $('#new-pin-container').show(); } - - // if (!localStorage.isPinAuth) { - // // Not using PIN auth, so must be using url / token - // if (localStorage.plexUrl && localStorage.plexUrl !== "") { - // plexUrl = localStorage.plexUrl; - // $('#plexUrl').val(localStorage.plexUrl); - // validateEnableConnectBtn('plexUrl'); - // $('#forgetDivider, #forgetDetailsSection').show(); - // } - // if (localStorage.plexToken && localStorage.plexToken !== "") { - // plexToken = localStorage.plexToken; - // $('#plexToken').val(localStorage.plexToken); - // validateEnableConnectBtn('plexToken'); - // $('#forgetDivider, #forgetDetailsSection').show(); - // } - - // // Display a PIN code for that authentication as well - // $.ajax({ - // "url": `https://plex.tv/pins.xml`, - // "headers": { - // "X-Plex-Client-Identifier": clientIdentifier, - // "X-Plex-Product": plexProduct, - // "X-Plex-Version": pastaVersion, - // "X-Plex-Platform": pastaPlatform, - // "X-Plex-Platform-Version": pastaPlatformVersion, - // "X-Plex-Device": deviceInfo, - // "X-Plex-Device-Name": deviceName - // }, - // "method": "POST", - // "success": (data) => { - // let pinId = $(data).find('id')[0].innerHTML; - // let pinCode = $(data).find('code')[0].innerHTML; - - // $('#pin-code-holder').html(pinCode); - // backOffTimer = Date.now(); - // listenForValidPincode(pinId); - // }, - // "error": (data) => { - // console.log("ERROR L121"); - // console.log(data); - // } - // }); - // } else { - // $('#new-pin-container').hide(); - // $('#authed-pin-container').show(); - // // We are using Pin Auth - // clientIdentifier = localStorage.clientIdentifier; - // plexToken = localStorage.pinAuthToken; - // getServers(); - // } }); +// Checks if the generated token is valid +function checkIfAuthTokenIsValid() { + $.ajax({ + "url": `https://plex.tv/api/v2/user`, + "headers": { + "accept": "application/json", + "X-Plex-Client-Identifier": clientIdentifier, + "X-Plex-Token": localStorage.pinAuthToken, + "X-Plex-Product": plexProduct, + "X-Plex-Version": pastaVersion, + "X-Plex-Platform": pastaPlatform, + "X-Plex-Platform-Version": pastaPlatformVersion, + "X-Plex-Device": deviceInfo, + "X-Plex-Device-Name": deviceName + }, + "method": "GET", + "success": (data) => { + console.log(data); + plexToken = localStorage.pinAuthToken; + $('#new-pin-container').hide(); + $('#authed-pin-container').show(); + $('#loggedInAs').text(data.username); + getServers(); + }, + "error": (data, statusText, xhr) => { + console.log("ERROR L121"); + console.log(data.status); + if (data.status == 401) { + // Auth Token has expired + localStorage.removeItem('isPinAuth'); + localStorage.removeItem('pinAuthToken'); + localStorage.removeItem('useLocalAddress'); + $('#new-pin-container').show(); + } + } + }); +} + function authenticateWithPlex() { // Generate a PIN code to get the URL $.ajax({ @@ -229,15 +160,15 @@ function authenticateWithPlex() { }, "method": "POST", "success": (data) => { - console.log(data); - localStorage.generatedPinId = data.id; - localStorage.generatedPinCode = data.code; - localStorage.clientIdentifier = clientIdentifier; - // const forwardUrl = encodeURIComponent(window.location.href); + // For some reason auth doesn't work unless you choose Plex Web as the product id let plexProductTemp = encodeURIComponent("Plex Web"); - let forwardUrl = "https://www.pastatool.com" - let authAppUrl = `https://app.plex.tv/auth#?clientID=${clientIdentifier}&code=${data.code}&context%5Bdevice%5D%5Bproduct%5D=${plexProductTemp}&forwardUrl=${forwardUrl}` - window.location.href = authAppUrl; + let authAppUrl = `https://app.plex.tv/auth#?clientID=${clientIdentifier}&code=${data.code}&context%5Bdevice%5D%5Bproduct%5D=${plexProductTemp}`; + + $('#waitOnPinAuth').show(); + $('#loginWithPlexBtn').hide(); + window.open(authAppUrl, 'PlexSignIn', 'width=800,height=730'); + backOffTimer = Date.now(); + listenForValidPincode(data.id, clientIdentifier, data.code); }, "error": (data) => { console.log("ERROR L121"); @@ -246,65 +177,59 @@ function authenticateWithPlex() { }); } -function toggleAuthPages(value) { - if (value == 'showPinControls') { - $('#pin-auth-over-container').show(); - $('#url-auth-over-container').hide(); - } else { - $('#pin-auth-over-container').hide(); - $('#url-auth-over-container').show(); - - if (localStorage.isPinAuth) { - $("#authWarningText").html(``); - } - } -} - -function listenForValidPincode (pinId) { +function listenForValidPincode(pinId, clientId, pinCode) { let currentTime = Date.now(); - if ((currentTime - backOffTimer)/1000 < 180) { + if ((currentTime - backOffTimer)/1000 < 10) { $.ajax({ - "url": `https://plex.tv/pins/${pinId}`, + "url": `https://plex.tv/api/v2/pins/${pinId}`, "headers": { - "X-Plex-Client-Identifier": clientIdentifier, - "X-Plex-Product": plexProduct, - "X-Plex-Version": pastaVersion, - "X-Plex-Platform": pastaPlatform, - "X-Plex-Platform-Version": pastaPlatformVersion, - "X-Plex-Device": deviceInfo, - "X-Plex-Device-Name": deviceName + "accept": "application/json", + "code": pinCode, + "X-Plex-Client-Identifier": clientId, }, "method": "GET", "success": (data) => { - if (data.pin.auth_token != null) { - plexToken = data.pin.auth_token; - // Save to local storage - localStorage.isPinAuth = true; - localStorage.pinAuthToken = plexToken; + if (data.authToken != null) { + $('#waitOnPinAuth').hide(); localStorage.clientIdentifier = clientIdentifier; - $('#new-pin-container').hide(); - $('#authed-pin-container').show(); - getServers(); + localStorage.isPinAuth = true; + localStorage.pinAuthToken = data.authToken; + plexToken = data.authToken; + checkIfAuthTokenIsValid(); } else { setTimeout(() => { - listenForValidPincode(pinId); - }, 5000); + listenForValidPincode(pinId, clientId, pinCode); + }, 3000); // Check every 3 seconds } }, "error": (data) => { - console.log("ERROR L186"); + console.log("ERROR L121"); console.log(data); - return; } }); } else { - $('#new-pin-container').html('

PIN entry timed out. \ - Please refresh the page to get a new PIN.

'); + $('#new-pin-container').html('

Login timed out. \ + Please refresh the page and ensure your popup blocker is disabled.

'); + } +} + +// Toggle between the authentication methods +function toggleAuthPages(value) { + if (value == 'showPinControls') { + $('#pin-auth-over-container').show(); + $('#url-auth-over-container').hide(); + } else { + $('#pin-auth-over-container').hide(); + $('#url-auth-over-container').show(); + + if (localStorage.isPinAuth) { + $("#authWarningText").html(``); + } } } @@ -314,7 +239,7 @@ function useLocalAddress (checkbox) { if (checkbox.checked) { localStorage.useLocalAddress = "true"; } else { - localStorage.useLocalAddress = "false"; + localStorage.removeItem('useLocalAddress'); } window.location.reload(); } @@ -450,7 +375,6 @@ function forgetDetails() { function forgetPinDetails() { localStorage.removeItem('isPinAuth'); localStorage.removeItem('pinAuthToken'); - localStorage.removeItem('clientIdentifier'); localStorage.removeItem('useLocalAddress'); window.location.reload(); } -- cgit v1.2.3