博创网站建设团队,淘宝运营培训机构,深圳seo优化排名,优秀的个人博客网站一、流程#xff1a; 微信提供的扫码方式有两种,分别是:
跳转二维码扫描页面
内嵌式二维码根据文档我们可以知道关于扫码授权的模式整体流程为:
1. 第三方发起微信授权登录请求#xff0c;微信用户允许授权第三方应用后#xff0c;微信会拉起应用或重定向到第三方网站 微信提供的扫码方式有两种,分别是:
跳转二维码扫描页面
内嵌式二维码根据文档我们可以知道关于扫码授权的模式整体流程为:
1. 第三方发起微信授权登录请求微信用户允许授权第三方应用后微信会拉起应用或重定向到第三方网站并且带上授权临时票据 code 参数2. 通过 code 参数加上 AppID 和AppSecret等通过 API 换取access_token3. 通过access_token进行接口调用获取用户基本数据资源或帮助用户实现基本操作。二、前置条件 微信开发官网 申请 appid: ‘’, // 后端提供 redirect_uri: ‘’, // 后端提供 AppSecret // 后端提供
三、具体登录实现
实现方式一 使用vue插件
// 安装
npm install vue-wxlogin --save-dev
// js引入
import wxlogin from vue-wxlogin
components: { wxlogin }
使用
wxlogin:appidappid:scopesnsapi_login // 网页固定的:themeblack:redirect_uriredirect_uri:hrefbast64cssrelexternal nofollow/wxlogin// data
wxlogin:appidappid:scopesnsapi_login // 网页固定的:themeblack:redirect_uriredirect_uri:hrefbast64cssrelexternal nofollow/wxlogin// data
bast64css: data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O2hlaWdodDoyMDBweH0NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHh9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lfQ0KaWZyYW1lIHtoZWlnaHQ6IDMyMnB4O30NCg,appid: wx64914809da50, // 后端提供redirect_uri: http%3A%2F%2Flant.com, // 后端提供结果这样微信二维码就会显示在自己写的网页上
扫描后页面的url会给一个带code的地址 去获取code
if (window.location.href.indexOf(code) 0) {let code window.location.href.split(?)[1];code code.substring(5, code.indexOf());this.wechatcode codethis.wechatLogin()}把code给后端后端会返回给你这个人的信息
方式二 自己集成到自己的网页 1、首先在vue页面添加微信登录按钮
!--微信授权登录按钮--
img src/assets/images/weixin.png /a styleline-height: 60px;height: 60px; margin: 0 5px; typetext clickhandLoginByWx微信扫码登录/a2、配置登录相关参数跳转微信登录二维码授权页面
// 跳转微信登录二维码授权页面handLoginByWx() {// 重定向地址重定到当前页面在路径获取codeconst hrefUrl window.location.href// 判断是否已存在codeif (!this.code) {// 不存在配置相关微信登录参数主要是授权页面地址appID回调地址window.location.href https://open.weixin.qq.com/connect/qrconnect?appidAPPIDredirect_uri${encodeURIComponent(hrefUrl)}response_typecodescopesnsapi_login}}3.进行扫码授权确认
手机扫码二维码确认授权
4.回调
由于vue这边有路由守卫故相关获取回调返回的code值在路由守卫中进行处理
// 为微信授权登录重定向地址服务var temp (to.path).split()var pram temp[1]var item pram.split()var code item[1]// 重定向到微信登录页面并且将code值带上next({path: /login,query: { code: code }})5.登录页监听地址是否存在code
登录页面监听是否获取到微信授权返回的code值若存在则调用后台提供的接口将code返回给后端 6.根据后端返回的凭证再调用登录接口进行登录
方式三结合后端获取到二维码 1、添加一个div, 用于显示微信登陆二维码
div idweixin/div
2、添加mounted引入微信登录二维码 JS
mounted() {var obj new WxLogin({id: weixin,appid: wx3bdb1192c22883f3,scope: snsapi_login,// 扫码成功后 跳转的地址redirect_uri: http://domain/weixinlogin});},head: {script: [{ src: http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js }]}
appid: 应用唯一标识scope应用授权作用于redirect_uri回调地址是微信登陆成功后要跳转到的页面3、显示二维码
扫描二维码登录后点击确认登录按钮后浏览器会自动跳到
http://domain/weixinlogin?code02147Yff12Yhgz0ArCef1qabgf147Yf0stateundefined这个code是微信发给用户的临时令牌。我们可以根据code再次请求微信第三方登陆接口得到access_token正式令牌
3、获取access_token 3.1、API 介绍
通过code获取access_token进行其他接口调用1、接口说明 通过以下接口获取access_token
HTTP请求方式 GET
URLhttps://api.weixin.qq.com/sns/oauth2/access_token?appidAPPIDsecretSECRETcodeCODEgrant_typeauthorization_code返回以下参数
{access_token:ACCESS_TOKEN,expires_in:7200,refresh_token:REFRESH_TOKEN,openid:OPENID,scope:SCOPE
}3.2 以下vue前端调用java后端代码
1、通过 axios 调用node服务新建文件/api/weixin.js这里是因为接口统一管理单独存放在api文件下
import axios from axios
export function getAccessToken(code) {return axios.get(http://localhost:8888?operationtokencode${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
templatediv/div
/template
script
import { getUrlParam } from /utils/param
import { getAccessToken } from /api/weixinexport default {mounted(){let codegetUrlParam(code)if(code!null){//如果是微信登陆//根据code获取access_tokengetAccessToken(code).then( res{let access_token res.data.access_tokenlet openid res.data.openidconsole.log(access_token:access_token openid:openid)})}}
}
/script四、登录微信后获取微信中用户头像和昵称
API
1、接口说明
HTTP请求方式 GET
URLhttps://api.weixin.qq.com/sns/userinfo?access_tokenACCESS_TOKENopenidOPENID返回参数 { “openid”:“OPENID”, “nickname”:“NICKNAME”, “sex”:1, “province”:“PROVINCE”, “city”:“CITY”, “country”:“COUNTRY”, “headimgurl”: “http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0”, “privilege”:[ “PRIVILEGE1”, “PRIVILEGE2” ], “unionid”: o6_bmasdasdsad6_2sgVt7hMZOPfL } 在获取access_token和openid后再次请求接口获取昵称和头像保存到cookie中
templatediv/div
/template
script
import { getUrlParam } from /utils/param
import { getAccessToken } from /api/weixin
import { setUser } from /utils/auth export default {mounted(){let codegetUrlParam(code)if(code!null){//如果是微信登陆//根据code获取access_tokengetAccessToken(code).then( res{let access_token res.data.access_tokenlet openid res.data.openidweixin.getUserinfo( access_token, openid ).then( res {//提取用户昵称和头像let nickname res.data.nicknamelet headimgurl res.data.headimgurl// 将用户信息保存到token中setUser(access_token,nickname,headimgurl)location.href/ //跳转到首页})})}}
}
/script
至此getUser获取当前登录用户的用户名头像
欢迎评论留言。。。
