feat: support login by following wechat official account (casdoor#1284)

* show QRcode when click WeChat Icon

* update how to show qrcode

* handle wechat scan qrcode

* fix api problems

* fix url problems

* fix problems

* modify get frequency

* remove useless print

* fix:fix PR problems

* fix: fix PR problems

* fix:fix PR problem

* fix IMG load delay problems

* fix:fix provider problems

* fix test problems

* use gofumpt to fmt code

* fix:delete useless variables

* feat:add button for follow official account

* fix:fix review problems

* use gofumpt to fmt code

* fix:fix scantype problems

* fix Response problem

* use gofumpt to format code

authz/authz.go

@@ -85,6 +85,8 @@ p, *, *, POST, /api/logout, *, *
 p, *, *, GET, /api/logout, *, *
 p, *, *, GET, /api/get-account, *, *
 p, *, *, GET, /api/userinfo, *, *
+p, *, *, POST, /api/webhook, *, *
+p, *, *, GET, /api/get-webhook-event, *, *
 p, *, *, *, /api/login/oauth, *, *
 p, *, *, GET, /api/get-application, *, *
 p, *, *, GET, /api/get-organization-applications, *, *

controllers/auth.go

@@ -17,14 +17,16 @@ package controllers
 import (
 	"encoding/base64"
 	"encoding/json"
+	"encoding/xml"
 	"fmt"
+	"io/ioutil"
 	"net/url"
 	"strconv"
 	"strings"
+	"sync"
 	"time"
 
 	"github.com/casdoor/casdoor/captcha"
-
 	"github.com/casdoor/casdoor/conf"
 	"github.com/casdoor/casdoor/idp"
 	"github.com/casdoor/casdoor/object"
@@ -33,6 +35,11 @@ import (
 	"github.com/google/uuid"
 )
 
+var (
+	wechatScanType string
+	lock           sync.RWMutex
+)
+
 func codeToResponse(code *object.Code) *Response {
 	if code.Code == "" {
 		return &Response{Status: "error", Msg: code.Message, Data: code.Code}
@@ -531,3 +538,46 @@ func (c *ApiController) HandleSamlLogin() {
 		slice[4], relayState, samlResponse)
 	c.Redirect(targetUrl, 303)
 }
+
+// HandleOfficialAccountEvent ...
+// @Tag HandleOfficialAccountEvent API
+// @Title HandleOfficialAccountEvent
+// @router /api/webhook [POST]
+func (c *ApiController) HandleOfficialAccountEvent() {
+	respBytes, err := ioutil.ReadAll(c.Ctx.Request.Body)
+	if err != nil {
+		c.ResponseError(err.Error())
+	}
+	var data struct {
+		MsgType  string `xml:"MsgType"`
+		Event    string `xml:"Event"`
+		EventKey string `xml:"EventKey"`
+	}
+	err = xml.Unmarshal(respBytes, &data)
+	if err != nil {
+		c.ResponseError(err.Error())
+	}
+	lock.Lock()
+	defer lock.Unlock()
+	if data.EventKey != "" {
+		wechatScanType = data.Event
+		c.Ctx.WriteString("")
+	}
+}
+
+// GetWebhookEventType ...
+// @Tag GetWebhookEventType API
+// @Title GetWebhookEventType
+// @router /api/get-webhook-event [GET]
+func (c *ApiController) GetWebhookEventType() {
+	lock.Lock()
+	defer lock.Unlock()
+	resp := &Response{
+		Status: "ok",
+		Msg:    "",
+		Data:   wechatScanType,
+	}
+	c.Data["json"] = resp
+	wechatScanType = ""
+	c.ServeJSON()
+}

go.mod

@@ -36,6 +36,7 @@ require (
 	github.com/russellhaering/goxmldsig v1.1.1
 	github.com/satori/go.uuid v1.2.0
 	github.com/shirou/gopsutil v3.21.11+incompatible
+	github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e // indirect
 	github.com/smartystreets/goconvey v1.6.4 // indirect
 	github.com/stretchr/testify v1.8.0
 	github.com/tealeg/xlsx v1.0.5

idp/wechat.go

@@ -16,14 +16,17 @@ package idp
 
 import (
 	"bytes"
+	"encoding/base64"
 	"encoding/json"
 	"fmt"
 	"io"
+	"io/ioutil"
 	"net/http"
 	"net/url"
 	"strings"
 	"time"
 
+	"github.com/skip2/go-qrcode"
 	"golang.org/x/oauth2"
 )
 
@@ -191,3 +194,54 @@ func (idp *WeChatIdProvider) GetUserInfo(token *oauth2.Token) (*UserInfo, error)
 	}
 	return &userInfo, nil
 }
+
+func GetWechatOfficialAccountAccessToken(clientId string, clientSecret string) (string, error) {
+	accessTokenUrl := fmt.Sprintf("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s", clientId, clientSecret)
+	request, err := http.NewRequest("GET", accessTokenUrl, nil)
+	client := new(http.Client)
+	resp, err := client.Do(request)
+	respBytes, err := ioutil.ReadAll(resp.Body)
+	if err != nil {
+		return "", err
+	}
+	var data struct {
+		ExpireIn    int    `json:"expires_in"`
+		AccessToken string `json:"access_token"`
+	}
+	err = json.Unmarshal(respBytes, &data)
+	if err != nil {
+		return "", err
+	}
+	return data.AccessToken, nil
+}
+
+func GetWechatOfficialAccountQRCode(clientId string, clientSecret string) (string, error) {
+	accessToken, err := GetWechatOfficialAccountAccessToken(clientId, clientSecret)
+	client := new(http.Client)
+	params := "{\"action_name\": \"QR_LIMIT_STR_SCENE\", \"action_info\": {\"scene\": {\"scene_str\": \"test\"}}}"
+	bodyData := bytes.NewReader([]byte(params))
+	qrCodeUrl := fmt.Sprintf("https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=%s", accessToken)
+	requeset, err := http.NewRequest("POST", qrCodeUrl, bodyData)
+	resp, err := client.Do(requeset)
+	if err != nil {
+		return "", err
+	}
+	respBytes, err := ioutil.ReadAll(resp.Body)
+	if err != nil {
+		return "", err
+	}
+	var data struct {
+		Ticket        string `json:"ticket"`
+		ExpireSeconds int    `json:"expire_seconds"`
+		URL           string `json:"url"`
+	}
+	err = json.Unmarshal(respBytes, &data)
+	if err != nil {
+		return "", err
+	}
+
+	var png []byte
+	png, err = qrcode.Encode(data.URL, qrcode.Medium, 256)
+	base64Image := base64.StdEncoding.EncodeToString(png)
+	return base64Image, nil
+}

object/application.go

@@ -20,6 +20,7 @@ import (
 	"regexp"
 	"strings"
 
+	"github.com/casdoor/casdoor/idp"
 	"github.com/casdoor/casdoor/util"
 	"xorm.io/core"
 )
@@ -119,9 +120,11 @@ func getProviderMap(owner string) map[string]*Provider {
 	providers := GetProviders(owner)
 	m := map[string]*Provider{}
 	for _, provider := range providers {
-		//if provider.Category != "OAuth" {
-		//	continue
-		//}
+		// Get QRCode only once
+		if provider.Type == "WeChat" && provider.DisableSsl == true && provider.Content == "" {
+			provider.Content, _ = idp.GetWechatOfficialAccountQRCode(provider.ClientId2, provider.ClientSecret2)
+			UpdateProvider(provider.Owner+"/"+provider.Name, provider)
+		}
 
 		m[provider.Name] = GetMaskedProvider(provider)
 	}

object/provider.go

@@ -46,9 +46,9 @@ type Provider struct {
 
 	Host       string `xorm:"varchar(100)" json:"host"`
 	Port       int    `json:"port"`
-	DisableSsl bool   `json:"disableSsl"`
+	DisableSsl bool   `json:"disableSsl"` // If the provider type is WeChat, DisableSsl means EnableQRCode
 	Title      string `xorm:"varchar(100)" json:"title"`
-	Content    string `xorm:"varchar(1000)" json:"content"`
+	Content    string `xorm:"varchar(1000)" json:"content"` // If provider type is WeChat, Content means QRCode string by Base64 encoding
 	Receiver   string `xorm:"varchar(100)" json:"receiver"`
 
 	RegionId     string `xorm:"varchar(100)" json:"regionId"`

routers/router.go

@@ -54,6 +54,8 @@ func initAPI() {
 	beego.Router("/api/get-saml-login", &controllers.ApiController{}, "GET:GetSamlLogin")
 	beego.Router("/api/acs", &controllers.ApiController{}, "POST:HandleSamlLogin")
 	beego.Router("/api/saml/metadata", &controllers.ApiController{}, "GET:GetSamlMeta")
+	beego.Router("/api/webhook", &controllers.ApiController{}, "POST:HandleOfficialAccountEvent")
+	beego.Router("/api/get-webhook-event", &controllers.ApiController{}, "GET:GetWebhookEventType")
 
 	beego.Router("/api/get-organizations", &controllers.ApiController{}, "GET:GetOrganizations")
 	beego.Router("/api/get-organization", &controllers.ApiController{}, "GET:GetOrganization")

web/src/ProviderEditPage.js

@@ -424,6 +424,20 @@ class ProviderEditPage extends React.Component {
             </React.Fragment>
           )
         }
+        {
+          this.state.provider.type !== "WeChat" ? null : (
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("provider:Enable QR code"), i18next.t("provider:Enable QR code - Tooltip"))} :
+              </Col>
+              <Col span={1} >
+                <Switch checked={this.state.provider.disableSsl} onChange={checked => {
+                  this.updateProviderField("disableSsl", checked);
+                }} />
+              </Col>
+            </Row>
+          )
+        }
         {
           this.state.provider.type !== "Adfs" && this.state.provider.type !== "Casdoor" && this.state.provider.type !== "Okta" ? null : (
             <Row style={{marginTop: "20px"}} >

web/src/auth/AuthBackend.js

@@ -130,3 +130,13 @@ export function loginWithSaml(values, param) {
     },
   }).then(res => res.json());
 }
+
+export function getWechatMessageEvent() {
+  return fetch(`${Setting.ServerUrl}/api/get-webhook-event`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}

web/src/auth/ProviderButton.js

@@ -40,6 +40,8 @@ import BilibiliLoginButton from "./BilibiliLoginButton";
 import OktaLoginButton from "./OktaLoginButton";
 import DouyinLoginButton from "./DouyinLoginButton";
 import * as AuthBackend from "./AuthBackend";
+import {getEvent} from "./Util";
+import {Modal} from "antd";
 
 function getSigninButton(type) {
   const text = i18next.t("login:Sign in with {type}").replace("{type}", type);
@@ -116,11 +118,33 @@ function getSamlUrl(provider, location) {
 export function renderProviderLogo(provider, application, width, margin, size, location) {
   if (size === "small") {
     if (provider.category === "OAuth") {
-      return (
-        <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
-          <img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
-        </a>
-      );
+      if (provider.type === "WeChat" && provider.clientId2 !== "" && provider.clientSecret2 !== "" && provider.content !== "" && provider.disableSsl === true) {
+        const info = async() => {
+          const t1 = setInterval(await getEvent, 1000, application, provider);
+          {Modal.info({
+            title: i18next.t("provider:Please use WeChat and scan the QR code to sign in"),
+            content: (
+              <div>
+                <img width={256} height={256} src = {"data:image/png;base64," + provider.content} alt="Wechat QR code" style={{margin: margin}} />
+              </div>
+            ),
+            onOk() {
+              window.clearInterval(t1);
+            },
+          });}
+        };
+        return (
+          <a key={provider.displayName} >
+            <img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} onClick={info} />
+          </a>
+        );
+      } else {
+        return (
+          <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
+            <img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
+          </a>
+        );
+      }
     } else if (provider.category === "SAML") {
       return (
         <a key={provider.displayName} onClick={() => getSamlUrl(provider, location)}>

web/src/auth/Util.js

@@ -14,6 +14,9 @@
 
 import React from "react";
 import {Alert, Button, Result, message} from "antd";
+import {getWechatMessageEvent} from "./AuthBackend";
+import * as Setting from "../Setting";
+import * as Provider from "./Provider";
 
 export function showMessage(type, text) {
   if (type === "success") {
@@ -150,3 +153,12 @@ export function getQueryParamsFromState(state) {
     return query;
   }
 }
+
+export function getEvent(application, provider) {
+  getWechatMessageEvent()
+    .then(res => {
+      if (res.data === "SCAN" || res.data === "subscribe") {
+        Setting.goToLink(Provider.getAuthUrl(application, provider, "signup"));
+      }
+    });
+}

web/src/locales/de/data.json

@@ -478,6 +478,8 @@
     "Email Content - Tooltip": "Unique string-style identifier",
     "Email Title": "E-Mail-Titel",
     "Email Title - Tooltip": "Unique string-style identifier",
+    "Enable QR code": "Enable QR code",
+    "Enable QR code - Tooltip": "Enable QR code - Tooltip",
     "Endpoint": "Endpoint",
     "Endpoint (Intranet)": "Endpunkt (Intranet)",
     "Host": "Host",
@@ -496,6 +498,7 @@
     "Parse": "Parse",
     "Parse Metadata successfully": "Metadaten erfolgreich analysieren",
     "Path prefix": "Path prefix",
+    "Please use WeChat and scan the QR code to sign in": "Please use WeChat and scan the QR code to sign in",
     "Port": "Port",
     "Port - Tooltip": "Unique string-style identifier",
     "Prompted": "Prompted",

web/src/locales/en/data.json

@@ -478,6 +478,8 @@
     "Email Content - Tooltip": "Email Content - Tooltip",
     "Email Title": "Email Title",
     "Email Title - Tooltip": "Email Title - Tooltip",
+    "Enable QR code": "Enable QR code",
+    "Enable QR code - Tooltip": "Enable QR code - Tooltip",
     "Endpoint": "Endpoint",
     "Endpoint (Intranet)": "Endpoint (Intranet)",
     "Host": "Host",
@@ -496,6 +498,7 @@
     "Parse": "Parse",
     "Parse Metadata successfully": "Parse Metadata successfully",
     "Path prefix": "Path prefix",
+    "Please use WeChat and scan the QR code to sign in": "Please use WeChat and scan the QR code to sign in",
     "Port": "Port",
     "Port - Tooltip": "Port - Tooltip",
     "Prompted": "Prompted",

web/src/locales/fr/data.json

@@ -478,6 +478,8 @@
     "Email Content - Tooltip": "Unique string-style identifier",
     "Email Title": "Titre de l'e-mail",
     "Email Title - Tooltip": "Unique string-style identifier",
+    "Enable QR code": "Enable QR code",
+    "Enable QR code - Tooltip": "Enable QR code - Tooltip",
     "Endpoint": "Endpoint",
     "Endpoint (Intranet)": "Point de terminaison (Intranet)",
     "Host": "Hôte",
@@ -496,6 +498,7 @@
     "Parse": "Parse",
     "Parse Metadata successfully": "Analyse des métadonnées réussie",
     "Path prefix": "Path prefix",
+    "Please use WeChat and scan the QR code to sign in": "Please use WeChat and scan the QR code to sign in",
     "Port": "Port",
     "Port - Tooltip": "Unique string-style identifier",
     "Prompted": "Prompted",

web/src/locales/ja/data.json

@@ -478,6 +478,8 @@
     "Email Content - Tooltip": "Unique string-style identifier",
     "Email Title": "メールタイトル",
     "Email Title - Tooltip": "Unique string-style identifier",
+    "Enable QR code": "Enable QR code",
+    "Enable QR code - Tooltip": "Enable QR code - Tooltip",
     "Endpoint": "Endpoint",
     "Endpoint (Intranet)": "エンドポイント (イントラネット)",
     "Host": "ホスト",
@@ -496,6 +498,7 @@
     "Parse": "Parse",
     "Parse Metadata successfully": "メタデータの解析に成功",
     "Path prefix": "Path prefix",
+    "Please use WeChat and scan the QR code to sign in": "Please use WeChat and scan the QR code to sign in",
     "Port": "ポート",
     "Port - Tooltip": "Unique string-style identifier",
     "Prompted": "Prompted",