如何实现扫码登录功能（Vue）
1、账户申请
应⽤通过审核后，会得到AppID和 AppSecret，后边进⾏编码中会使⽤。
2、登录流程（Vue.js）
1. 第三⽅发起授权登录请求，⽤户允许授权第三⽅应⽤后，会拉起应⽤或重定向到第三⽅⽹站，并且带上授权临时票据
code参数；
2. 通过code参数加上AppID和AppSecret等，通过API换取access_token；
3. 通过access_token进⾏接⼝调⽤，获取⽤户基本数据资源或帮助⽤户实现基本操作。
获取access_token时序图：
步骤：
说明： domain: 指的是域名或者IP地址
1、添加⼀个div, ⽤于显⽰登陆⼆维码
<div id="weixin"></div>
2、添加mounted，引⼊登录⼆维码 JS
mounted(){
var obj =new WxLogin({
id:"weixin",
appid:"wx3bdb1192c22883f3",
scope:"snsapi_login",
// 扫码成功后跳转的地址
redirect_uri:"domain/weixinlogin"
});
},
王子 鬼鬼
head:{
script:[
{ src:"res.wx.qq/connect/zh_CN/htmledition/js/wxLogin.js"}
]
}
appid: 应⽤唯⼀标识
scope：应⽤授权作⽤于
redirect_uri：回调地址，是登陆成功后要跳转到的页⾯
3、显⽰⼆维码
扫描⼆维码登录后，点击确认登录按钮后，浏览器会⾃动跳到：
这个code是发给⽤户的临时令牌。我们可以根据code再次请求第三⽅登陆接⼝得到access_token（正式令牌）3、获取access_token
3.1、API 介绍
通过code获取access_token
1、接⼝说明
HTTP请求⽅式： GET
URL：api.weixin.qq/sns/oauth2/access_token?
appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
2、参数说明
参数是否必须说明
appid是应⽤唯⼀标识，在开放平台提交应⽤审核通过后获得
secret是应⽤密钥AppSecret，在开放平台提交应⽤审核通过后获得code是填写第⼀步获取的code参数grant_type是填authorization_code
3、返回说明
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}任程伟个人资料
参数说明
access_token接⼝调⽤凭证
expires_in access_token接⼝调⽤凭证超时时间，单位（秒）
refresh_token⽤户刷新access_token
openid授权⽤户唯⼀标识
scope⽤户授权的作⽤域，使⽤逗号（,）分隔
章子怡三重门事件真相3.2、⽤Node.js创建服务
也可以⽤Java，Python 等其他语⾔
1. 新建⽂件 server.js
御很哀伤是谁
var http =require('http');
var https =require('https');
var url =require('url');
var params=url.parse(request.url,true).query;
// 通过审核后，得到的appid, AppSecret
var appid='************';
var secret='*******************';
if(params.operation==='token'){
<(
胡彦斌谈郑爽恋情
`api.weixin.qq/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${de}&grant_type=authorization_code`,
function(res){
<('data',function(chunk){
response.writeHead(200,{'Content-Type':'application/json;charset=utf-8',"Access-Control-Allow-Origin":"*"});
});
})
}
}).listen(8888);
// 终端打印如下信息
console.log('Server running at 127.0.0.1:8888/');
2. 在控制台输⼊ node server 运⾏服务
3. 访问地址
4. 得到结果
{
"access_token":"10_zSHADX2JGMivKFfa4nMbZV3ECzY21UY3qrF5ADyjpr_iiLUifo-nlN0GaRnUEN9T7BagiwSC07awplRFIO1Ghw",
"expires_in":7200,
"refresh_token":"10__zl8gcJz0RXVDKtksbNTQJZ2uK1HiLJZ3I5PcSkA2VB3b6WXi2CR3R_htW6B8kKOmj-91p08SJMfVKkL84vP1w",
"openid":"oypcC1u9r-mxVsRGSLFqE65lysVI",
"scope":"snsapi_login",
"unionid":"o6JuL1gaIwnVsZC5BpRYImTHKTm8"
}
3.3 前端页⾯调⽤node服务
1、通过 axios 调⽤node服务，新建⽂件：@/api/weixin.js
这⾥是因为接⼝统⼀管理，单独存放在api⽂件下
import axios from'axios'
export function getAccessToken(code){
(`localhost:8888?operation=token&code=${code}`)
}
2、添加⼯具 utils/param.js （⽤于获取浏览器地址栏参数code）
export function getUrlParam(name){
  var reg =new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if(r !=null)return unescape(r[2]);
  return null;
}
3、创建weixinLogin.vue
<template>
<div></div>
</template>
<script>
import{ getUrlParam }from'@/utils/param'
import{ getAccessToken }from'@/api/weixin'
export default{
mounted(){
let code=getUrlParam('code')
if(code!==null){//如果是登陆
//根据code获取access_token
getAccessToken(code).then( res=>{
let access_token= res.data.access_token
let openid= res.data.openid
console.log('access_token:'+access_token+'openid:'+openid)
})
}
}
}
</script>
4、获取⽤户头像和昵称
4.1、API
1、接⼝说明
1. HTTP请求⽅式： GET
2. URL：api.weixin.qq/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
2、参数说明
参数是否必须说明
access_token是调⽤凭证
openid是普通⽤户的标识，对当前开发者帐号唯⼀
lang否国家地区语⾔版本，zh_CN 简体，zh_TW 繁体，en 英语，默认为zh-CN 3、返回说明
{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",雪中悍刀行姜泥结局
"country":"COUNTRY",
"headimgurl":"wx.qlogo/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMs v84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
],
"unionid":" o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
参数说明
openid普通⽤户的标识，对当前开发者帐号唯⼀
nickname普通⽤户昵称
sex普通⽤户性别，1为男性，2为⼥性
province普通⽤户个⼈资料填写的省份
city普通⽤户个⼈资料填写的城市
country国家，如中国为CN
headimgurl ⽤户头像，最后⼀个数值代表正⽅形头像⼤⼩（有0、46、64、96、132数值可选，0代表640*640正⽅形头像），⽤户没有头像时
该项为空
privilege⽤户特权信息，json数组，如沃卡⽤户为（chinaunicom）
unionid⽤户统⼀标识。针对⼀个开放平台帐号下的应⽤，同⼀⽤户的unionid是唯⼀的。
4.2、添加 node 服务
新增代码
if(params.operation==='userinfo'){
<(`api.weixin.qq/sns/userinfo?access_token=${params.access_token}&openid=${params.openid}`,function(res){
<('data',function(chunk){
// 发送响应数据 "Hello World"
response.writeHead(200,{'Content-Type':'application/json;charset=utf-8',"Access-Control-Allow-Origin":"*"});
});
})
}
完整
var http =require('http');
var https =require('https');
var url =require('url');
var params = url.parse(request.url,true).query;
// 通过审核后，得到的appid, AppSecret
var appid ='************';
var secret ='*******************';
if(params.operation ==='token'){
<(`api.weixin.qq/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${de}&grant_type=authorizati on_code`,function(res){
<('data',function(chunk){
response.writeHead(200,{'Content-Type':'application/json;charset=utf-8',"Access-Control-Allow-Origin":"*"});
});
})
}
if(params.operation ==='userinfo'){
<(`api.weixin.qq/sns/userinfo?access_token=${params.access_token}&openid=${params.openid}`,function(res){