feat: add default user mapping in custom oauth2 provider (#2819)

idp/custom.go

@@ -98,11 +98,19 @@ func (idp *CustomIdProvider) GetUserInfo(token *oauth2.Token) (*UserInfo, error)
 		return nil, err
 	}
 
+	requiredFields := []string{"id", "username", "displayName"}
+	for _, field := range requiredFields {
+		_, ok := idp.UserMapping[field]
+		if !ok {
+			return nil, fmt.Errorf("cannot find %s in userMapping, please check your configuration in custom provider", field)
+		}
+	}
+
 	// map user info
 	for k, v := range idp.UserMapping {
 		_, ok := dataMap[v]
 		if !ok {
-			return nil, fmt.Errorf("cannot find %s in user from castom provider", v)
+			return nil, fmt.Errorf("cannot find %s in user from custom provider", v)
 		}
 		dataMap[k] = dataMap[v]
 	}

web/src/ProviderEditPage.js

@@ -40,6 +40,14 @@ require("codemirror/mode/css/css");
 const {Option} = Select;
 const {TextArea} = Input;
 
+const defaultUserMapping = {
+  id: "id",
+  username: "username",
+  displayName: "displayName",
+  email: "email",
+  avatarUrl: "avatarUrl",
+};
+
 class ProviderEditPage extends React.Component {
   constructor(props) {
     super(props);
@@ -70,7 +78,7 @@ class ProviderEditPage extends React.Component {
 
         if (res.status === "ok") {
           const provider = res.data;
-          provider.userMapping = provider.userMapping || {};
+          provider.userMapping = provider.userMapping || defaultUserMapping;
           this.setState({
             provider: provider,
           });
@@ -141,8 +149,16 @@ class ProviderEditPage extends React.Component {
   }
 
   updateUserMappingField(key, value) {
+    const requiredKeys = ["id", "username", "displayName"];
     const provider = this.state.provider;
+
+    if (value === "" && requiredKeys.includes(key)) {
+      Setting.showMessage("error", i18next.t("provider:This field is required"));
+      return;
+    }
+
     provider.userMapping[key] = value;
+
     this.setState({
       provider: provider,
     });