怎么制作网站记事本,做网站难还是app难,wordpress站内访问谷歌,网站商城如何获取流量目录
引入
流程介绍
具体实现 引入 本文主要讲解网站应用中微信登录的具体流程是怎么样的#xff0c;以及作为前端开发人员在这整个流程中的主要任务是什么。 如果想要实现微信登录的功能#xff0c;需要开发人员到微信开放平台注册相应的账号#xff0c;进行注册应用以及作为前端开发人员在这整个流程中的主要任务是什么。 如果想要实现微信登录的功能需要开发人员到微信开放平台注册相应的账号进行注册应用需要300获取相应的id和密钥以及进行设置授权的回调域。在此过程中涉及到了微信用户第三方应用以及微信开放平台。现在以开发人员的角度来详细地介绍实现微信登录的整个流程
流程介绍
1️⃣前端开发人员需要引入微信提供生成二维码的核心插件。这时候可以到官方提供的文档中就行查看。然后编写生成二维码的代码这部分的代码同样在官方的文档里面有提供这部分的代码功能主要是用户点击登录按钮之后会向微信的服务器发一个请求请求成功之后微信服务器会向前端页面返回一张微信登录二维码的图片。 2️⃣二维码生成之后微信服务器会进行使用长轮询会问用户是否授权了若用户授权成功则微信服务器就会向我们项目的后台服务器发送一个用户授权成功的唯一标识code。 3️⃣若后台收到了code则后台会向微信的服务器发送请求带上codeappidsecret然后微信服务器会向后台服务器返回access_token。 4️⃣后台获取到access_token之后再向微信的服务器通过snaspi_uerinfo请求地址携带获取到的token发请求微信服务器则返回相应的用户信息。 5️⃣然后后台服务器获取到用户信息之后会进行重定向到前端的某一个页面通过query参数将用户信息注入给前端。前端拿到数据之后进行展示即可。整体的流程就是这样。 具体实现
以下我结合我之前做的商医通项目来进行展示在微信登录功能中作为前端开发的角色需要完成的任务。
首先在文件的静态页面中引入微信扫码登录需要的核心插件wxlogin.js。
html langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title尚医通/titlescript srchttp://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js/script/headbodydiv idapp/divscript typemodule src/src/main.ts/script/body
/html
第二步在需要使用微信登录的地方实例一个官方文档提供给我们的js对象。
var obj new WxLogin({self_redirect:true,id:login_container, appid: , scope: , redirect_uri: ,state: ,style: ,href: });
在这个项目点击登录是默认弹出的页面是手机登录的页面因此点击底下的微信小图标来进行场景的切换从手机登录到微信登录。因此在相应的切换场景中使用上述的js对象。
因此对微信扫描登录以及低下的微信小图标封装到一个盒子里面给这个盒子绑定相应的事件当点击时进行场景的切换以及定义一个WxLogin对象。
const changeScene async () {scene.value 1;new WxLogin({self_redirect: true,id: login_container,//appid需要向服务器发请求之后得到appid: ,scope: snsapi_login,//填写授权回调域路径就是用户授权成功以后微信服务器向公司后台推送code的地址redirect_uri: ,//statue就是后台服务器重定向的地址携带用户信息state: ,style: black,href: ,});
}
相应的实例参数说明表格如下
参数是否必须说明self_redirect否true手机点击确认登录后可以在 iframe 内跳转到 redirect_urifalse手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。id是第三方页面显示二维码的容器idappid是应用唯一标识在微信开放平台提交应用审核通过后获得scope是应用授权作用域拥有多个作用域用逗号,分隔网页应用目前仅填写snsapi_login即可redirect_uri是重定向地址需要进行UrlEncodestate否用于保持请求和回调的状态授权请求后原样带回给第三方。该参数可用于防止csrf攻击跨站请求伪造攻击建议第三方带上该参数可设置为简单的随机数加session进行校验style否提供black、white可选默认为黑色文字描述。详见文档底部FAQhref否自定义样式链接第三方可根据实际需求覆盖默认样式。详见文档底部FAQ
以上的参数 id为显示二维码的容器id因此需要在顶部是设置一个专门存放二维码的容器相应代码如下 div classwebchat v-showscene 1div idlogin_container/div/div
appidredirect_uri以及state在这个项目中需要向后台服务器发送请求因此找到后台服务器中对应的接口发请求获取相应参数的数值因为本项目是使用typescript编写的因此需要首先编写返回的数据的类型对其先进行定义再编写相应的接口函数。相应代码如下
export interface WXLogin{redirectUri:string,appid: string,scope: string,state: string
}
import request from /utils/request;
import type { WXLoginResponseData } from ./type
enum API {WXLOGIN_URL /user/weixin/getLoginParam/
}
export const reqWxLogin (wxRedirectUri: string) request.getany, WXLoginResponseData(API.WXLOGIN_URL ?wxRedirectUri${wxRedirectUri});
接口封装好了之后在相应的组件页面上发请求在我们点击微信登录的图标之后发请求因此在我们上面的changScene方法中在增加如下代码
const changeScene async () {let redirect_URL encodeURIComponent(window.location.origin /wxlogin);let result: WXLoginResponseData await reqWxLogin(redirect_URL);
}
此部分主要完成向后端服务器发请求获取微信扫描登录页面的参数发请求的同时还需要携带一个参数redirect_URL告诉服务器用户授权成功以后重定向项目到某个页面我们上述代码是重定向到/wxlogin页面后台服务器会将用户的数据注入到/wxlogin页面中。因此changScene()完整的代码如下
const changeScene async () {scene.value 1;let redirect_URL encodeURIComponent(window.location.origin /wxlogin);let result: WXLoginResponseData await reqWxLogin(redirect_URL);new WxLogin({self_redirect: true,id: login_container,appid: result.data.appid,scope: snsapi_login,redirect_uri: result.data.redirectUri,state: result.data.state,style: black,href: ,});
}
因此现在点击相应的微信登录页面会使用iframe内嵌生成的二维码到页面的容器中。
接下来我们需要创建一个页面来让后台服务器重定向时通过query参数注入相应的用户信息我们上述的代码已经指定重定向到了welogin页面上了因此在pages文件夹下进行创建。并在路由配置文件中进行设置此部分的代码就不展示了。welogin页面的代码如下
templatediv/div
/templatescript setup langts
//获取用户信息
import {useRoute} from vue-router;
//获取路由对象
let $routeuseRoute();
//持久化存储用户信息
localStorage.setItem(USERINFO,JSON.stringify($route.query));
//当微信登录成功时会有短暂的该容器显示重定向的页面会影响视觉效果因此对其进行隐藏
let html:anydocument.querySelector(html);
html.style.displaynone;
/scriptstyle scoped
/style
此部分主要是通过路由来获取到后台服务器重定向返回的用户信息并将获取到的用户信息进行持久化的存储。之后需要做的就是关闭登录界面同时仓库中也需要存一份用户的信息。那具体如何实现后面的功能呢
在这个项目中是通过切换场景为微信扫码时进行判断本地的存储是否有用户的信息若有则关闭相应的登录界面并存储到对应的仓库中并展示数据。我们使用到watch来进行监听场景的切换。相应代码如下
watch(()scene.value,(val:number){if(val1){userStore.queryState();}
})
在watch中使用了queryState方法该方法编写在用户的仓库中具体的方法如下 queryState(){let timersetInterval((){if(localStorage.getItem(USERINFO)){this.visiablefalse;this.userInfoJSON.parse(localStorage.getItem(USERINFO) as string);clearInterval(timer);}},1000);}
该方法主要是查询用户是否扫描成功每隔一秒调用一次如果有用户的信息则将登录页面关闭并将用户信息存储到仓库中若没有则会在一秒之后再次判断。最后相应的页面获取仓库中的信息进行展示。
好啦本次的文章就到这里了期待下一次的见面
