Add client_id support for OpenID (#8579)

- One click OpenID authorization on Login page
- Add client_id help, config keys etc

Thanks to @egorkaru @ihostage for the
original work and testing.

browser/app/js/browser/Login.js

@@ -16,16 +16,13 @@
 
 import React from "react"
 import { connect } from "react-redux"
-import classNames from "classnames"
 import logo from "../../img/logo.svg"
 import Alert from "../alert/Alert"
 import * as actionsAlert from "../alert/actions"
 import InputGroup from "./InputGroup"
 import web from "../web"
 import { Redirect, Link } from "react-router-dom"
-import qs from "query-string"
-import storage from "local-storage-fallback"
-import history from "../history"
+import OpenIDLoginButton from './OpenIDLoginButton'
 
 export class Login extends React.Component {
   constructor(props) {
@@ -33,7 +30,8 @@ export class Login extends React.Component {
     this.state = {
       accessKey: "",
       secretKey: "",
-      discoveryDoc: {}
+      discoveryDoc: {},
+      clientId: ""
     }
   }
 
@@ -88,8 +86,9 @@ export class Login extends React.Component {
   }
 
   componentDidMount() {
-    web.GetDiscoveryDoc().then(({ DiscoveryDoc }) => {
+    web.GetDiscoveryDoc().then(({ DiscoveryDoc, clientId }) => {
       this.setState({
+        clientId,
         discoveryDoc: DiscoveryDoc
       })
     })
@@ -107,6 +106,8 @@ export class Login extends React.Component {
     let alertBox = <Alert {...alert} onDismiss={clearAlert} />
     // Make sure you don't show a fading out alert box on the initial web-page load.
     if (!alert.message) alertBox = ""
+
+    const showOpenID = Boolean(this.state.discoveryDoc && this.state.discoveryDoc.authorization_endpoint)
     return (
       <div className="login">
         {alertBox}
@@ -139,13 +140,24 @@ export class Login extends React.Component {
               <i className="fas fa-sign-in-alt" />
             </button>
           </form>
-          {this.state.discoveryDoc &&
-            this.state.discoveryDoc.authorization_endpoint && (
+          {showOpenID && (
             <div className="openid-login">
               <div className="or">or</div>
-              <a href={"/login/openid"} className="btn openid-btn">
-                Log in with OpenID
-              </a>
+              {
+                this.state.clientId ? (
+                  <OpenIDLoginButton
+                    className="btn openid-btn"
+                    clientId={this.state.clientId}
+                    authorizationEndpoint={this.state.discoveryDoc.authorization_endpoint}
+                  >
+                    Log in with OpenID
+                  </OpenIDLoginButton>
+                ) : (
+                  <Link to={"/login/openid"} className="btn openid-btn">
+                    Log in with OpenID
+                  </Link>
+                )
+              }
             </div>
           )}
         </div>

browser/app/js/browser/OpenIDLogin.js

@@ -26,6 +26,7 @@ import qs from "query-string"
 import { getRandomString } from "../utils"
 import storage from "local-storage-fallback"
 import jwtDecode from "jwt-decode"
+import { buildOpenIDAuthURL, OPEN_ID_NONCE_KEY } from './utils'
 
 export class OpenIDLogin extends React.Component {
   constructor(props) {
@@ -58,20 +59,17 @@ export class OpenIDLogin extends React.Component {
 
     if (this.state.discoveryDoc && this.state.discoveryDoc.authorization_endpoint) {
       const redirectURI = window.location.href.split("#")[0]
-      var params = new URLSearchParams()
-      params.set("response_type", "id_token")
-      params.set("scope", "openid")
-      params.set("client_id", this.state.clientID)
-      params.set("redirect_uri", redirectURI)
 
       // Store nonce in localstorage to check again after the redirect
       const nonce = getRandomString(16)
-      params.set("nonce", nonce)
-      storage.setItem("openIDKey", nonce)
+      storage.setItem(OPEN_ID_NONCE_KEY, nonce)
 
-      const authURL = `${
-        this.state.discoveryDoc.authorization_endpoint
-      }?${params.toString()}`
+      const authURL = buildOpenIDAuthURL(
+        this.state.discoveryDoc.authorization_endpoint,
+        redirectURI,
+        this.state.clientID,
+        nonce
+      )
       window.location = authURL
     }
   }
@@ -99,13 +97,13 @@ export class OpenIDLogin extends React.Component {
     if (values.id_token) {
       // Check nonce on the token to prevent replay attacks
       const tokenJSON = jwtDecode(values.id_token)
-      if (storage.getItem("openIDKey") !== tokenJSON.nonce) {
+      if (storage.getItem(OPEN_ID_NONCE_KEY) !== tokenJSON.nonce) {
         this.props.showAlert("danger", "Invalid auth token")
         return
       }
 
       web.LoginSTS({ token: values.id_token }).then(() => {
-        storage.removeItem("openIDKey")
+        storage.removeItem(OPEN_ID_NONCE_KEY)
         this.forceUpdate()
         return
       })

browser/app/js/browser/OpenIDLoginButton.js

@@ -0,0 +1,57 @@
+/*
+ * MinIO Cloud Storage (C) 2019 MinIO, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { getRandomString } from "../utils"
+import storage from "local-storage-fallback"
+import { buildOpenIDAuthURL, OPEN_ID_NONCE_KEY } from './utils'
+
+export class OpenIDLoginButton extends React.Component {
+  constructor(props) {
+    super(props)
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  handleClick(event) {
+    event.stopPropagation()
+    const { authorizationEndpoint, clientId } = this.props
+
+    let redirectURI = window.location.href.split("#")[0]
+    if (redirectURI.endsWith('/')) {
+      redirectURI += 'openid'
+    } else {
+      redirectURI += '/openid'
+    }
+
+    // Store nonce in localstorage to check again after the redirect
+    const nonce = getRandomString(16)
+    storage.setItem(OPEN_ID_NONCE_KEY, nonce)
+
+    const authURL = buildOpenIDAuthURL(authorizationEndpoint, redirectURI, clientId, nonce)
+    window.location = authURL
+  }
+
+  render() {
+    const { children, className } = this.props
+    return (
+      <div onClick={this.handleClick} className={className}>
+        {children}
+      </div>
+    )
+  }
+}
+
+export default OpenIDLoginButton

browser/app/js/browser/utils.js

@@ -0,0 +1,29 @@
+/*
+ * MinIO Cloud Storage (C) 2019 MinIO, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const OPEN_ID_NONCE_KEY = 'openIDKey'
+
+export const buildOpenIDAuthURL = (authorizationEndpoint, redirectURI, clientID, nonce) => {
+  const params = new URLSearchParams()
+  params.set("response_type", "id_token")
+  params.set("scope", "openid")
+  params.set("client_id", clientID)
+  params.set("redirect_uri", redirectURI)
+  params.set("nonce", nonce)
+
+  return `${authorizationEndpoint}?${params.toString()}`
+}
+

browser/app/less/inc/login.less

@@ -101,14 +101,15 @@
 
 .openid-btn {
     display: inline-block;
+    color: @link-color;
     margin-top: 30px;
     border-width: 1px;
     border-style: solid;
     opacity: 0.6;
     font-size: 14px;
     &:hover {
-        color: @link-color;
         opacity: 1;
+        cursor: pointer;
     }
 }
 
@@ -118,7 +119,7 @@
     align-items: center;
     color:grey;
   }
-  
+
 .or:after,
 .or:before {
     content: "";
@@ -136,4 +137,4 @@ input:-webkit-autofill {
      -webkit-box-shadow:0 0 0 50px #002a37 inset !important;
      -webkit-text-fill-color: @white !important;
     caret-color: white;
-}
+}