forked from ishareme/vue3-front-common
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ feat(project): add alipay qq wechat login weiboShare
- Loading branch information
Showing
20 changed files
with
481 additions
and
15 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
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,54 @@ | ||
| /** | ||
| * 同源不同页通讯 window open | ||
| * window.BroadcastChannel 不可用的时候降级处理 localStorage | ||
| */ | ||
|
|
||
| // 频道关键key值 | ||
| const LOGIN_SUCCESS_CHANNEL = 'LOGIN_SUCCESS_CHANNEL'; | ||
| let brodacastChannel = null; | ||
| if (window.BroadcastChannel) { | ||
| brodacastChannel = new BroadcastChannel(LOGIN_SUCCESS_CHANNEL); | ||
| } | ||
|
|
||
| // 发送消息的方法 | ||
| const send = (data) => { | ||
| if (brodacastChannel) { | ||
| brodacastChannel.postMessage(data); | ||
| } else { | ||
| localStorage.setItem(LOGIN_SUCCESS_CHANNEL, JSON.stringify(data)); | ||
| } | ||
| }; | ||
|
|
||
| // 等待回调的方法 | ||
| const wait = () => { | ||
| return new Promise((resolve) => { | ||
| if (brodacastChannel) { | ||
| brodacastChannel.onmessage = (event) => { | ||
| resolve(event.data); | ||
| }; | ||
| } else { | ||
| localStorage.onstorage = (event) => { | ||
| if (event.key === LOGIN_SUCCESS_CHANNEL) { | ||
| resolve(JSON.parse(event.newValue)); | ||
| } | ||
| }; | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| // 销毁 | ||
|
|
||
| const clear = () => { | ||
| if (brodacastChannel) { | ||
| brodacastChannel.close(); | ||
| brodacastChannel = null; | ||
| } else { | ||
| localStorage.removeItem(LOGIN_SUCCESS_CHANNEL); | ||
| } | ||
| }; | ||
|
|
||
| export default { | ||
| send, | ||
| wait, | ||
| clear, | ||
| }; |
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,37 @@ | ||
| import store from '@/store'; | ||
| import { LOGIN_TYPE_OAUTG_NO_REGISTER_CODE } from '@/constants'; | ||
| import { Message } from '@/libs'; | ||
| import router from '@/router'; | ||
|
|
||
| /** | ||
| * 第三方登录统一处理方法 | ||
| * @param {*} oauthType 登录方式 | ||
| * @param {*} oauthData 第三方数据 | ||
| */ | ||
| export const oauthLogin = async (oauthType, oauthData) => { | ||
| // 1.登录 | ||
| // 2. 是否需要注册 | ||
| const code = await store.dispatch('user/login', { | ||
| loginType: oauthType, | ||
| ...oauthData, | ||
| }); | ||
| // 判断扫码是否需要注册 | ||
| if (code === LOGIN_TYPE_OAUTG_NO_REGISTER_CODE) { | ||
| Message( | ||
| 'success', | ||
| `欢迎你 ${oauthData.nickname}, 请创建你的账号`, | ||
| 6000 | ||
| ); | ||
| // 进入注册页面，同时携带当前的第三方数据和注册标记 | ||
| router.push({ | ||
| path: '/register', | ||
| query: { | ||
| reqType: oauthType, | ||
| ...oauthData, | ||
| }, | ||
| }); | ||
| return; | ||
| } | ||
| // 否则表示用户已注册，直接进入首页 | ||
| router.push('/'); | ||
| }; |
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,22 @@ | ||
| import { getAlipay } from '@/api/pay'; | ||
| import { isMobileTerminal } from '@/utils/flexible'; | ||
|
|
||
| /** | ||
| * 触发支付宝支付 | ||
| * @param {*} title 支付标题 | ||
| * @param {*} desc 支付描述 | ||
| */ | ||
| export const alipay = async (title, desc) => { | ||
| try { | ||
| const { encodeURI } = await getAlipay( | ||
| title, | ||
| '0.01', | ||
| desc, | ||
| isMobileTerminal.value | ||
| ); | ||
| const url = decodeURIComponent(encodeURI); | ||
| window.location.href = url; | ||
| } catch (error) { | ||
| console.log('[ 1212 ]'); | ||
| } | ||
| }; |
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,12 @@ | ||
| import { WEI_BO_APP_KEY, WEI_BO_UID } from '@/constants'; | ||
|
|
||
| /** | ||
| * | ||
| * @param {*} imgUrl 分享图片 | ||
| * @param {*} path 网页链接 | ||
| */ | ||
| export const weiboShare = (imgUrl, path) => { | ||
| window.open( | ||
| `https://service.weibo.com/share/share.php?appkey=${WEI_BO_APP_KEY}&ralateUid=${WEI_BO_UID}&pic=${imgUrl}&title=这张图不错哦，给大家分享一下 ${path}` | ||
| ); | ||
| }; |
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,73 @@ | ||
| <template> | ||
| <div> | ||
| <span id="qqLoginBtn" v-show="false"> </span> | ||
| <SvgIcon class="w-4 cursor-pointer" name="qq" @click="onQQLogin" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| // QQ 登录的 URL | ||
| const QQ_LOGIN_URL = | ||
| 'https://graph.qq.com/oauth2.0/authorize?client_id=101998494&response_type=token&scope=all&redirect_uri=https%3A%2F%2Fimooc-front.lgdsunday.club%2Flogin'; | ||
| </script> | ||
| <script setup> | ||
| import { onMounted } from 'vue'; | ||
| import Brodacast from '@/utils/brodacast.js'; | ||
| import { oauthLogin } from '@/utils/oauth.js'; | ||
| import { LOGINTYPE_QQ } from '@/constants'; | ||
| const onQQLogin = () => { | ||
| openQQWindow(); | ||
| }; | ||
| // 处理qq登录视窗 移动端显示为满屏的状态 | ||
| const openQQWindow = () => { | ||
| window.open( | ||
| QQ_LOGIN_URL, | ||
| 'oauth2Login_10609', | ||
| 'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes' | ||
| ); | ||
| // 打开视窗之后开始等待 | ||
| Brodacast.wait().then((oauthObj) => { | ||
| Brodacast.clear(); | ||
| // 执行登录操作 | ||
| oauthLogin(LOGINTYPE_QQ, oauthObj); | ||
| }); | ||
| }; | ||
| onMounted(() => { | ||
| /* eslint-disable */ | ||
| QC.Login( | ||
| { | ||
| btnId: 'qqLoginBtn', //插入按钮的节点id | ||
| }, | ||
| // 登录成功之后的回调 会在 登录回调页面中被执行 小窗口中 | ||
| // qq登录存在缓存 登录成功之后 下次进入页面 会自动重新登录 刷新页面也会自动执行 | ||
| (data, opts) => { | ||
| console.log('qq登录成功', data, opts); | ||
| // 注销登录 防止下次打开页面直接展示上一次用户信息 | ||
| QC.Login.signOut(); | ||
| // 拿到qq用户的唯一标识 通过这个标识来判断当前用户是否已经注册我们app中 | ||
| const accessToken = /access_token=((.*))&expires_in/.exec( | ||
| window.location.hash | ||
| )[1]; | ||
| // 拼接获取到的对象 | ||
| const { nickname, figureurl_qq_2 } = data; | ||
| const oauthObj = { | ||
| nickname, | ||
| figureurl_qq_2, | ||
| accessToken, | ||
| }; | ||
| Brodacast.send(oauthObj); | ||
| // 针对于 移动端而言：通过移动端触发 QQ 登录会展示三个页面，原页面、QQ 吊起页面、回调页面。并且移动端一个页面展示整屏内容，且无法直接通过 window.close() 关闭，所以在移动端中，我们需要在当前页面继续进行后续操作。 | ||
| oauthLogin(LOGINTYPE_QQ, oauthObj); | ||
| // 移动端下不行 移动端下没有窗口的概念 | ||
| window.close(); | ||
| } | ||
| ); | ||
| }); | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped></style> |
Oops, something went wrong.