fix: fix wechat media account can not bind issue (#2774)

* fix: fix wechat media account can not bind

* fix: improve code format
This commit is contained in:
DacongDA 2024-03-05 18:46:28 +08:00 committed by GitHub
parent fc137b9f76
commit 6a7ac35e65
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 46 additions and 33 deletions

View File

@ -42,9 +42,7 @@ import OktaLoginButton from "./OktaLoginButton";
import DouyinLoginButton from "./DouyinLoginButton";
import LoginButton from "./LoginButton";
import * as AuthBackend from "./AuthBackend";
import * as Setting from "../Setting";
import {getEvent} from "./Util";
import {Modal} from "antd";
import {WechatOfficialAccountModal} from "./Util";
function getSigninButton(provider) {
const text = i18next.t("login:Sign in with {type}").replace("{type}", provider.displayName !== "" ? provider.displayName : provider.type);
@ -141,32 +139,11 @@ export function renderProviderLogo(provider, application, width, margin, size, l
if (size === "small") {
if (provider.category === "OAuth") {
if (provider.type === "WeChat" && provider.clientId2 !== "" && provider.clientSecret2 !== "" && provider.disableSsl === true && !navigator.userAgent.includes("MicroMessenger")) {
const info = async() => {
AuthBackend.getWechatQRCode(`${provider.owner}/${provider.name}`).then(
async res => {
if (res.status !== "ok") {
Setting.showMessage("error", res?.msg);
return;
}
const t1 = setInterval(await getEvent, 1000, application, provider, res.data2);
{Modal.info({
title: i18next.t("provider:Please use WeChat to scan the QR code and follow the official account for sign in"),
content: (
<div style={{marginRight: "34px"}}>
<img src = {"data:image/png;base64," + res.data} alt="Wechat QR code" style={{width: "100%"}} />
</div>
),
onOk() {
window.clearInterval(t1);
},
});}
}
);
};
return (
<a key={provider.displayName} >
<img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} className="provider-img" style={{margin: margin}} onClick={info} />
<img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} className="provider-img" style={{margin: margin}} onClick={() => {
WechatOfficialAccountModal(application, provider, "signup");
}} />
</a>
);
} else {

View File

@ -13,11 +13,12 @@
// limitations under the License.
import React from "react";
import {Alert, Button, Result} from "antd";
import {Alert, Button, Modal, Result} from "antd";
import i18next from "i18next";
import {getWechatMessageEvent} from "./AuthBackend";
import * as Setting from "../Setting";
import * as Provider from "./Provider";
import * as AuthBackend from "./AuthBackend";
export function renderMessage(msg) {
if (msg !== null) {
@ -188,12 +189,36 @@ export function getQueryParamsFromState(state) {
}
}
export function getEvent(application, provider, ticket) {
export function getEvent(application, provider, ticket, method) {
getWechatMessageEvent(ticket)
.then(res => {
if (res.data === "SCAN" || res.data === "subscribe") {
const code = res?.data2;
Setting.goToLink(Provider.getAuthUrl(application, provider, "signup", code));
Setting.goToLink(Provider.getAuthUrl(application, provider, method ?? "signup", code));
}
});
}
export async function WechatOfficialAccountModal(application, provider, method) {
AuthBackend.getWechatQRCode(`${provider.owner}/${provider.name}`).then(
async res => {
if (res.status !== "ok") {
Setting.showMessage("error", res?.msg);
return;
}
const t1 = setInterval(await getEvent, 1000, application, provider, res.data2, method);
{Modal.info({
title: i18next.t("provider:Please use WeChat to scan the QR code and follow the official account for sign in"),
content: (
<div style={{marginRight: "34px"}}>
<img src = {"data:image/png;base64," + res.data} alt="Wechat QR code" style={{width: "100%"}} />
</div>
),
onOk() {
window.clearInterval(t1);
},
});}
}
);
}

View File

@ -21,6 +21,7 @@ import * as Provider from "../auth/Provider";
import * as AuthBackend from "../auth/AuthBackend";
import {goToWeb3Url} from "../auth/ProviderButton";
import AccountAvatar from "../account/AccountAvatar";
import {WechatOfficialAccountModal} from "../auth/Util";
class OAuthWidget extends React.Component {
constructor(props) {
@ -196,11 +197,21 @@ class OAuthWidget extends React.Component {
linkedValue === "" ? (
provider.category === "Web3" ? (
<Button style={{marginLeft: "20px", width: linkButtonWidth}} type="primary" disabled={user.id !== account.id} onClick={() => goToWeb3Url(application, provider, "link")}>{i18next.t("user:Link")}</Button>
) : (
provider.type === "WeChat" && provider.clientId2 !== "" && provider.clientSecret2 !== "" && provider.disableSsl === true && !navigator.userAgent.includes("MicroMessenger") ? (
<a key={provider.displayName}>
<Button style={{marginLeft: "20px", width: linkButtonWidth}} type="primary" disabled={user.id !== account.id} onClick={
() => {
WechatOfficialAccountModal(application, provider, "link");
}
}>{i18next.t("user:Link")}</Button>
</a>
) : (
<a key={provider.displayName} href={user.id !== account.id ? null : Provider.getAuthUrl(application, provider, "link")}>
<Button style={{marginLeft: "20px", width: linkButtonWidth}} type="primary" disabled={user.id !== account.id}>{i18next.t("user:Link")}</Button>
</a>
)
)
) : (
<Button disabled={!providerItem.canUnlink && !Setting.isAdminUser(account)} style={{marginLeft: "20px", width: linkButtonWidth}} onClick={() => this.unlinkUser(provider.type, linkedValue)}>{i18next.t("user:Unlink")}</Button>
)