超全、超简单Vue微信公众号授权登录指南
<template> <div id="app"> <h1>微信授权登陆</h1> <div> <div> <span>手机号</span> <input type="number" :value="account" placeholder="请输入手机号"> </div> <br> <div> <span>验证码</span> <input type="text" :value="smsCode" placeholder="请输入验证码" maxlength="6"> </div> <br> <button @click="init">授权登陆</button> <p>{{code}}</p> </div> </div> </template> <script> /** * @description * * 官方网文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html * * 网页授权步骤 * * 1、拼接授权地址 * 2、访问授权地址 * 3、微信回调携带 code 参数 * 4、code 发送给服务器获取 openId token 等信息 结束 * * 注意事项: * 1、redirect_uri 重定向地址. * 1)线上环境:该参数是对应线上的域名,例如:https:xxx.web.com/ 这个地址要可以访问到你的 web 项目 * 2)开发环境:可能访问路径是:http://192.168.0.18:8080 但是这是内网地址,外网无法访问需要借助 内网穿透 工具 * 把内网映射到外网 例如: http://n9yjxe.natappfree.cc -> 127.0.0.1:8080 我这里就可以填写 http://n9yjxe.natappfree.cc/ 这个地址 * * 2、微信公众号管理端配置 https://mp.weixin.qq.com/cgi-bin/settingpage?t=setting/function&action=function&token=1538596787&lang=zh_CN * 1)设置与开发->公众号设置->功能设置->网页授权域名,配置你对应的线上域名或内网穿透域名,是域名没有http://或https:// 访问路径等 * 2)文件校验域名,这个步骤是微信要验证你的域名,放在域名根路径下要可以访问到 例如:https:xxx.web.com/MP_verify_JrxFeFmrqcxyTPAW.txt 即可 * 3)如果是开发环境,MP_verify_JrxFeFmrqcxyTPAW 放在项目 public 开启内网穿透就可以了 * 3、内网穿透 https://natapp.cn/ * 4、使用微信开发工具进行网页调试,需要把自己添加为微信公众号的开发者才可以 * */ // 微信授权登陆地址 const WX_AUTH_URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?'; // 重定向参数-固定写法 const REDIRECT = '#wechat_redirect'; export default { data() { return { account: '', smsCode: '', params: { appid: 'wxca62acc6a4560ddc', // 公众号 APP ID redirect_uri: `${encodeURI('http://n9yjxe.natappfree.cc/')}`, // 授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理 response_type: 'code', // 固定写法 scope: 'snsapi_base' // snsapi_base 静默授权获取 open id ;snsapi_userinfo 需要用户授权,获取详细信息 // state:'code', // a-zA-Z0-9的参数值,最多128字节 }, code: '', // 微信返回 code } }, created() { // 获取地址参数 const params = new URLSearchParams(location.search); this.code = params.get('code'); console.log(this.code) }, methods: { init() { // 访问地址 const access_url = WX_AUTH_URL + `${new URLSearchParams(this.params)}` + REDIRECT; // 这些需要判断没有 code 情况拉起授权登陆,有就结束放在重复拉起授权登陆 if (!this.code) { location.href = access_url; } } } } </script> <style> button { background-image: linear-gradient(219deg, #00A45A 0%, #03CE72 100%); color: #FFFFFF; width: 100%; height: 42px; box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 164, 90, 0.08); border-radius: 48px; font-size: 38rpx; border: none; } input { height: 29px; width: 90%; border-radius: 10px; border: 1px solid #cfcfcf; padding: 2px 13px; } </style>
效果图
哇!又赚了一天人民币
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库