SSO/OpenID: Use a mobile-redirect route (Fixes #2379 and #2381)

- Implement /auth/openid/mobile-redirect this will redirect to an app-link like audiobookshelf://oauth
- An app must provide an `redirect_uri` parameter with the app-link in the authorization request to /auth/openid
- The user will have to whitelist possible URLs, or explicitly allow all
- Also modified MultiSelect to allow to hide the menu/popup

client/components/ui/MultiSelect.vue

@@ -50,7 +50,11 @@ export default {
     label: String,
     disabled: Boolean,
     readonly: Boolean,
-    showEdit: Boolean
+    showEdit: Boolean,
+    menuDisabled: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {
@@ -77,7 +81,7 @@ export default {
       }
     },
     showMenu() {
-      return this.isFocused
+      return this.isFocused && !this.menuDisabled
     },
     wrapperClass() {
       var classes = []

client/pages/config/authentication.vue

@@ -46,6 +46,9 @@
 
             <ui-text-input-with-label ref="openidClientSecret" v-model="newAuthSettings.authOpenIDClientSecret" :disabled="savingSettings" :label="'Client Secret'" class="mb-2" />
 
+            <ui-multi-select ref="redirectUris" v-model="newAuthSettings.authOpenIDMobileRedirectURIs" :items="newAuthSettings.authOpenIDMobileRedirectURIs" :label="$strings.LabelMobileRedirectURIs" class="mb-2" :menuDisabled="true" :disabled="savingSettings" />
+            <p class="pl-4 text-sm text-gray-300 mb-2" v-html="$strings.LabelMobileRedirectURIsDescription" />
+
             <ui-text-input-with-label ref="buttonTextInput" v-model="newAuthSettings.authOpenIDButtonText" :disabled="savingSettings" :label="$strings.LabelButtonText" class="mb-2" />
 
             <div class="flex items-center pt-1 mb-2">
@@ -187,6 +190,25 @@ export default {
         this.$toast.error('Client Secret required')
         isValid = false
       }
+
+      function isValidRedirectURI(uri) {
+        // Check for somestring://someother/string
+        const pattern = new RegExp('^\\w+://[\\w\\.-]+$', 'i')
+        return pattern.test(uri)
+      }
+
+      const uris = this.newAuthSettings.authOpenIDMobileRedirectURIs
+      if (uris.includes('*') && uris.length > 1) {
+        this.$toast.error('Mobile Redirect URIs: Asterisk (*) must be the only entry if used')
+        isValid = false
+      } else {
+        uris.forEach(uri => {
+          if (uri !== '*' && !isValidRedirectURI(uri)) {
+            this.$toast.error(`Mobile Redirect URIs: Invalid URI ${uri}`)
+            isValid = false
+          }
+        })
+      }
       return isValid
     },
     async saveSettings() {

client/strings/de.json

@@ -337,6 +337,8 @@
   "LabelMinute": "Minute",
   "LabelMissing": "Fehlend",
   "LabelMissingParts": "Fehlende Teile",
+  "LabelMobileRedirectURIs": "Erlaubte Weiterleitungs-URIs für die mobile App",
+  "LabelMobileRedirectURIsDescription": "Dies ist eine Whitelist gültiger Umleitungs-URIs für mobile Apps. Der Standardwert ist <code>audiobookshelf://oauth</code>, den Sie entfernen oder durch zusätzliche URIs für die Integration von Drittanbieter-Apps ergänzen können. Die Verwendung eines Sternchens (<code>*</code>) als alleiniger Eintrag erlaubt jede URI.",
   "LabelMore": "Mehr",
   "LabelMoreInfo": "Mehr Info",
   "LabelName": "Name",

client/strings/en-us.json

@@ -343,6 +343,8 @@
   "LabelMinute": "Minute",
   "LabelMissing": "Missing",
   "LabelMissingParts": "Missing Parts",
+  "LabelMobileRedirectURIs": "Allowed Mobile Redirect URIs",
+  "LabelMobileRedirectURIsDescription": "This is a whitelist of valid redirect URIs for mobile apps. The default one is <code>audiobookshelf://oauth</code>, which you can remove or supplement with additional URIs for third-party app integration. Using an asterisk (<code>*</code>) as the sole entry permits any URI.",
   "LabelMore": "More",
   "LabelMoreInfo": "More Info",
   "LabelName": "Name",