Add Unlink API.

controllers/auth.go

@@ -195,7 +195,8 @@ func (c *ApiController) Login() {
 				return
 			}
 
-			isLinked := object.LinkUserAccount(userId, provider.Type, userInfo.Username)
+			user := object.GetUser(userId)
+			isLinked := object.LinkUserAccount(user, provider.Type, userInfo.Username)
 			if isLinked {
 				resp = &Response{Status: "ok", Msg: "", Data: isLinked}
 			} else {

controllers/link.go

@@ -0,0 +1,59 @@
+// Copyright 2021 The casbin Authors. All Rights Reserved.
+//
+// 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.
+
+package controllers
+
+import (
+	"encoding/json"
+
+	"github.com/casdoor/casdoor/object"
+)
+
+type LinkForm struct {
+	ProviderType string `json:"providerType"`
+}
+
+func (c *ApiController) Unlink() {
+	var resp Response
+
+	if c.GetSessionUser() == "" {
+		resp = Response{Status: "error", Msg: "Please sign in first", Data: c.GetSessionUser()}
+		c.Data["json"] = resp
+		c.ServeJSON()
+		return
+	}
+
+	var form LinkForm
+	err := json.Unmarshal(c.Ctx.Input.RequestBody, &form)
+	if err != nil {
+		panic(err)
+	}
+	providerType := form.ProviderType
+
+	userId := c.GetSessionUser()
+	user := object.GetUser(userId)
+	value := object.GetUserField(user, providerType)
+
+	if value == "" {
+		resp = Response{Status: "error", Msg: "Please link first", Data: value}
+		c.Data["json"] = resp
+		c.ServeJSON()
+		return
+	}
+
+	object.LinkUserAccount(user, providerType, "")
+	resp = Response{Status: "ok", Msg: ""}
+	c.Data["json"] = resp
+	c.ServeJSON()
+}

object/user.go

@@ -16,6 +16,7 @@ package object
 
 import (
 	"fmt"
+	"reflect"
 
 	"github.com/casdoor/casdoor/util"
 	"xorm.io/core"
@@ -40,7 +41,8 @@ type User struct {
 
 	Github string `xorm:"varchar(100)" json:"github"`
 	Google string `xorm:"varchar(100)" json:"google"`
-	Qq     string `xorm:"varchar(100)" json:"qq"`
+	QQ     string `xorm:"qq varchar(100)" json:"qq"`
+	WeChat string `xorm:"wechat varchar(100)" json:"wechat"`
 }
 
 func GetGlobalUsers() []*User {
@@ -138,11 +140,18 @@ func GetUserByField(organizationName string, field string, value string) *User {
 	}
 }
 
-func LinkUserAccount(user, field, value string) bool {
-	affected, err := adapter.engine.Table(new(User)).ID(user).Update(map[string]interface{}{field: value})
+func LinkUserAccount(user *User, field string, value string) bool {
+	affected, err := adapter.engine.Table(user).ID(core.PK{user.Owner, user.Name}).Update(map[string]interface{}{field: value})
 	if err != nil {
 		panic(err)
 	}
 
 	return affected != 0
 }
+
+func GetUserField(user *User, field string) string {
+	// https://socketloop.com/tutorials/golang-how-to-get-struct-field-and-value-by-name
+	u := reflect.ValueOf(user)
+	f := reflect.Indirect(u).FieldByName(field)
+	return f.String()
+}

routers/router.go

@@ -44,6 +44,7 @@ func initAPI() {
 	beego.Router("/api/get-app-login", &controllers.ApiController{}, "GET:GetApplicationLogin")
 	beego.Router("/api/logout", &controllers.ApiController{}, "POST:Logout")
 	beego.Router("/api/get-account", &controllers.ApiController{}, "GET:GetAccount")
+	beego.Router("/api/unlink", &controllers.ApiController{}, "POST:Unlink")
 
 	beego.Router("/api/get-organizations", &controllers.ApiController{}, "GET:GetOrganizations")
 	beego.Router("/api/get-organization", &controllers.ApiController{}, "GET:GetOrganization")

web/src/Setting.js

@@ -171,3 +171,10 @@ export function getClickable(text) {
     </a>
   )
 }
+
+export function getIdpLogo(idp) {
+  const url = `https://cdn.jsdelivr.net/gh/casbin/static/img/social_${idp}.png`;
+  return (
+    <img width={30} height={30} src={url} alt={idp} />
+  )
+}

web/src/UserEditPage.js

@@ -20,6 +20,7 @@ import * as Setting from "./Setting";
 import {LinkOutlined} from "@ant-design/icons";
 import i18next from "i18next";
 import CropperDiv from "./CropperDiv.js";
+import * as AuthBackend from "./auth/AuthBackend";
 
 const { Option } = Select;
 
@@ -75,6 +76,74 @@ class UserEditPage extends React.Component {
     });
   }
 
+  linkUser(providerType) {
+  }
+
+  unlinkUser(providerType) {
+    const body = {
+      providerType: providerType,
+    };
+    AuthBackend.unlink(body)
+      .then((res) => {
+        if (res.status === 'ok') {
+          Setting.showMessage("success", `Linked successfully`);
+
+          this.getUser();
+        } else {
+          Setting.showMessage("error", `Failed to unlink: ${res.msg}`);
+        }
+      });
+  }
+
+  getIdpLink(idp, username) {
+    if (idp === "github") {
+      return `https://github.com/${username}`;
+    } else if (idp === "google") {
+      return "https://mail.google.com";
+    } else {
+      return "";
+    }
+  }
+
+  renderIdp(idp) {
+    return (
+      <Row style={{marginTop: '20px'}} >
+        <Col style={{marginTop: '5px'}} span={2}>
+          {
+            Setting.getIdpLogo(idp.toLowerCase())
+          }
+          <span style={{marginLeft: '5px'}}>
+            {
+              `${idp}:`
+            }
+          </span>
+        </Col>
+        <Col span={22} >
+          <span style={{width: '200px', display: "inline-block"}}>
+            {
+              this.state.user[idp.toLowerCase()] === "" ? (
+                "(empty)"
+              ) : (
+                <a target="_blank" rel="noreferrer" href={this.getIdpLink(idp.toLowerCase(), this.state.user[idp.toLowerCase()])}>
+                  {
+                    this.state.user[idp.toLowerCase()]
+                  }
+                </a>
+              )
+            }
+          </span>
+          {
+            this.state.user[idp.toLowerCase()] === "" ? (
+              <Button style={{marginLeft: '20px', width: '80px'}} type="primary" onClick={() => this.linkUser(idp)}>Link</Button>
+            ) : (
+              <Button style={{marginLeft: '20px', width: '80px'}} onClick={() => this.unlinkUser(idp)}>Unlink</Button>
+            )
+          }
+        </Col>
+      </Row>
+    )
+  }
+
   renderUser() {
     return (
       <Card size="small" title={
@@ -216,22 +285,18 @@ class UserEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={2}>
-            GitHub:
-          </Col>
-          <Col span={22} >
-            <Input value={this.state.user.github} disabled={true} />
-          </Col>
-        </Row>
-        <Row style={{marginTop: '20px'}} >
-          <Col style={{marginTop: '5px'}} span={2}>
-            Google:
-          </Col>
-          <Col span={22} >
-            <Input value={this.state.user.google} disabled={true} />
-          </Col>
-        </Row>
+        {
+          this.renderIdp("GitHub")
+        }
+        {
+          this.renderIdp("Google")
+        }
+        {
+          this.renderIdp("QQ")
+        }
+        {
+          this.renderIdp("WeChat")
+        }
         {
           !Setting.isAdminUser(this.props.account) ? null : (
             <React.Fragment>

web/src/auth/AuthBackend.js

@@ -56,16 +56,17 @@ export function logout() {
   }).then(res => res.json());
 }
 
+export function unlink(values) {
+  return fetch(`${authConfig.serverUrl}/api/unlink`, {
+    method: 'POST',
+    credentials: "include",
+    body: JSON.stringify(values),
+  }).then(res => res.json());
+}
+
 export function getApplication(owner, name) {
   return fetch(`${authConfig.serverUrl}/api/get-application?id=${owner}/${encodeURIComponent(name)}`, {
     method: "GET",
     credentials: "include"
   }).then(res => res.json());
 }
-
-export function getUsers(owner) {
-  return fetch(`${authConfig.serverUrl}/api/get-users?owner=${owner}`, {
-    method: "GET",
-    credentials: "include"
-  }).then(res => res.json());
-}

web/src/auth/LoginPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Card, Checkbox, Col, Form, Input, Row} from "antd";
+import {Button, Checkbox, Col, Form, Input, Row} from "antd";
 import {LockOutlined, UserOutlined} from "@ant-design/icons";
 import * as AuthBackend from "./AuthBackend";
 import * as Provider from "./Provider";