微信授权登录
前言
分享一下自己所遇到的问题,适合新手小白,在这里只记录前端所用到的内容,
首先你得拿到微信开放平台内创建应用的APPID,怎么拿这里就不记录了,自行去搜索
一、选择自己的登录方式
1.第一种是直接拼接url跳转微信的授权页面
2.第二种就是引用微信提供的[添加链接描述](http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js)将二维码引入自己的页面
说明:我用的是第二种方式授权,所以在这里记录一下第二种,也是推荐使用的一种
二、使用步骤
1.引入微信提供的wwLogin.js
代码如下(示例):将wwLogin.js下载至本地在所使用的页面引入
import '你的路径'
2.页面使用
代码如下(示例):在页面定义一个存放二维码的元素
<div id="wxcode"></div>//定义一个存放二维码的元素,当前id可自行设置,要和生成时id对应就可
3.生成二维码
methods:{
createWxQrcode() {
// 生成微信登录二维码
this.$nextTick(() => {
var obj = new WxLogin({
self_redirect: false,
id: "wxcode", // 页面显示二维码的容器id
appid: "你的APPID", // 微信开发者内创建应用的APPID
scope: "snsapi_login",
redirect_uri: encodeURIComponent('自己登录成功以后所进入的页面'),//当前回调的域名必须和微信开放平台授权回调域一致
state: "bind",
style: "black",
href:""//这个字段可设置二维码样式但是必须转base64格式 具体就不细说了,百度内容很多
});
})
}
}
4.调用方法
async mounted(){
this.createWxQrcode(); //调用你所定义的生成方法就可以了
}
5.获取code
代码如下(示例):最后一步因为我的回调地址不是当前登录页面地址,获取code的方法就得分开写
getUrlCode(){
var url = location.search
this.winUrl = url
var theRequest = new Object()
if(url.indexOf('?') != -1){
var str = url.substr(1)
var strs = str.split('&')
for(var i = 0; i < strs.length; i++){
theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
}
}
console.log(theRequest);
return theRequest
}
在你所用的地方获取调用地方法获取code 例如:this.getUrlCode().code
如果你的回调页面和你微信登录页面相同获取code就是第一步,先获取code,判断有无当前code,有code那就执行你有的逻辑,传给后台去获取其他参数返给你状态,如果没有code,同理就去执行没有code逻辑,获取code
总结
以上就是今天要讲的内容,本文仅仅简单介绍了微信授权登录的使用