Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat:desktop support wechat public account login (#4519)
* feat:desktop support wechat public account login Signed-off-by: jingyang <3161362058@qq.com> * add i18n Signed-off-by: jingyang <3161362058@qq.com> * fix ci * fix openid --------- Signed-off-by: jingyang <3161362058@qq.com>
- Loading branch information
Showing
14 changed files
with
513 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { getWechatQR, getWechatResult } from '@/api/platform'; | ||
| import useSessionStore from '@/stores/session'; | ||
| import { Box, Image, useToast } from '@chakra-ui/react'; | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import { useTranslation } from 'next-i18next'; | ||
| import { useRouter } from 'next/router'; | ||
| import React, { useCallback } from 'react'; | ||
|
|
||
| export default function useWechat() { | ||
| const { t } = useTranslation(); | ||
| const router = useRouter(); | ||
| const { setSession } = useSessionStore(); | ||
|
|
||
| const [wechatInfo, setwechatInfo] = React.useState<{ | ||
| code: string; | ||
| codeUrl: string; | ||
| }>(); | ||
|
|
||
| const login = React.useCallback(() => { | ||
| getWechatQR().then((res) => { | ||
| console.log(res); | ||
| setwechatInfo(res.data); | ||
| }); | ||
| }, []); | ||
|
|
||
| useQuery( | ||
| ['getWechatResult', wechatInfo?.code], | ||
| () => getWechatResult({ code: wechatInfo?.code || '' }), | ||
| { | ||
| refetchInterval: 3 * 1000, | ||
| enabled: !!wechatInfo?.code, | ||
| onSuccess(data) { | ||
| console.log(data); | ||
| if (data.code === 200 && data.data) { | ||
| setSession(data.data); | ||
| router.replace('/'); | ||
| } | ||
| } | ||
| } | ||
| ); | ||
|
|
||
| const WechatComponent = useCallback( | ||
| () => ( | ||
| <Box p={5}> | ||
| {wechatInfo?.codeUrl && <Image w="200px" src={wechatInfo?.codeUrl} alt="qrcode"></Image>} | ||
| </Box> | ||
| ), | ||
| [wechatInfo?.codeUrl] | ||
| ); | ||
|
|
||
| return { | ||
| login, | ||
| WechatComponent | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
frontend/desktop/src/pages/api/auth/publicWechat/getWechatQR.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { getWeChatAccessToken } from '@/services/backend/db/wechatCode'; | ||
| import { jsonRes } from '@/services/backend/response'; | ||
| import { nanoid } from 'nanoid'; | ||
| import { NextApiRequest, NextApiResponse } from 'next'; | ||
|
|
||
| export default async function handler(req: NextApiRequest, res: NextApiResponse) { | ||
| try { | ||
| const access_token = await getWeChatAccessToken(); | ||
| if (!access_token) { | ||
| return jsonRes(res, { | ||
| message: 'Failed to authenticate with wechat', | ||
| code: 400, | ||
| data: 'access_token is null' | ||
| }); | ||
| } | ||
|
|
||
| const sceneStr = nanoid(8); | ||
|
|
||
| const ticketPayload = { | ||
| expire_seconds: 1 * 60 * 60, // s | ||
| action_name: 'QR_STR_SCENE', | ||
| action_info: { scene: { scene_str: sceneStr } } | ||
| }; | ||
|
|
||
| const ticketInfo = (await ( | ||
| await fetch(`https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=${access_token}`, { | ||
| method: 'POST', | ||
| body: JSON.stringify(ticketPayload) | ||
| }) | ||
| ).json()) as { ticket: string; expire_seconds: number; url: string; errcode: number }; | ||
|
|
||
| if (ticketInfo.errcode === 40001) { | ||
| return jsonRes(res, { code: 201, message: 'ticket error try again' }); | ||
| } | ||
|
|
||
| const qrCodeUrl = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${encodeURIComponent( | ||
| ticketInfo.ticket | ||
| )}`; | ||
|
|
||
| return jsonRes(res, { | ||
| code: 200, | ||
| data: { | ||
| code: sceneStr, | ||
| codeUrl: qrCodeUrl | ||
| } | ||
| }); | ||
| } catch (err) { | ||
| console.log(err); | ||
| jsonRes(res, { | ||
| code: 500, | ||
| message: 'service getWechatQR error' | ||
| }); | ||
| } | ||
| } |
58 changes: 58 additions & 0 deletions
58
frontend/desktop/src/pages/api/auth/publicWechat/getWechatResult.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { getWeChatAccessToken, verifyWechatCode } from '@/services/backend/db/wechatCode'; | ||
| import { getOauthRes } from '@/services/backend/oauth'; | ||
| import { jsonRes } from '@/services/backend/response'; | ||
| import { TWechatUser } from '@/types/user'; | ||
| import { getBase64FromRemote } from '@/utils/tools'; | ||
| import { NextApiRequest, NextApiResponse } from 'next'; | ||
|
|
||
| export default async function handler(req: NextApiRequest, res: NextApiResponse) { | ||
| try { | ||
| const access_token = await getWeChatAccessToken(); | ||
| const { code } = req.query as { code: string }; | ||
| if (!code) { | ||
| return jsonRes(res, { | ||
| code: 400, | ||
| data: 'Parameter error' | ||
| }); | ||
| } | ||
|
|
||
| const verifyInfo = await verifyWechatCode({ code }); | ||
| if (!verifyInfo?.openid) { | ||
| return jsonRes(res, { | ||
| code: 201, | ||
| data: 'Verification code expired' | ||
| }); | ||
| } | ||
|
|
||
| const { openid } = verifyInfo; | ||
| const userUrl = `https://api.weixin.qq.com/cgi-bin/user/info?access_token=${access_token}&openid=${openid}&lang=zh_CN`; | ||
| const userInfo = (await (await fetch(userUrl)).json()) as TWechatUser; | ||
| const avatar_url = (await getBase64FromRemote(userInfo?.headimgurl)) as string; | ||
|
|
||
| if (!userInfo?.openid) { | ||
| return jsonRes(res, { | ||
| code: 500, | ||
| message: 'Failed to obtain WeChat information' | ||
| }); | ||
| } | ||
|
|
||
| const data = await getOauthRes({ | ||
| provider: 'wechat_open', | ||
| id: userInfo.openid, | ||
| name: userInfo?.nickname, | ||
| avatar_url | ||
| }); | ||
|
|
||
| return jsonRes(res, { | ||
| code: 200, | ||
| message: 'Successfully', | ||
| data | ||
| }); | ||
| } catch (err) { | ||
| console.log(err); | ||
| jsonRes(res, { | ||
| code: 500, | ||
| message: 'service getWechatResult error' | ||
| }); | ||
| } | ||
| } |
Oops, something went wrong.